Jump to content
Search Community

Is it possible to play a scroll trigger animation faster on reverse?

miraclemaker test
Moderator Tag

Recommended Posts

Hey @miraclemaker

 

How exactly you could do that for your very special own needs, probably depends on how things are set up for you.

 

What you could do, is use the callBacks to adjust a timeline's timeScale for example

 

const tl = gsap.timeline({
  
  scrollTrigger: {
    
    trigger: title,
    
    start: "top center",
    end: '+=150px',

    toggleActions: "play none none reverse",
    
    onEnter: () => {
      tl.timeScale(1.0);
      console.log('enter')
    },
    
    onEnterBack: () => {
      tl.timeScale(5.0);
      console.log('enter back')
    },
    
  }
  
});

 

See the Pen 96cf55c654f69d8c65ca7f301562dea7 by akapowl (@akapowl) on CodePen

 

 

But again, it will probably depend on how things are set up for you.

If you need further assistance, it would probably be best, if you could try and provide a minimal reduced demo of what you want to achieve.

 

 

 

Cheers,

Paul

 

  • Like 3
Link to comment
Share on other sites

 

My guess is, that adjusting the timeScale like this in the callback overwrites the toggleActions property.

So it plays the timeline at 5 times the speed in this case, but it actually plays it and doesn't reverse it.

 

So for my example, adding a command of what to do after the timeScale would be neccessary.

 

onEnter: () => {
  tl.timeScale(1.0).play();
  console.log('enter')
},
onLeaveBack: () => {
  tl.timeScale(5.0).reverse();
  console.log('Leave back')
}

 

 

See the Pen 4f0d224b09e800f426628e3be863ab42 by akapowl (@akapowl) on CodePen

 

 

 

 

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