Jump to content
Search Community

ScrollTrigger version 3.3.2 doesn't work in my example

_Greg _ test
Moderator Tag

Recommended Posts

Hi!

On my old demo i try 3.3.2 version of ScrollTrigger.

ScrollTrigger with id 'Change between slides" stop working, what changed on this version?

ScrollTrigger.create({
  trigger: '.pinwrapper',
  start: `center center`,
  end: "center center",
  markers: true,
  id: "Change between slides",
  animation: tl_inout,
  toggleActions: "restart complete reverse complete"
})

Thank you!

See the Pen PoZoKEm by -greg- (@-greg-) on CodePen

Link to comment
Share on other sites

Well there are two problems:

  1. You put the start and end at exactly the same spot and you have toggleActions that aren't very intuitive. Imagine scrolling forward past the start...technically it never actually has a chance to restart() because your toggleActions instruct it to "complete" at that same spot! In the initial release of ScrollTrigger, it always prioritized the "enter" part, so in your case it would restart() the animation instead of completing it but you could easily argue that's the wrong behavior because it should prioritize whichever toggleAction is most recent (in this case, it'd be "complete", the onLeave action). That's why you thought it broke in 3.3.1/3.3.2 (it was actually a fix) :)
  2. This did expose a scenario I hadn't really thought about which does deserve a tweak in my opinion - if you scroll really fast so that it goes past the start and end of the ScrollTrigger (onEnter and onLeave), it should prioritize the latter (as I described above) BUT if the onLeave is "none" or undefined, I think it makes the most intuitive sense to fire the onEnter action. Likewise, if you scroll backward very quickly, it should do the same for the onEnterBack/onLeaveBack actions. I've made that change in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js 

To fix your example, I'd recommend something like this: 

See the Pen f0c33d2769172df7890f0ddbd3e4e4ed?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I changed the toggleActions and let the "end" be the default. Not sure if that's the behavior you wanted. If not, just let me know what you're looking for and I'll suggest a solution. 

 

Sorry about any confusion there. 

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