Jump to content
GreenSock

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

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?

Share this post


Link to post
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

Share this post


Link to post
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.

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

 

Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×