Scrolltrigger scrubbing timeline with asynchronous animation

[Tim Spiral Edge]

Sorry if this is explained somewhere but I can't seem to find it in the docs. I'm using scrolltrigger with a timeline and scrub to show a number of animations happening in sequence as the user scrolls. Is there a way to have an animation within the timeline that plays without being tied to the scroll position - so it triggers at the right point in the timeline sequence but runs at it's own speed without the user scrolling.

 

And a bonus question. In the same scrolltrigger/timeline/scrub situation, is it possible to create a 'dead zone' in the middle of a timeline so the user can scroll for a short distance without anything happening. I have some items sliding in and sliding out quite quickly but would like a little space so they don't instantly slide in then straight out again.

 

Many thanks.

[Rodrigo]

Hi,

 

It can be done using a call method. For example:

const anotherTimeline = gsap.timeline({
  paused: true,
});

const mainTl = gsap.timeline({
  scrollTrigger: { /*...*/ },
});

// Then at some point in your timeline
mainTl.call(() => anotherTimeline.play());
  

That will play the anotherTimeline instance without taking into consideration the scrub progress of the mainTl.

 

3 hours ago, Tim Spiral Edge said:

is it possible to create a 'dead zone' in the middle of a timeline so the user can scroll for a short distance without anything happening.

Sure thing just use the position parameter in order to add the next instance in the timeline some time after the previous one:

const mainTl = gsap.timeline({
  scrollTrigger: { /*...*/ }
})
.to(element1, {  })
// This is added 1 second AFTER the previous animation is completed
.to(element2, {  }, "+=1");

Hopefully this helps, if you keep having issues, please create a minimal demo that clearly demonstrates the problem(s) you're having.

Happy Tweening!

[Tim Spiral Edge]

Thanks a lot for your help. I'm learning a little more each day!