I’ve been messing around with SVG recently and this is the first of my demos. It ‘draws’ the vector image when you drag across the screen – you can even throw it and it’ll continue drawing – this is made possible by Greensock’s Draggable, ThrowPropsPlugin, TimelineMax and TweenMax (it sounds like a lot but really it isn’t).
The lovely vector art was free from VectorPortal.com – you can download this image here. I had to do some quite boring text replacement stuff and some other tedious acts of pointlessness to get the SVG data working right – SVG is still not accurate in terms of accessing things like
getTotalLength(); which I need for the tweens but it’s a start.
The effect is achieved by creating a TweenMax animation of the SVG path’s
stroke-dashoffset attribute and then nesting that inside a TimelineMax. The Draggable’s
onThrowUpdate then animates the TimelineMax’s ‘time’ property (which also has a slight animation applied to it for extra super smoothness).
Update: I’ve now added a colour tween that cycles through HSLA for added sweetness.
Now start throwing down some shapes!
Looking for the best selling Edge Animate templates – I’ve got you covered!