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