Jump to content
Search Community

How to end the animation before scrollTrigger ends

Malik Turk test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello, I'm working on an animation for my project, I have an animation that move the text from right to left of the screen, I need to end it before the end of the scrollTrigger.

 

        let tl = gsap.timeline();

		const tween = gsap.fromTo(marqueeText, {
          translateX: 0,
        }, {
          translateX: 100
        });

		tl.add(tween);

		ScrollTrigger.create({
          animation: tl,
          trigger: document.querySelector('.marquee-image')
          start: 'top',
          end: 'bottom',
          pin: true,
          scrub: true,
          pinType: 'transform',
        });

 

I need to end the tween before the scroll ends, please advise.

Link to comment
Share on other sites

  • Solution

Welcome to forums @Malik Turk

 

You can make your timeline a little longer with some empty space in it like this.

 

let tl = gsap.timeline();

tl.fromTo(marqueeText, { x: 0 }, { x: 100 })
  .set({}, {}, "+=0.5"); // dummy tween to extend the timeline another 0.5 seconds

ScrollTrigger.create({
  animation: tl,
  trigger: document.querySelector('.marquee-image')
  start: 'top',
  end: 'bottom',
  pin: true,
  scrub: true,
  pinType: 'transform',
});

 

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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.
×
×
  • Create New...