Automatic switching images

Design help Animations & Interactions
1

Hey,

I have two images (Seen in the “Latest Technology Section”) let’s call them A and B, with different images of our product. I am trying to set up an animation so that:

Image A starts shown, and Image B is hidden, and after a few seconds A slides to the right, while Image B slides in from the left, taking its place.

Then, after a few seconds, Image A slides from the left into Image B’s place, while image B slides out to the left and vanishes.

Then this process would go on indefinitely.

Is there any way to do this, especially one that doesn’t require any interaction from the user, and just runs automatically?

Sorry, I’m new to interactions.

Thanks,

Hugo

Here is my public share link: https://preview.webflow.com/preview/innovate-wealth?utm_medium=preview_link&utm_source=designer&utm_content=innovate-wealth&preview=517a2ae0989d11bb807a8fd291010aae&mode=preview
(how to access public share link)

2

Why don’t you just use a slider element? You can hide the navigation dots/arrows, change the animation type, and set it to autoplay/loop to achieve the effect your looking for. If you want to take it another step further, you can add interactions that trigger whenever a slide transition happens.

1 Like
3

The simplest solution is always the best :man_facepalming:. Thanks, that worked!