Jump to content


When to .to(), and when to .add(Tween)?

Recommended Posts

I'm familiar with this pattern

var tl = new TimelineMax();
tl.to( element, duration, ...)


But in ScrollMagic's examplse, the pattern is:

var tl = new TimelineMax();

tl.add(TweenMax.to(element, duration ...)


(for example here: https://scrollmagic.io/examples/advanced/svg_drawing.html)


In which use-case is one approach more suitable than the other?

Link to comment
Share on other sites

Hey sashaikevich, good question.


As you can read about here, those two formats are equivalent (practically, though technically the first takes an extra function call, but that's not an issue for 99.999% of projects). The first is shorthand for the second. 


P.S. ScrollMagic is not a GSAP product and is unaffiliated with GSAP, so some of their docs about GSAP may not be accurate nor the recommended way to do things using GSAP.

  • Like 5
Link to comment
Share on other sites

Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master.


Check out this great article for all the details.



Happy tweening.



  • Like 5
Link to comment
Share on other sites

@ZachSaucier@PointC thanks for the reserources.
I've been using add() in the same way  for labels (I have yet to do any really complex timelines), but when I saw scrollmagic doing something different, I thought perhaps there's a a resons relating to optimization or clarity of code, or who knows. 

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