Falling leaf animation

[palmjack]

Any advice how can i accomplish falling leaf animation?

I have a logo divided into four graphics, and one of these images has to fall like a leaf from a tree.

I know I have to use a BezierPlugin, but not sure how to get the image fall from the top of the window.

 

I'm attaching the graphic, I need to animate the heart pic.

 

Thx for any advice.

[Rodrigo]

Hi,

 

The following codepens of the Greensock collection could help:

 

See the Pen ABkdL by GreenSock (@GreenSock) on CodePen

 

See the Pen CHwDx by GreenSock (@GreenSock) on CodePen

 

And you should definitely look at this post:

http://forums.greensock.com/topic/8113-svg-path-animation-or-help-convert-path-to-bezier/

 

With that tool (thanks a lot Carl!!) you could preview your bezier and finally translate it to GSAP in order to achieve the falling leaf effect.

 

Hope this helps,

Cheers,

Rodrigo.

[Jonathan]

have you looked at this? ..

 

http://premiumcoding.com/freebie-jquery-falling-leaves/

 

you could download the files and try to convert that concept using GSAP.. which would probably make the leaf animation much more smoother and faster..

 

some type if starting point. When I have more time I will go over those files to look at converting to GSAP, and try to post here.

 

It might give you some ideas?

[jamiejefferson]

Here's a simple attempt just using regular left/top/rotation tweens: 

See the Pen mvued by jamiejefferson (@jamiejefferson) on CodePen

[Jonathan]

i was looking at the GreenSock code pen examples and they had this cool example that might give you some ideas.. you could try just reversing the position, and have the elements fall from the top instead of the bottom..

 

See the Pen zrmiG by GreenSock (@GreenSock) on CodePen