Taking a timeline animation out of the "flow" of the scrolling sequence with scrollTrigger

[mheavers 1 Likes (Newbie)]

Hi - I'm trying to insert a timeline animation, in conjunction with the scrollTrigger plugin,  into an already established set of animations, without having it affect the timing of those animations. In other words it should occur at a certain point in the scrolling sequence, but "span" as many of those sequence items as it needs to without postponing their execution. But right now that's exactly what it's doing. Here's a portion of my timeline:

 

tlRetouch
  .from(".fixed-section.retouch", { autoAlpha: 0, duration: 2 }, "retouchIn")
  .from(
    ".retouch-1",
    {
      scale: 1.2,
    },
    "retouchIn"
  )
  .fromTo('.retouch-content-container',{translateY: 100}, {translateY: -100, duration: 7}, 0) //this is what I want to insert
  .to('.brushes-content-container',{ translateY: -300, autoAlpha: 0, duration: 2},"retouchIn")
  .to(
    ".retouch-2",
    {
      width: `${appState.screenDims.width}px`,
    },
    "sliderIn"
  )
  .from(
    ".retouch-title-line.l1",
    { autoAlpha: 0, translateY: 20 },
    "sliderIn"
  )

And the line I am inserting is the  `.fromTo('.retouch-content-container',{translateY: 100}, {translateY: -100, duration: 7}, 0) ` animation - it should start at the start of this timeline, and go for the duration without affecting any of the following labels (e.g. `sliderIn`). What's the best way to make this happen? I thought that using the number (`0`) as an "absolute time" would make that happen, but it didn't work.

[GreenSock 18,878 Likes (Superhero)]

When you build a timeline using the convenience methods like this, the insertion point of each subsequent animation is at the "end" of the timeline by default which makes it very easy to build (typically people think in terms of do this...then this...then this...) and of course you can use the position parameter to do relative offsets and a lot of other things. 

 

The "problem" here (if I understand your goal correctly) is that you're inserting a 7-second long animation in the middle of your whole chain, but it sounds like you don't want the subsequent insertions to pay any attention to that. But you're not specifying the proper position parameter for those. You're just using a new "sliderIn" label but you never added that label at a specific time previously, so it just gets added to the end (which, of course, is AFER the 7-second tween). 

 

You've got a lot of options here. 

1. Simply re-order your code so that your 7-second fromTo() is inserted after all the other stuff is built out. And of course leave the position parameter as 0 so that it's inserted at the start of the timeline. That's probably the simplest in this scenario. 
2. -OR- Add your "sliderIn" label at the time that you want it to be, either by doing .addLabel("sliderIn") BEFORE you add the 7-second tween or just specify an absolute time like .addLabel("sliderIn", 2). 
3. -OR- specify absolute times for everything (or offsets or whatever).

Does that help?

 

I'd strongly recommend reading the article at

 

[mheavers 1 Likes (Newbie)]

Yes! Didn't think to add it at the end with a negative offset. I did read that article - which is where I learned about the absolute position param. Thanks for the tips!

[GreenSock 18,878 Likes (Superhero)]

Cool. And you don't need to use a negative offset (though that's perfectly acceptable). If you want it to start at the beginning of the timeline, just use an absolute position of 0 (as you were doing). Otherwise, you'd have to do the math of whatever the duration is and use that for the negative offset. 

 

Anyway, it sounds like you're on your way. 🙌