Jump to content
GreenSock

nami

trigger scroll for different columns like a jackpot machine

Recommended Posts

Hey y'all,

 

I have a tricky question: I have a set of columns with images that are scrollable. the parent element is set to a height of 100vh and an overflow of hidden as you can see in the code pen provided.

 

What i want:

when I scroll on the page, i want each div to scroll and every nth column to reverse scroll. Would be nice if i didn't need to set the overflow to auto of the columns so i won't see the sidebars of each column, but that's a bit of an extra.

The effect I am trying to get is similar to what you see in a jackpot machine, but instead of pressing a button, you use a scroll event.

 

Thanks in advance for the help/tips

 

See the Pen BadeLyd by imane-ben (@imane-ben) on CodePen

Link to comment
Share on other sites

Hi nami,

 

I would start off by getting the animation looking how you want it first, and then adding in scrolling functionality later. To make a vertical loop, this thread should point you in the right direction.

 

 

  • Like 2
Link to comment
Share on other sites

Hey there nami.

 

This thread here might help, too - it contains a helper function by @GreenSock for the verticalLoop

 

 

  • Like 1
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.
×