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?
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.)
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.
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.
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.
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
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.