Draggable Vector Girl

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!

View the Draggable Vector Girl Demo

View Draggable Vector Girl on CodePen

Looking for the best selling Edge Animate templates – I’ve got you covered!

3 thoughts on “Draggable Vector Girl

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s