Search the Community

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 current CodePen, and I'm hoping someone might be able to spot an error that I'm simply overlooking.