Css animation on sections not working properly

Ask the community
, , ,
1

How can I animate a section color smoothly using css?

I am using wix studio

I have been trying to animate a section background to change color from a trigger ( Clicking on a video), fortunately I am successful on animating it… However, The animation has no steps and animates only with the provided keyframes so its blocky instead of smooth.
I have already tried setting the animation to ease and Linear and specifying steps() and nothing changes…

How can I fix this?

Here is the code that I have used:

(Trigger works and animation triggers)

css:

.section5{
    animation: aw 1.2s steps(10);
    animation-fill-mode: forwards;
    transition: ease-in-out;
}
@keyframes aw{
    0% {
        --bg-overlay-color: rgb(154 162 173);
    }
    50%{
        --bg-overlay-color: rgba(154, 162, 173, 0.2);
    }
    100%{
        --bg-overlay-color: rgba(0, 0, 0, 0);
    }
}

js:

	$w('#videoBox1').onPlay((event) => {
		//$w("#box4").style.backgroundColor = "white";
		//$w("#box4").style.
		let currentTime = $w("#videoBox1").currentTime;
		//console.log(currentTime);
		if (currentTime <= 0){
			$w("#section5").customClassList.toggle("section5")
		}
	});
2

Hi, The_SMO_SSB !!

I tried it myself, but the animation still appears jerky like a flipbook. After some testing, I believe the issue may not lie with CSS or JavaScript, but rather with the ability to apply animation to the section element. When I tried applying the same thing to a box element, I was able to achieve a smooth color transition animation. If I’m wrong, I apologize. However, if it works with a box element, you could stretch the box to the size of the section, and that might help you achieve what you’re aiming for. :wink:

3

How about try using Wix animations?
Split the section into two cell and change color while scrolling for each cell.

4

Thanks for having a look at this! I have tried using a box and it did work, however, I want the box to stretch to the whole screen but…

image
image1024×981 38.1 KB

Is there any way to get rid of this gap?

(This is why I tried animating the section)

5

It worked well using the box element … OK !! :wink: I’m glad you were able to achieve the same result. :blush: There’s probably some kind of limitation with the section. As for the “gap” in question, could it be the “margin” or “padding” set on the box or section by Wix Studio? :thinking:

6

I see the gap is on both sides of the screen :eyes:

I suspect it’s related to the max-width option - Studio Editor: Setting the Site's Max Width | Help Center | Wix.com