Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Converting Old TweenMax to New GSAP

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

Happy to help! 

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


  • Like 1
Link to comment
Share on other sites

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 ...

  • Like 1
Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

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()

  • Like 2
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.