Jump to content
GreenSock

palmjack

Falling leaf animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

post-4768-0-76769600-1376162974_thumb.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×