bsipple57

Hello everyone, I'm having a bit of trouble adding a series of nested timelines to a parent timeline for multiple iterations of a for loop. In short: For each iteration, I'm trying to add 3 nested timelines to a parent timeline -- and have nested TLs #2 and #3 play 0.5 seconds after nested TL #1. The code is part of a much larger scene, so I think it might be the most helpful to give the general structure ... let parentTL = new TimelineMax(), childTL1, childTL2, childTL3, uniqueLabel; for (let i of sequences) { childTL1 = createChildTL1(); childTL2 = createChildTL2(); childTL3 = createChildTL3(); uniqueLabel = createUniqueLabel(); parentTL.add(childTL1, uniqueLabel); parentTL.add([childTL2, childTL3], uniqueLabel + '+=' + '0.5'); } For some reason that I can't figure out, the parent timeline only plays the child timelines from the first iteration of the loop -- and then it stops. If, instead, I write this within the for loop... parentTL.add([childTL1, childTL2, childTL3]); ... all child timelines will execute, for every iteration -- but of course, they'll do so all at once on every iteration, and I can't achieve the proper offsetting that I was originally going for. I could certainly post my fuller source code if it helps, but I'm thinking that with this pattern alone, I'm overlooking something simple with regards to the Art of Positioning... something that's causing the follow-up timelines to be lost after that first iteration.

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.