How to slow down animation on slider?

Design help Animations & Interactions
1

I have an image that slides in on my slider but the animation itself is super fast, I put wait 500m before it but that just makes the time longer before it appears and still slides across the page super fast. How can I slow this down?

2

Hi @Quantumgo,

Not quiet sure what settings you have been changing for set “wait 500ms” but maybe you just need to set right duration time

Hope it helps.

Cheers,
Anna

1 Like
3

@Sabanna I don’t mean the slide itself I mean the object I am animating inside the slider.

4

Oww, ok. Then we will need the read-only link to your project for be able to check and find solution. :slight_smile:

5

@sabanna https://preview.webflow.com/preview/carbones-rosemount?preview=4c0465b6edafaa83621fff41d85068fb

I’m still playing with the slider but the animation is so so fast!

6

Well :slight_smile:
Actually all problem can be fixed by increase interaction time (for interaction, applied to every slider)

241Ă—552 10.4 KB

Click on the time under animation and change it on bigger time.

Also, I would suggest some changes for make your work/structure faster and easier

  1. Since all round badges has the same size, same position and same type of animation you can give all that images same class name (e.g. “round-badge”)

  2. If all that images will have same class name you will need ONLY ONE interaction. It will be the same one applied to every slide. So you will not have to change same type of animation 5 or 6 times. (Same story with Initial state for badge. There is enough to have ONE, applied to every badge.)

  3. Second step of slider interaction I would recommend separating on 2 more:

  • Display: block
  • Move to origin, and Opacity: 100%

So as a result you will have 3 steps on “Slide-in” part

237Ă—533 20.3 KB

Regards,
Anna

7

@sabanna I did have them all the same name before with the same interaction but there was a lag for whatever reason and they were showing on the other slides. I’ll try it again with what you’re saying though! :grin:

8

I think last time you just forgot to check “LIMIT TO NESTED ELEMENTS” option. :wink:

1 Like
9

@sabanna is there a way I can also animate my descrdiv? the part with the description? I want this one to come in after the badge.

10

Sure. Add one more animation with slide trigger inside the same interaction. Just don’t forget to increase waiting step time.

11

@sabanna I think I’m doing something wrong because it’s not working for me :frowning:

12

Hmmm… weird. I was sure it will work, but apparently, it is working only if waiting time set the same as with the badge :confused:

13

@Sabanna, aw man I can’t make one appear then wait and another appear? :cry:

14

Try to make duration for “div” really slow :confused:

15

@waldo, Do you know how I can make the second item on my slider animate in after the round badge?

16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.