Infinite transform with Modifiers Plugin

[jingqi_fan]

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

[ZachSaucier]

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

[jingqi_fan]

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

 

thanks again!!