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

[mojomikefsu]

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)

[MarkHunte]

Have a look at

Slideshow in circle

I Like @DBear’s solution, working on that principle your could save on the duplicating the image by just moving the first image to the end. slideShowLoop.hype 2.zip (15.3 KB)

[mojomikefsu]

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.

[MarkHunte]

The way I deal with that here

Go to random key frame on key press

Javascript . Just one idea of probably many… Small images [Screenshot 2020-03-14 at 10.09.41] Give each Small image the same class name personSmall Give each Small image the same data attribute name data-person and and each value the persons name. large images [Screenshot 2020-03-14 at 10.15.13] Give each large image the same class name personLarge l Give each large image the same data attribute name data-person and and each value the persons name. Group all the Large i…

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

[petester (Peter Borokhov)]

Good Idea