Jump to content
Search Community

Animating a Falling Leaf with the Bezier Plugin

bsipple57 test
Moderator Tag

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

Hey everyone, 

 

I've been putting together an SVG animation of a falling leaf that attempts to accurately render the falling motion according to sound laws of physics -- I'm going for something like this: https://www.youtube.com/watch?v=ylrdQhlI9bo.

 

As such, I've been trying to use the BezierPlugin to define sets of motion paths for each "phase" of the fall, and while I feel as though I have everything calculated correctly, the final result causes the leaf to veer wildly across the top and bottom of my entire SVG. 

 

I've tried varying the path properties between "left/top" and "x/y", using percentages as opposed to px, and also using "+= / -=" as opposed to exact values... and all produce the exact same motion. The main path declarations look like this...

var xExtent = -100;  // range spanned by x during the fall (starting from its resting point on the branch)
    yExtent = 180,    // range spanned by y during the fall (from the branch to... you know.. the ground)

    fallPath = {
            phase1: [
                {x: (xExtent * .0625) + 'px', y: (yExtent * .03) + 'px', rotationY: 0, rotationX: 5, rotationZ: 0},
                {x: (xExtent * .125) + 'px', y: 0 + 'px', rotationY: 0, rotationX: 10, rotationZ: 30}
            ],
            phase2: [
                {x: (xExtent * .25) + 'px', y: (yExtent * .07) + 'px', rotationY: 0, rotationX: 20, rotationZ: -60},
                {x: (xExtent * .375) + 'px', y: (yExtent * .145) + 'px', rotationY: 0, rotationX: 25, rotationZ: -10},
                {x: (xExtent * .70) + 'px', y: (yExtent * .175) + 'px', rotationY: 0, rotationX: 50, rotationZ: 5},
                {x: (xExtent * .775) + 'px', y: (yExtent * .05) + 'px', rotationY: 0, rotationX: 80, rotationZ: 80}
            ],
            phase3: [
                {x: (xExtent * .585) + 'px', y: (yExtent * .22) + 'px', rotationY: 0, rotationX: 0, rotationZ: 81},
                {x: (xExtent * .31) + 'px', y: (yExtent * .36) + 'px', rotationY: 0, rotationX: -10, rotationZ: -9},
                {x: (xExtent * .125) + 'px', y: (yExtent * .38) + 'px', rotationY: 0, rotationX: -60, rotationZ: -57},
                {x: (xExtent * .0625) + 'px', y:  (yExtent * .27) + 'px', rotationY: 0, rotationX: -80, rotationZ: -75}
            ],

............
..........
};

..........

for (var phase in fallPath) {
            if (fallPath.hasOwnProperty(phase)) {
                fallTl.add(
                    TweenMax.to(
                        leafSVG,
                        TOTAL_FALL_DURATION / numFallPhases,
                        {
                            bezier: {
                                type: 'thru',
                                values: fallPath[phase]
                            },
                            ease: Linear.easeNone
                        }
                    )
                );
            }
         

I've also included my

See the Pen MwVZRR by BrianSipple (@BrianSipple) on CodePen

, and I'm hoping someone might be able to spot an error that I'm simply overlooking. 

See the Pen by MwVZRR (@MwVZRR) on CodePen

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.
×
×
  • Create New...