Add delay on tab change?

Hi guys!

Im trying to figure out how to add a little delay on tab changes. Basicly I want a delay (lets say 1 second) everytime someone clicks on any of the tab links. This is so that I can do “Out animations” before the new tab content is shown. Does anyone know how to do this?

Here is the design:
https://jyllandguiden-no-f7f57c7afac669130f5827.webflow.io

Here is the webflow preview link:
https://preview.webflow.com/preview/jyllandguiden-no-f7f57c7afac669130f5827?utm_medium=preview_link&utm_source=designer&utm_content=jyllandguiden-no-f7f57c7afac669130f5827&preview=000e18ec64dff82ddf2af2ba2e0e6810&mode=preview

I managed to create animations as intended by using “pages” instead of “tabs”, but tabs is much more fluid so that is why this is the solution I am aiming for. Here is a link to the “pages” version for reference: https://jyllandguiden-no-f7f57c7a-84888adb63004.webflow.io/ (This is the desired animation and effect I want, but with tabs.)

Thanks guys!

Sincerely,
Øyvind

@Oyvind_Hermans you should be able to accomplish this using interactions and the tab change trigger:

image

Have you tried that out yet?

-Sam

1 Like

Hi Sam!

Thanks for your post!

I am using the Tab Change trigger to active the animations you see now:
https://jyllandguiden-no-f7f57c7afac669130f5827.webflow.io

The “in” animations work as I want them to, when I click a tab text is animated in from the left and then the image from the right. Thing is I though, I want to do a reverse animation when a new tab is clicked, I want the image to move to the right and the text to the left out of the canvas before the new content on the selected tab is loaded and animated in. (Out animation)

In order to do this I need to be able to delay the tab change on click, I figured out how to do this with pages but not with tabs.

@Oyvind_Hermans take a look at this post: Linking to Specific Tab from another Link or Button - #9 by cyberdave

I’m not sure how familiar you are with development / coding, but you could create a custom set of links or buttons to trigger your tab transitions using a bit of jQuery, in the function described in that post you could use a setTimeout to delay the click (triggerHandler). I’m not 100% sure this will trigger the tab change interaction you are using with the built-in IX panel, but I want to say they will still work.

1 Like

Thanks so much Sam, Ill try this approach :wink:

Let me know if it works, if you get stuck show me where you are and I’ll try to help you troubleshoot.

1 Like

Thanks so much sam-g.

Ive settled for the tabs solution without and “out animation” for now to get on with the rest of the design. Ill try the solution you mentioned later on in the project, hopefully.

Again, thank you so much sam-g!

Sincerely, Øyvind

@Oyvind_Hermans take a look at this sample project: https://preview.webflow.com/preview/testing-a7766d?utm_medium=preview_link&utm_source=designer&utm_content=testing-a7766d&preview=d29d876a5c9b2d01f435ef5cf3044c71&mode=preview

Click the black “Tab 1” button:

This is a custom button using the setTimeout that also triggers an interaction for the contents of Tab 2 to move off the screen. It’s a simple example, but it works.

I think to make this useable you’d have to do some more work, something like grab the value of data-w-tab with the class of w—tab-active and then have three hidden click handlers that trigger the out animation of the currently active tab, or run all out animations each time, which might be a lot for the browser to handle. But I think it’s definitely something that could be done…or there is an easy Webflow method that neither of us has thought of yet :stuck_out_tongue:

image

1 Like

WAAAY late to the party for you two, but maybe this’ll help someone else!

To delay, using IX2, you need to delay the start of the animations in the tab active trigger. Then you want to match that same delay time on the Fade Out time in the Tabs Settings in the Element Settings Panel. I’d also set the easing to Ease In Expo since that will give you the most time to work with prior to the opacity actually fading.

1 Like