devRawnie

Yes, using the latest version (3.11.4) of GSAP 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

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

https://codepen.io/rohit-uf/pen/ExprYbd I created a solution similar to our code, based on ExpoScaleEase example. In this, scrollTrigger.enable(true) and scrollTrigger.enable(false) are behaving the same Any ideas as to why this is happening and how I can get the expected behavior of putting reset = false

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 https://codepen.io/GreenSock/pen/qBBBxaL

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?

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!!