Volt 22 Posted June 25, 2022 Share Posted June 25, 2022 Hello everyone, I want the cards in the second section of the webpage - https://voltmeup3.webflow.io/ to move from bottom to top in a zig zag motion on scroll. I'm sorry I didn't include any codepen url, that's because I'm not sure where to start. I already saw that I can do it with motionpath, and that I can create a path with motionpathhelper but I can't see the generated path to tweak in the browser after using motionpathhelper. Additionally, is there a way to tell scrollsmoother to always start from the top of the page on refresh? Link to comment Share on other sites More sharing options...
GreenSock Posted June 25, 2022 Share Posted June 25, 2022 2 hours ago, Volt 22 said: I want the cards in the second section of the webpage - https://voltmeup3.webflow.io/ to move from bottom to top in a zig zag motion on scroll. I'm having a difficult time visualizing what you mean. Like...if the user is scrolling up, you want all the cards to move up and down and up and down multiple times as you scroll? You probably don't need a motion path at all - you could probably just animate the "y" or "yPercent" (and maybe x/xPercent) depending on what effect you're going for). Maybe it'd help if you had some kind of example of the effect you wanted. 2 hours ago, Volt 22 said: Additionally, is there a way to tell scrollsmoother to always start from the top of the page on refresh? You could do: ScrollTrigger.clearScrollMemory() https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() Or window.history.scrollRestoration = "manual" Good luck and thanks for being a Club GreenSock member! 🙌 Link to comment Share on other sites More sharing options...
Volt 22 Posted June 25, 2022 Author Share Posted June 25, 2022 Thanks for the reply Jack. The motion I want is similar to what is on this pen but vertical. See the Pen oNNEdRV by GreenSock (@GreenSock) on CodePen On scroll up, I want the cards to all scroll towards the right in a staggered fashion, and then towards the left in the same fashion once they each hit the right end of the container. Link to comment Share on other sites More sharing options...
GreenSock Posted June 25, 2022 Share Posted June 25, 2022 But if they're scrolling, that means they're already all moving UP, right? So you just want to animate along the x-axis back and forth, right? It might be a good use case for a CustomWiggle ease and a simple stagger. Feel free to give it a shot and if you get stuck and need some help, post a CodePen back here with a minimal demo and we can take a peek. Link to comment Share on other sites More sharing options...
Volt 22 Posted June 25, 2022 Author Share Posted June 25, 2022 Thank you Jack. 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