Flicker in animation

Design help Animations & Interactions
1

Hello! I have an annoying issue with an animation I’ve made for three collapsable columns on a site.

I’d originally set up animations using set sizing for each interaction (eg. from 35rem height > 56rem height) – this works smoothly but causes a responsiveness issue when scaling the screen (text gets cut off at the bottom).

I’ve now tried starting the interaction at a set height and using a percentage-based height or ‘Auto’ setting for the ending height. Ie. 35rem > 100% or ‘Auto’ height). This works great for responsiveness as it no longer cuts off the text when scaling but for some reason, the overlay gradient I have as a second part of the animation now flickers whenever closing the box.

See this Loom video to see what I mean.

If you access the read-only link, on the Base-breakpoint, ‘Tier 1’ is using the ‘Auto’-set up and the other tiers the ‘fixed-height’ setup.

PS. I have a separate component for each smaller breakpoint. It’s been a process :sweat_smile:

Here is my public share link: Webflow - Copy of CX Excellence

2

Whoops, here’s the Loom video

3

Hello,
I checked your website and I think this might help you:
Please don’t use a special height for them because, by changing the size of the site
content heights also grow.
like the image below to grow their height from the initial height
Go to “auto” height:

image
image177×618 14 KB

4

Thanks for the reply! If I’m understanding your reply correctly, that’s what I did in Tier 1 on the Base-breakpoint. I agree, it works better, but my issue is that the gradient flickers when collapsing the column again when I have it like that (it doesn’t when I use a fixed height for the initial state and end state).

5

Is everything fine now?

.

To fix the flickering issue in your animation, check the z-index of the overlay gradient to ensure it’s layered correctly. Also, adjust the animation timing and consider using opacity animations instead of height changes. Ensure the parent container has overflow set to hidden to manage visual artifacts. Testing in different browsers can also help identify the problem. As a Political Science major, I had an essay on international relations that I was struggling with. I found canadianwritings.com and they exceeded my expectations. The writer was professional, and the paper was well-structured and thoroughly researched. It was delivered on time, and I got a great grade. I would highly recommend their services to any student needing help.