Jump to content
Search Community

There is no effect of the 'reset' parameter in the enable() function of scrollTrigger

devRawnie test
Moderator Tag

Recommended Posts

Hi

 

First of all, thanks to the developers of this plugin. It is simply awesome.

 

I have this setup using GSAP Timelines and ScrollTrigger where I have attached an animation with a scrollTrigger. I would like to give the user's two options to play the animation. 

1. Via Scroll : I have added scrub to true to link the animation with the scrollbar position

2. Autoplay: I have given a button on the top to autoplay the animation.

 

On clicking the autoplay button, I am disabling the scrollTrigger and playing the animation. When the timeline is complete, I am enabling the scrolltrigger again and pausing the timeline. Functionality wise on autoplay, I would like to stop the animation at the end and enable user to scroll the animation backwards. For this, in thescrollTrigger.enable() function call, I am passing the value of reset parameter as false based on the documentation. But as you can see in the codepen example, the animation resets back to the first frame.

 

I read in this forum to use scroll() method. I tried that also, but that is causing a flicker on web devices and on mobile devices, it goes back to the first frame and scrolls to the last frame very fast. Please uncomment Line No 31 in the codepen to see that effect.

 

Could you guys please help to achieve this effect!!

See the Pen PoBybWj by rohit-uf (@rohit-uf) on CodePen

Link to comment
Share on other sites

Hi @devRawnie welcome to the forum!

 

I'm not completely sure on what it is you want to do, but if I understand it correctly you want to either have the animation play on scroll or do the exact same but on button click. Destroying ScrollTriggers and enabling them, can get really complicated, so why not keep it simple and just scroll for the visitor on button click, this way the animation is always the same and no need to destroy ScrollTriggers and enable them again. 

 

I've used the ScrollToPlugin  to scroll to the end of the ScrollTrigger.end position, based on the timeline.duration(). Should do the trick right? Hope it helps and happy tweening! 

 

See the Pen zYLyqMX?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

47 minutes ago, mvaneijgen said:

Hi @devRawnie welcome to the forum!

 

I'm not completely sure on what it is you want to do, but if I understand it correctly you want to either have the animation play on scroll or do the exact same but on button click. Destroying ScrollTriggers and enabling them, can get really complicated, so why not keep it simple and just scroll for the visitor on button click, this way the animation is always the same and no need to destroy ScrollTriggers and enable them again. 

 

I've used the ScrollToPlugin  to scroll to the end of the ScrollTrigger.end position, based on the timeline.duration(). Should do the trick right? Hope it helps and happy tweening! 

 

 

 

 

 

Hi

 

Thanks for this solution. This was one of the approach we had tried already. My apologies, I forgot to mention. This is working fine on Windows and Android/IOS Devices. But it is not working on MacOS. Specifically MacOS Monterey 12.3 version. On clicking the button, it moves the animation one frame and then it is stuck for some time and in the last second of animation, it scrolls to the end of the animation really fast.

 

To rule out ScrollToPlugin  we built the same approach, but instead of the plugin, we tweened an object {x: 0} to {x: scroll.end} and in onUpdate function, doing window.scrollTo({top: x}). But it is not working on the same version of MacOS. 

 

Hence we tried this approach. Any ideas about how to fix either the scrolling issue on Mac or how to fix the original approach?

 

Link to comment
Share on other sites

1 minute ago, mvaneijgen said:

Oh, that is weird, I've just updated from macOS 12 to 13 and in that version everything works perfect. Do you have some more information on what happens when in what browser/version?

In MacOS Monterey 12.3 , Chrome Version 108.0.5359.124 (Official Build) (arm64) . This does not work. It is also not working on android devices. To be more specific, we are using the following example found in the documentation of ExpoScaleEase. But in the timeline, I have added the same scrollTrigger as the code in the above codepen. The functionality of autoplay button is same. These problems are originating from there

 

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

Link to comment
Share on other sites

If I'm understanding you correctly, I think a fundamental misunderstanding might be that you're unlinking the scroll position from the animation, making the animation go to a completely different spot and then enabling ScrollTrigger which re-links it to the scroll position but [maybe] you're expecting it to act as if it's not linked? 

 

Like @mvaneijgen said, it sure seems like the most intuitive way to handle this is to make the "auto-play" simply scroll instead of trying to unlink/relink things such that the animation plays in a way that's disconnected from the scroll position. What would you expect to happen if the user tries to start scrolling when the animation is halfway done? It just seems fundamentally problematic to be handling it this way.

 

Or did I misunderstand something? 

  • Like 1
Link to comment
Share on other sites

You understood correctly.

 

Indeed, the solution given by @mvaneijgen seems to be the intuitive way to handle our requirements. But as I mentioned, that solution is not working on android devices and some MAC Devices. That is why we had to find an alternate, more complex solution to enable and disable scroll triggers. 

 

In our implementation, the div containing the image files takes the full height of viewport and the viewport is also pinned to the screen. That is how we have handled the issue where user could scroll while the animation is playing. 

 

But I also figured out the basic flaw in my approach. The scrolltrigger's state is at the top when I am disabling it and when I disable it and play the animation, the state is not updating. So basically when I enable it back the scrolltrigger will take the user back to its original state. Thanks for pointing that out.

 

Now if i need to go forward with this approach, when the playing animation is complete I can use scrolltrigger.scrollTo(scrollTrigger.end) . But this also has some caveats. On windows devices I can not see the scrolltrigger being updated from start to end of the animation. But on android and MAC screens I can see the transition (A very fast scroll from the start to the end of the animation). Is there any fix to this??

 

And going back to our previous approach also suggested by @mvaneijgen , how can I debug the problem where ScrollTo Plugin is not working on Android and MAC Devices?

 

Thanks

Link to comment
Share on other sites

10 hours ago, devRawnie said:

that solution is not working on android devices and some MAC Devices.

Can you please isolate JUST the scrollTo in a demo that clearly shows it not working? No need to do anything with ScrollTrigger. The simpler the better. I'm very suspicious about the claim that a scrollTo doesn't work on some devices, and I wonder if there's something else interfering but it's very difficult to know without seeing it in context. For example, I wonder if you've got a CSS property that's interfering, like scroll-behavior: smooth or some other transition that's preventing the JS from rendering properly. I don't think I've ever heard of a scrollTo that only breaks on certain Macs and some Android devices. The code that drives a scrollTo isn't really that complicated or browser-specific. But of course I'm well aware of the fact that browsers have bugs :) Usually the bugs are more about edge cases and not something as straightforward as setting the scroll position.  I'm not claiming that you're wrong or anything - I'm just saying it'd be super helpful to see a very clear minimal demo that's only focused on that one part (scroll). 

 

10 hours ago, devRawnie said:

On windows devices I can not see the scrolltrigger being updated from start to end of the animation. But on android and MAC screens I can see the transition (A very fast scroll from the start to the end of the animation). Is there any fix to this??

Again, this sounds very fishy to me. You're saying that if you set the scroll position via JS, Windows refuses to actually render that change at all? And Macs render it, but gradually (like a transition)? Again, I'm sorta suspecting that there's something else at play here like scroll-behavior: smooth or some other weird CSS thing. 🤷‍♂️

 

You're using the latest version of GSAP too, right? Just making sure. 

Link to comment
Share on other sites

On 2/4/2023 at 11:50 PM, GreenSock said:

You're using the latest version of GSAP too, right? Just making sure. 

Yes, using the latest version (3.11.4) of GSAP

 

On 2/4/2023 at 11:50 PM, GreenSock said:

Can you please isolate JUST the scrollTo in a demo that clearly shows it not working?

Sure, I'll try to do isolate the scrollTo part. Actually I am primarily a backend developer and needed some animations in one of my project. Hence, getting used to CSS and JS stuff. Thanks for bearing with me :P

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