Hi,
When switching to a different tab. The animation seems kinda stuck at the beginning. I set up an animation where the image is sliding from left to right.
What you see is, after clicking a different tab, the image for 0.5 sec straight AND THEN it disappears and then the usual animation plays out.
It’s very not smooth.
Anyone knows what causes this and how to fix it?
Hi there,
To optimize tab switching animations in Webflow, here are some best practices:
For smooth tab transitions, keep your animations simple and focused on essential properties like opacity and transform. Set your animation duration between 200-400ms for optimal performance. If you’re experiencing lag, try reducing the number of simultaneous animations and avoid animating computationally expensive properties like box-shadow or filter effects.
You can also improve performance by using the “will-change” property in your custom code, and ensuring that animated elements are properly layered using z-index to prevent unnecessary repaints.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Anyone that can help me?
Hey @Mourik,
I was tweaking your interactions specifically by changing the order of them and it seems to work as you intend it to.
As shown in following screenshots, in both the ‘tab change in’ and ‘tab change out’ interaction, just switch the opacity action as the first followed by other actions and remove the delay in opacity and see if it works.
Hi AJ_Dev,
Thanks for trying! I tried your method, but it’s like nothing changed. The animation is still exactly the same like the GIF I put in my post.
But it worked for you then?
Hey @Mourik,
The ‘tab change in’ animation looks good, can you ensure that the ‘Duration’ is set to 0 for the Opacity in ‘tab change out’ animation and then test if it works?
Thanks that was the solution!
