Jump to content
Search Community

Move cards in a zig zag motion on scroll

Volt 22 test
Moderator Tag

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...