Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jingqi_fan

Infinite transform with Modifiers Plugin

Recommended Posts

Hello,

 

I've tweaked the modifiers plugin demo to create an infinite autoscroll effect. My only problem is that I'm not sure how to transform each of the boxes in the codepen demo to go upward instead of downward. Right now each box is moving a positive y amount. I understand that I would need to change the y value of the boxes to negative for them to move up but every time I try to change it, the effect is no longer infinite, it gets cut off at every loop.

 

I am guessing that I might not have a complete understanding of how the modulo operators work with negative numbers.

 

Any help is appreciated. Thank you so much!!

 

Codepen URL: 

 

See the Pen pXPOjO by jingqifan (@jingqifan) on CodePen

Link to comment
Share on other sites

Hello jingqi_fan and welcome. If I'm understanding you correctly, here's one way to do it. 

 

The only two things you need to do is change the += in the .to() call to a -= and change the initial positioning to fit. You can change the initial positioning to fit by adding the wrapperHeight to the y in the first set:

 

y: function(i) {
  return i * itemHeight + wrapperHeight;
}

 

See the Pen zVROYa by ZachSaucier (@ZachSaucier) on CodePen

  • Like 3
Link to comment
Share on other sites

@ZachSaucier wow thank you so much, I missed the itemHeight and wrapperHeight part!

 

thanks again!!

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