▼
Streaming live at 10am (PST)

Help with animation (slider and cards)

Design help Animations & Interactions
#1

Hi,

So first post here! But not the last I expect. I’ve done a project or two in Webflow but I would consider myself pretty beginner in a lot of ways, especially the animations and interactions side. So I have a few questions about the current project I am working on.

  1. How can I get the slider to rotate through the slides every 5 seconds or so?

  2. When you scroll down a bit I have a few cards that fade in/out when you scroll and all the text changes but I would like to have the image change with the steps too?

Thats it for now, thanks in advance!

https://preview.webflow.com/preview/rolen-88ef64?utm_medium=preview_link&utm_source=designer&utm_content=rolen-88ef64&preview=aac05e7d461dcafb0d84116fc0b09fa3&mode=preview

#2

Hi @Ryan_Goldberg,
welcome to the forum.

  1. this is a built in webflow feature. Just add a slider and head over to the settings tab and activate auto play slides. Now just set the timer delay to 5000 (5sec.).
    image
    image258×850 28.3 KB
#3

Hi @MXI thanks for the warm welcome! And quick response!

I did see that on the Webflow slider page but I think the theme I purchased set it up differently because I do not see those option in the settings panel when I have the slider selected.

#4

Hi @Ryan_Goldberg,
i should have looked over the site before replying.
Unfortunately the theme only uses webflow interactions, so it will be difficult to set up an auto play. The reason is, that the slider works on scroll. So if you want to auto play the slider you would need to scroll for the user. (with that template)
I dont think you can combine scroll interactions and auto play.

Answer to the second question:
You will need to change the webflow interactions to show and hide the different images on different scroll positions OR in case you are going with a slider element, you will need to create an animation on slider change.

So it is (as you ask me) not a fast and simple fix.

This is not the solution to the problem but I hope I was able to help.
Maxi

#5

Hey @MXI Thank you! The does clarify some things about the scroll section in the middle of the page. I should have clarified though. The first question was aimed at the hero slider at the very top which only switches if you click from tab to tab. Would that combination with an auto play work as it does not interact with the scroll?

#6

So from what i saw, it is possible, BUT you will need to move the elements inside the tab element into a slider element.

image

In the slider, you need to set an interaction on slider change.

image
This action will replace the tab change trigger.

All in all this is possible, but will require a bit of work.

Maxi