Delay Slider Animation

hey guys.
i am trying to delay my slider animation so that i can fire an interaction first before the new slide gets shown. is there anyone with a good foundation in javascript who can help me out?

thank you so much!
love,
jaro

1 Like

Perhaps you could provide more specific details on what you are trying to achieve?

sure. but as i said, its pretty simple. i want to timeout (e.g. 1000ms) the default slider animation to be able to fire a slide out of view interaction before the slider animates to the next slide.

the slide out of view and slide into view interactions should be triggered directly as usual if the timer of the slider reaches its end or if the user interacts with the slider by clicking on an arrow or in the slider nav panel. only the default animation (e.g. slide to next slide) should be timed out.

right now you cannot really see my slide out of view interaction because the default animation comes too fast.

Then you need this

thats a nice workaround. but actually i was looking for a way to do this with the default webflow slider. is anyone aware of a solution for this?

Any chance someone has a solution to delay the built-in webflow slider?

Since Jan 17, I guess someone must have found a solution to that :slight_smile: help appreciated!

Without any answer, I went on finding an Ok work around.

On clic on each arrows, I play the same interaction. Starts with the disappearing animation very quick under 300ms so that it happen when slides in view moves away, and then in the same animation with a bit of delay, the animation of the entering slide.

1 Like

https://www.monpixel.com have a look at this. Would be cool if webflow could add a slider that shifts vertically.

Hello @Dids

Maybe this can help:

1 Like

I love the webflow community. Ok so on to my next obsticle. How do I delay the transition? In the back of my mind I feel like Nelson already went over this :face_with_monocle:

Here you go:

1 Like

No way…cant be that simple…brb

Yah I meant when the user clicks next slide. That only applies to auto slide and the duration applies to the entire motion of transition. I think some custom code is required. For example I have some custom code that delays the transition to the next page allowing me to add a “page transition”

Yes you can try that route as well

1 Like

Hey @samliew and @buntestrahlen did you ever find out a solution to this?

On the Webflow slider, when I click the right hand arrow, I want to delay the slide transition by 1 second. This is so I have time to show my animations on slide out.

If you did find a solution, please let me know I´d be very grateful!

Best regards,

Terry

+1 if anyone figured out how to delay it on click, I have some outro animations I want to finish before the slide moves on.

Anyone managed to figure this out? Really want to keep the slider all native Webflow, and just need a way to delay the slide animation so my “slider out” animation has time to display.

I thought maybe a hacky way to do it would be to hide the real slider arrows so they aren’t visible, then create some new slider arrows that are just regular divs. Then link the slider out animation to the “on click” action on the new next slide button. Then have some script in place such that when the new arrow is clicked, it also performs a click on the original webflow arrow after a delay. But surely there must be a neater way?

Hi,

I solved this by added the below custom code to the “Before < /body > tag” section in the page settings

< style >
.w-slide{
transition: transform 500ms ease 3s !important;
}
</ style >

3s is the delay time after I click to go to the next slide.

I added spaces around the word “style” so you could see the code, so remember to remove that when you copy and paste

Hope this helps :smiley: :smiley:

Hello Friend,

had the same issue could not find anything for help.
I got a nice workarround with jQuery and Custom code:

You hide the webflow slider arrows. Create your own and forward the click trigger event of your custom arrow to the tap event of webflow slider.

    $('.custom-slider-arrow-right').on('click', function(e){
      setTimeout(function(){
      	$('.w-slider-arrow-right').trigger('tap');
      }, 2000);
    });