Maurits Posted December 6, 2021 Share Posted December 6, 2021 Hi, first of al thanks to you people doing an amazing job. I roamed the forum and docs to find a solution that fits my issue, but to no avail. What works: Smooth scrolling through sections (vertically) - thanks to one of the topics What we need: We need one of the sections (#special) to stick and have its sub sections to animate on the same scrolling event. It should feel like you stay in the #special section and the sub sections are animated with for example a fade in from y+100. Always scrolling down should lead you through all sections and subsections and going up the whole thing in reverse I have tried many examples, timelines etc, but cant seem to get it to work. Snapping also seems to give a short delay in animating to the new positions. This codepen comes closest to the way we need it to scroll. Just can't find a way to make a section stick and animate it's sub sections I desperately need some advise for this has consumed days already and hope you guys can lead me in the right direction. Thanks See the Pen gOGPWoN by maurits-weebers (@maurits-weebers) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 6, 2021 Share Posted December 6, 2021 Hi there @Maurits, It looks like this demo may help! See the Pen qBNvrRQ by cameronknight (@cameronknight) on CodePen 1 Link to comment Share on other sites More sharing options...
Maurits Posted December 7, 2021 Author Share Posted December 7, 2021 Hi Cassie, Thanks for the codepen. It looks alright, but I miss the snapping to the sections. I might be able to build that in but decided to stick with my current code. It's working now but it has some issues . I'll upgrade the codepen and share it again. Would be great if someone could check it out and improve it where possible I'm also thinking about an array of all the sections in combination with a timeline. "Scrolling" through the array should then trigger all the tweens in the timeline. Link to comment Share on other sites More sharing options...
Cassie Posted December 7, 2021 Share Posted December 7, 2021 I took a look at your codepen and I'm not quite sure what the behaviour is supposed to be, There's a lot of jumping around for me. Regarding the demo I liked to - It would be super simple to add snapping in. Just like so ✨ let sections = gsap.utils.toArray('.section') ScrollTrigger.create({ start: 0, end: "max", snap: 1 / (sections.length - 1) }) And horizontally (or for a pinned section animation) See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Maurits Posted December 8, 2021 Author Share Posted December 8, 2021 Hi Cassie, Thanks again for replying. I've updated my code and now it works with my custom js. I'll tinker around with what you've send Is there a way to take away the short delay before the snap animation in your example? The way my example feels now is good, although it lacks some functionality (like if a page is higher than vh) What do you think of it? At least this is a good example of what we indent to build. See the Pen by pen (@pen) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 8, 2021 Share Posted December 8, 2021 49 minutes ago, Maurits said: Is there a way to take away the short delay before the snap animation in your example? Check out the snap object section in the ScrollTrigger docs. There is a delay setting you can change. https://greensock.com/docs/v3/Plugins/ScrollTrigger 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 8, 2021 Share Posted December 8, 2021 Just to be clear, there will always be a delay because ScrollTrigger can't apply its snapping until scrolling has stopped, otherwise it would interfere with the user's scroll behavior. 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