Converting Old TweenMax to New GSAP

[pmillerk88]

Hello all--

I'm currently converting an old Codepen that uses TweenMax 1.2 to the new GSAP 3.1 lib. I've gone through the docs and converted everything per the spec, but my animations are failing to actually fire, and with no warnings in the console, I'm currently lost. My suspicion is that it boils down to these two lines being improperly formatted, but I'm not sure what's wrong. I've added firing and killing functions to both pens for testing, spawnTrees() and killTrees().

Ln 80/81:
.add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25')
.add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25');

For reference, below is the Codepen that I'm converting. I'm eager to see what's going on here so I can continue adding onto this animation sequence 😃

See the Pen VwLKLpo by paulkmiller (@paulkmiller) on CodePen

See the Pen RwPGeEW?editors=0011 by paulkmiller (@paulkmiller) on CodePen

[ZachSaucier]

Hey pmillerk88 and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. 

 

The biggest issue is that you aren't calling any of the functions that you created  

 

The second biggest issue is that the way you pass parameters into a callback function (like onStart) has changed in GSAP 3. I recommend that you just have an animateTrees() function that does the staggering of your animation.

 

Some other notes:

• In a lot of places you do .to($("someText"), ...). You don't need to do that, GSAP uses .querySelectorAll() under the hood so you can just pass the "someText" part. 
• The quotes around individual, non-string or complex value aren't needed (like height:"53").
• Why use jQuery's .css() when you can use GSAP's .set()? You don't really need jQuery these days.
• If you're using JS to generate the trees, why use SCSS to edit the properties? It'd be more dynamic if you just used JS.
• Since you're using JS to generate the trees, why have set SVG for each tree? You could generate the branches using a function.
• It doesn't make much sense to have a bunch of different SVG elements - why not just put all the trees in one SVG?
• This sort of thing would probably be better done in Canvas which performs better with lots of elements. 

See the Pen eYNdQbO?editors=0010 by GreenSock (@GreenSock) on CodePen

[pmillerk88]

Zach,

 

This is an incredible amount of information. Thank you for taking the time to study this and point out general issues along with critical ones towards my goal. I really cannot understate how much I appreciate your response. Best wishes to you and the GSAP staff 😃

As for your points:
1. Got it!
2. Got it!
3. It's just what was already included. After I felt comfortable enough with what was here post conversion, I was going to then strip away the jQuery, as you suggested 😃
4. That was the original author's decision from a pen that's 3 years old. Part of 3 includes pulling all the randomization that happens in SCSS into JS 😃 
5. Agreed!
6. I assume it was for granular control of each branch?
7. Agreed!

[ZachSaucier]

Happy to help! 

@Carl Also has a handy video about distributing things randomly based on an ease curve which may interest you 

 

[mikel]

57 minutes ago, pmillerk88 said:

Why on earth would you make a hyperlink to codepen, that's meant to explain what the link is for, just spawn the codepen on the post?

 

Nobody knows ...

[pmillerk88]

@ZachSaucier One question for you:

Within these two lines, I cannot find in the docs what the last value is doing in relation to .to. I am specific talking about '-=0.25' and '-=1.25'

 

.add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25')
.add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25');

 

Could you shed some light on this? I know that it's controlling the speed and rate in which the branches are animating into the frame, but they represent a black box I cannot define atm. 

[ZachSaucier]

That parameter is called the position parameter and is available in tweens that are on a timeline (like tl.to(target, {vars...}, positionParameter)) and the .add() method. This page can probably explain it best:

You can also read about it in the timeline docs: https://greensock.com/docs/v3/GSAP/Timeline/to()