Simple SVG animation with Greensock DrawSVG-Plugin

I had some free time and thought to experiment a bit with the new DrawSVG plugin from Greensock, it is a plugin that animates the border of an SVG, other parts of the SVG like fill or opacity could already be tweened via TweenMax/Lite.

Here’s a quick tutorial to get you started and I hope you’ll forgive my lousy Illustrator skills…

See the Pen OPNOgM by Michael Dobekidis (@netgfx) on CodePen.

Learn more about the SVG Plugin here: Greensock DrawSVG-Plugin

Continue reading

Animated Ad with Greensock SplitText

Hello again, so I was asked to create an impressive Ad banner for a server company (a quite good one). Since most of the animation would involve letters I thought of the Greensock SplitText plugin.
And the result was extremely nice, it received over 1000 views on codepen in under 3 days.

Here is the animation in action, as always explained code follows.

See the Pen SplitText – Massive grid animation by Michael Dobekidis (@netgfx) on CodePen.

Find more info about SplitText plugin here:
http://www.greensock.com/splittext/

Continue reading

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!

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

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

TweenMax Bezier example

Hello all,

I haven’t post in a while but I have been quite busy creating some exciting stuff that I will be posting in the coming months.

For starters I thought to post an example of a bezier line as explained in the greensock forums. This is not entirelly my code but rather a re-creation from the .fla

So lets begin:

Here we create the main circle that will tween along the bezier path.

public function createMC()
{
var circ = new Sprite();
circ = new Sprite();
circ.name = 'mc';
circ.graphics.beginFill(0xff00ff,1);
circ.graphics.drawCircle(0,0,6);
circ.graphics.endFill();
circ.x = -10;
circ.y = 80;
stage.addChild(circ);

mc = stage.getChildByName('mc');

var button:Sprite = new Sprite();

button.graphics.beginFill(0xffeecc,1);
button.graphics.drawRect(0,0,30,30);
button.graphics.endFill();
button.x = 10;
button.y = 10;
button.width = 30;
button.height = 30;

button.addEventListener(MouseEvent.CLICK,resetLines,false,0,true);

createNodes();
}

Now we create the lines and the circles between them:
<code>
private function createNodes()
{
var circ = new Sprite();
for(var i=0;i {
circ = new Sprite();
circ.name = 'obj'+i;
circ.graphics.beginFill(0xff0000,1);
circ.graphics.drawCircle(0,0,3);
circ.graphics.endFill();
circ.x = i*100;
circ.y = 80;
stage.addChild(circ);
point_mcs.push(circ);
}

Now that we have created the lines and circles, we create the functions for the drag events:

function dragMe(e:Event){
            TweenMax.killAll();
            var object = e.target;
            object.startDrag();
            stage.addEventListener(MouseEvent.MOUSE_MOVE, update)
        }
       
        function stopDragMe(e:Event):void{
            TweenMax.killAll();
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, update)
            stopDrag();
            mc.x = point_mcs[0].x;
            mc.y = point_mcs[0].y;
            TweenMax.to(mc,5,{bezierThrough:bezierPoints});
        }  
       
        function update(e:Event):void{
            mc.x = point_mcs[0].x;
            mc.y = point_mcs[0].y;
            createBezierPointsObject();
            updatePath();
        }

At this point we should have circles that are draggable but the path does not update properly. Now we will exactly that:

function createBezierPointsObject(){
            bezierPoints = [];
            xA = []
            yA = []
            var max:int = point_mcs.length;
            for(var i:int = 0; i < max; i++){
                var curPoint = point_mcs[i];
                if(i!=0){
                    bezierPoints[i] = {x:curPoint.x, y:curPoint.y};
                }
                xA.push(curPoint.x);
                yA.push(curPoint.y);
            }
        }
       
//updating the path as we drag the nodes.
        function updatePath(){
           
            this.graphics.clear(); 
           
            this.graphics.lineStyle(1, 0x0000);
           
            this.graphics.moveTo(point_mcs[0].x, point_mcs[0].y)
            var bezierObj:Object=BezierPlugin.parseBeziers({"x":xA,"y":yA},true);
           
            var pointCount:int=0;
            while(pointCount<bezierObj["x"].length)
            {
                this.graphics.curveTo(bezierObj.x[pointCount][1], bezierObj.y[pointCount][1],bezierObj.x[pointCount][2],bezierObj.y[pointCount][2]);
                pointCount++
            }
           
        }


for(var i:Number = 0; ipoint_mcs[i].mouseChildren = false;
point_mcs[i].addEventListener(MouseEvent.MOUSE_DOWN, dragMe)
stage.addEventListener(MouseEvent.MOUSE_UP, stopDragMe)
}

createBezierPointsObject();
updatePath();
}

Download the project for Flash Builder here:
Bezier

View Example here:
DEMO