italoborges Posted November 30, 2021 Share Posted November 30, 2021 Hello hello! I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal. I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top. - If reaches the bottom, the scroll is positioned in the top - If reaches the top, the scroll will be positioned in the bottom of the page This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll. Looking into the examples I found this loop: See the Pen LYRwgPo by GreenSock (@GreenSock) on CodePen It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept. One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time. Any idea how I could apply the same loop concept to my need? See the Pen OJxJKPG by italoborges (@italoborges) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 30, 2021 Share Posted November 30, 2021 Are you just trying to loop the scroll? Maybe like this?: See the Pen XWeJXVz?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
italoborges Posted December 1, 2021 Author Share Posted December 1, 2021 That's exactly what I had in mind @GreenSock but didn't know how to achieve that. Is it possible to apply a smoothness to the scroll using this code? Because since the smooth mainly will be controlled by an external source. Link to comment Share on other sites More sharing options...
OSUblake Posted December 1, 2021 Share Posted December 1, 2021 3 hours ago, italoborges said: Is it possible to apply a smoothness to the scroll using this code? I tried it using the native ScrollTrigger demo here... https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() It works, but it's kind of jarring when it loops because the smoothing has to stop, otherwise it would just animate to the top or bottom. See the Pen WNZbaxp by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 1, 2021 Share Posted December 1, 2021 1 minute ago, OSUblake said: otherwise it would just animate to the top or bottom Without killing the scrub tween. See the Pen OJxPBjR by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
pietM Posted December 1, 2021 Share Posted December 1, 2021 Building from this idea, I wrote a horizontal loop with a ScrollTrigger pin. The loop on scroll down feels seamless but scroll up feels "stuck" because of the repeated section (1). Any thoughts? See the Pen PoJwvGZ by evryali (@evryali) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 2, 2021 Share Posted December 2, 2021 Hi @pietM I could only get your demo to go up in Safari, but it looked the same to me in both directions. Unless I'm missing something, I didn't see the repeated panel show up. Is anyone else having trouble getting his demo loop going up? That said, I had to make a slight adjustment to get it to work in other browsers. I'm not exactly sure what that is necessary as your code appears pretty much the same as the one posted by Jack. 🤷♂️ See the Pen PoJqoEQ by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 2, 2021 Share Posted December 2, 2021 You need a way to trigger it right BEFORE it hits the very very end (and beginning). It won't consistently trigger the onLeave if it's literally right up against the very end of the page. I'd give it 1px on top and bottom by just using a different ScrollTrigger that's solely for the looping: See the Pen YzrXPYO?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
pietM Posted December 2, 2021 Share Posted December 2, 2021 Brilliant! Thanks Jack and @OSUblake. Super helpful and appreciated, as always. Thanks again! 2 Link to comment Share on other sites More sharing options...
italoborges Posted December 6, 2021 Author Share Posted December 6, 2021 Hello! Thank you all for the help on this! I'm almost there with my code. @OSUblake and @GreenSock, I might have found a bug using the scroll trigger loop. I was applying the solution, which is working perfectly btw, but after "reseting" the scroll to the end of the viewport, all triggers that have "onEnter" event, get dispatched. Please, check it out this CodePen. If you scroll up first, you see the onEnter (console) being dispatch even though we didn't enter into the trigger. See the Pen JjroOJK?editors=1111 by italoborges (@italoborges) on CodePen Once again, thank you! 🙂 Link to comment Share on other sites More sharing options...
OSUblake Posted December 6, 2021 Share Posted December 6, 2021 You will probably have to introduce some logic to check for that condition... See the Pen QWqyxYK by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Feijoo-Montenegro Posted January 4, 2023 Share Posted January 4, 2023 On 12/1/2021 at 6:12 PM, OSUblake said: I tried it using the native ScrollTrigger demo here... https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() It works, but it's kind of jarring when it loops because the smoothing has to stop, otherwise it would just animate to the top or bottom. hi Osublake! Thank you very much for the code. I have a question about it that I don't know how to fix. In the version that killing the scrub tween, when doing the second round does not work, the first section stays fixed on the screen. I have tried to fix it but I am unable to. Do you know what can be the problem? Thank you very much in advance, Tara. Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 4, 2023 Share Posted January 4, 2023 This is a very old thread - can you please provide a minimal demo and explain exactly what isn't working the way you'd expect? Usually it's best to just start a new thread rather than hijacking an old one. 36 minutes ago, Feijoo-Montenegro said: In the version that killing the scrub tween, when doing the second round does not work, the first section stays fixed on the screen. I have tried to fix it but I am unable to. Do you know what can be the problem? I glanced at some of the previous demos and I don't see any that are killing scrub. Maybe I'm missing something obvious. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now