HTML5 Video on Canvas + pixel manipulation

One of my latest experiments was to create a fullscreen background with a video, for this I used HTML5 video tag and loaded it on a canvas element.
Although it worked it somehow felt incomplete because it was simply a video as background, it needed some edge add to it, for this I decided to use Pixelate library http://close-pixelate.desandro.com/ and extend it so it supported video as well as images.
Github extension can be found also here:

https://github.com/netgfx/close-pixelate

** Note This example is best viewed with latest Chrome or Webkit browser. **

DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Text animation JQuery plugin released

I have just released a beta version of a JQuery plugin that manages text animation, it is super easy to use and the results are pretty impressive.

There is still work to be done and whoever wants to contribute is welcome to fork on github here

You can view the plugin page here -> http://netgfx.github.com/SplitText/

View EXAMPLES here -> http://www.netgfx.com/trunk/splitText/examples/examples.html

Or check out under the hood with a previous tutorial that I wrote here -> http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/

If you like it, drop me a line below, also if you find a bug make sure to file it on github

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Text Effects with TimelineMax

Text is one of the most important aspects of web-development, someone may have great pictures, effects, and complex animations but if there is no content in text, chances are that the viewer will start looking elsewhere. So since text is such a great aspect of the website or application why not try and make it a little more appealing and exciting, after all it’s not only what you say (write) but how you present it.

So I thought to create a series of effects and animations that modify and give text a “Wow factor”.

[[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]]<a href="http://codepen.io/netgfx/pen/DpbIy">Check out this Pen!</a>

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

ThreeJS camera control with TweenMax

Recently I started exploring the world of 3D, I mostly wanted to work in a familiar environment so I chose ThreeJS an excellent framework for 3D construction/animation with javascript. And of course I wanted to inject my favorite tool for javascript animation TweenMax.
So after a few examples and documentation reading I came up with a very simple example/tutorial of how to control various aspects of the camera in 3D space using TweenMax to animate properties and end-values.
For this example I also used the extremely helpful threejs boilerplate

You can view a DEMO here

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Image Gallery with TweenMax CSS3 effects and JQuery sauce

Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.

So I thought to create a little demo showcasing some of these cool new features.

This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.

You can view a rough DEMO here

delorian

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Animating properties of injected SVG elements with TweenMax

Hello all, this post was somewhat inspired by the work of PJ.Onori and his blog post about SVG injecting and manipulation through javascript and css.

You can read more about his findings here: svg-css-injection

So after injecting the SVG inside the DOM I thought of why shouldn’t we try and animate it (no one likes static images right?), some simple things like change color gracefully, scale it or even programmatically create a simple animation of it.

I will show here how we can use simple tools like JQuery and TweenMax from Greensock and animate a simple SVG graphic.

View a DEMO here: AnimateSVG DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Image Slideshow with PreloadJS, JQuery and TweenMax

This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.

DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Greensock-TweenMax Javascript animation (JQuery based)

Hello
This is the first post in this blog for javascript based stuff. I am using greensock products for years for flash/flex/air projects and I would not change their animation power with anything. So when greensock announced port to javascript I was thrilled, and excited to try out the “new” implementation… but wait… there is nothing “new” to the way we declare things… its the same compact and straightforward structure I used in flash! Amazing!

Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.

So for my next trick I created a page with the pacman eating some dots, this was done in 10′ and the javascript required as you will see its minimum.

!Note: best viewed with a modern browser as I used css3 for the shapes.

Check it out: http://www.netgfx.com/trunk/animateJS/

Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/

Facebooktwittergoogle_pluspinterestlinkedin
linkedin