Need Help Fixing Broken Animation in Tabs

Design help Animations & Interactions
1

Hey everyone,
I’m working on a client’s site and ran into an issue on the homepage. In the Use Cases section, the animation is broken. I’m using the tabs auto-rotating animation, but when scrolling down to this section for the first time, the animation doesn’t play smoothly and looks glitchy.
I’ve tried multiple fixes but haven’t been able to resolve it. Has anyone else faced a similar issue or found a workaround? Any help would be greatly appreciated!
Here’s the live site: https://www.heyy.io/

Read-only link: Webflow - Heyy
Thanks in advance!

image
image1920×1226 107 KB

2

Hi there,

When animations appear jumpy or glitchy, this is typically caused by conflicting animation properties. To create smoother animations:

  1. Avoid using CSS transitions with interactions on the same element
  2. Use transform properties (like translate, scale, rotate) instead of layout properties (width, height, margin, padding)
  3. Stick to animating opacity for fade effects rather than display or visibility properties

Transform and opacity animations are more efficient because they don’t trigger browser reflow, which recalculates the position and size of all page elements. This makes your animations perform better, especially on mobile devices.

For example, instead of:

.element {
  width: 100px;
  transition: width 0.3s;
}

Use:

.element {
  transform: scale(1);
  transition: transform 0.3s;
}

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thanks for the tips! Really appreciate the detailed explanation.

In this case though, the size property is a must. We specifically need to animate the height for the progress effect. Using only transform or opacity won’t achieve the design requirement here.

Do you know if there’s a way to optimize height-based animations so they don’t cause as much reflow or appear glitchy on first load?

4

Had this happen on a tab-rotation build , the first load was stuttering because the looped interaction was triggering before the section scrolled into view. Try setting the initial state with opacity 0 + display none, then trigger the rotation only on section scroll-in. That usually smooths it out.

5

Hey @Agha_Hussain2 ,

Since you are already using code to get the auto-rotating tab effect, you could probably take inspiration from this cloneable to trigger the progress bar animation without using the default interaction. I tested the cloneable and it works fine on first load as well.

You can test it out by cloning your page to see if it works for your use-case. You could combine your use-case with the way progress bar is animated in the cloneable and it should work. Hope this gives you some idea.