Trigger an animation in a scrubbed timeline

[cdedreuille]

Hi,

 

I'm wondering if that's possible to mix a normal animation with a scrubbed timeline.

This is my timeline animation right now. Everything is scrubbed with ScrollTrigger which is great but I would like to launch an animation that is not scrubbed in the middle of the timeline.

 

I tried to use onComplete on one of the element which work when you go down but it doesn't reverse or start again when you go up.

 

Any idea on how to achieve this?

 

const tl = gsap.timeline();
tl.fromTo(text1Ref.current, { y: 20 }, { y: 0, duration: 0.6 });
tl.to(text1Ref.current, { opacity: 0, duration: 0.1 }, '>1');
tl.to(text1Ref.current, { y: -260, duration: 0.6 }, '<');
tl.to(text2Ref.current, { opacity: 0, duration: 0.1 }, '>1');
tl.to(text3Ref.current, { opacity: 1, duration: 0.1 }, '<');
tl.to(patternRef.current, { y: 160, duration: 0.1 }, '<');
tl.to(text3Ref.current, { y: 0, duration: 1 });

ScrollTrigger.create({
  trigger: containerRef.current,
  animation: tl,
  toggleActions: 'play none none reverse',
  start: 'top 10%',
  scrub: true,
  pin: true,
  end: '+=4000px',
});

 

[GreenSock]

If I understand you correctly, you could just place a callback into your timeline wherever you want, like with timeline.add(() => console.log("tada")) or timeline.addCallback(...). 

 

Another option is to just create a separate ScrollTrigger at that spot instead of embedding it into your timeline. 

[OSUblake]

Also check out the new selector util. You can get rid of all those refs.

 

See the Pen BaWOZpM by GreenSock (@GreenSock) on CodePen

 

 

[cdedreuille]

Thanks for your reply. I can indeed add a callback which work when you scroll down but it doesn't reverse the animation when you go up. That's the part I'm not sure how to do.

I also tried to create a separate animation but I can't figure out how to use the trigger because I would like the animations to be launch at a specific moment in the timeline. Taking the code below which is 4000px long. It doesn't seems to work if I do something like start: '2000px center' because the element is pinned. So 2000px will be out of the animation.

 

const tl = gsap.timeline();
tl.fromTo(text1Ref.current, { y: 20 }, { y: 0, duration: 0.6 });
tl.to(text1Ref.current, { opacity: 0, duration: 0.1 }, '>1');
tl.to(text1Ref.current, { y: -260, duration: 0.6 }, '<');
tl.to(text2Ref.current, { opacity: 0, duration: 0.1 }, '>1');
tl.to(text3Ref.current, { opacity: 1, duration: 0.1 }, '<');
tl.to(patternRef.current, { y: 160, duration: 0.1 }, '<');
tl.to(text3Ref.current, { y: 0, duration: 1 });

ScrollTrigger.create({
  trigger: containerRef.current,
  animation: tl,
  toggleActions: 'play none none reverse',
  start: 'top 10%',
  scrub: true,
  pin: true,
  end: '+=4000px',
});

 

[akapowl]

 

Hey @cdedreuille

 

Here are two possibilities how you could achieve triggering that animation say 2000px into the scrub - both utilizing wraps as triggers.

 

See the Pen e176a4ba6454ec01bcc9bd27a38bc355 by akapowl (@akapowl) on CodePen

 

 

The one that is at play in that pen utilizes an extra added trigger-wrap around the content inside the section, whereas the one commented out utilizes a trigger-wrap around that section (that you'd technically wouldn't even have to add to your markup, since because the section is being pinned anyway, it will have a pin-spacer wrapping it that you could utilize).

 

[cdedreuille]

Thanks a lot. I'll give it a try.

Also the new selector util is pretty awesome. So much cleaner when working with React.