Jump to content
GreenSock

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

Trigger an animation in a scrubbed timeline

Recommended Posts

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',
});

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

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

 

 

Link to comment
Share on other sites

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',
});

 

  • Like 1
Link to comment
Share on other sites

 

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

 

  • Like 4
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×