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

[sashaikevich]

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?

[ZachSaucier]

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.

[PointC]

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.

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening.

 

[sashaikevich]

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