cmurphy Posted July 4 Share Posted July 4 I have a landing page that i ideally want to stick when in view and just infinite scroll horizontally. They are cards, around 3/4 per view (flex box). I know gsap is possible with the pin etc, and I know how to get it to pin and scroll, but I am totally lost on how to make it infinitely scroll once pinned. Any suggestions/pointers/snippets would be appreciated - I'm clueless. Cheers Example: https://www.youssrirahman.com/ (wait a few seconds) Link to comment Share on other sites More sharing options...
Rodrigo Posted July 4 Share Posted July 4 Hi @cmurphy and welcome to the GreenSock forums! Actually there is no scrolling in the landing page so for that particular case the Observer Plugin could be better suited: https://greensock.com/docs/v3/Plugins/Observer Also you can use the Horizontal Seamless Loop helper function to achieve that: https://greensock.com/docs/v3/HelperFunctions#loop Here is an example that somehow resembles that page but even better IMHO: See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
cmurphy Posted July 5 Author Share Posted July 5 12 hours ago, Rodrigo said: Hi @cmurphy and welcome to the GreenSock forums! Actually there is no scrolling in the landing page so for that particular case the Observer Plugin could be better suited: https://greensock.com/docs/v3/Plugins/Observer Also you can use the Horizontal Seamless Loop helper function to achieve that: https://greensock.com/docs/v3/HelperFunctions#loop Here is an example that somehow resembles that page but even better IMHO: Hopefully this helps. Happy Tweening! When i tried to use the horizontalLoop helper I got too much recursion - using nextjs & react. Link to comment Share on other sites More sharing options...
Cassie Posted July 5 Share Posted July 5 Heya, do you have a minimal demo showing the issue? Thanks. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 5 Solution Share Posted July 5 Hi, I created a simple example using the Horizontal Loop without any issues: https://stackblitz.com/edit/stackblitz-starters-9etsod?file=pages%2Findex.js I tested the same with the latest version of Next (Stackblitz is having a few issues with Next 13.3 and above for now, so the version in the link is a bit old but still valid) on my local machine and the app router without any issues. Most likely the error you're getting comes from something else. Hopefully this helps. Happy Tweening! 1 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