Endless Slider Instead of Looping Back/ Issues with Animating to the absolute center

I have 4 elements I want to auto scroll down the side of my ad. As they scroll up the page I’d like to show the 1st one again under the 4th element making an endless scroll of the same 4 elements. I’ve figured out how to loop it, so if it gets to the end it bounces back and goes in the other direction, but I’d like an endless scroll option. Any suggestions?

ALSO, BONUS POINTS…I have a mouse over effect that makes the first element/card zoom in so it can be seen better. I thought I made it zoom to center, but I’ve noticed depending on where it is when you mouse over, it isn’t always center/viewable when it zooms in. I want to create an effect that makes each card zoom to the ABSOLUTE center of the ad. Suggestions?

Scrolling Ad Test v1.zip (396.8 KB)

Have a look at

2 Likes

Thanks! Using this method I was able to get the endless loop to work and each card will pause on mouseover, but I’m still having trouble getting a centering zoom in effect to work.

My goal is the have the card move/zoom to the center to make it easier to read and see on MouseOver, but since the cards are moving, the center is always shifting.

The way I deal with that here

may help you figure something out.

I hard code where the zoom centers.

You will note that I get the current image properties before I zoom it and put them in a global
hypeDocument.customData.imagePo

I then use that when I want to get it back to its origin.

p.s
it always can help if you post a current example of a project when you have made a few changes…

1 Like