animate.css icon indicating copy to clipboard operation
animate.css copied to clipboard

Published 20 hours ago • verified publisher icon animate-css

Added missing to opacity 1 for entrance animations

Open joeworkman opened this issue 4 years ago • 3 comments

I am triggering animations via JS once the element scrolls into view. For most entrance animations, this means that I need to add opacity:0 to the element so that we do not see the elements until I trigger the animation.

Several of the entrance animations stopped animating opacity part way through the animation. Therefore, this would generate a flash during from where opacity:1 was set until the end of the animation. The fix was simply to make sure that the opacity is set to 1 all the way to the end of the animation inside of the to block.

joeworkman avatar Sep 20 '21 00:09 joeworkman

Do you have a codepen for this changes? @joeworkman

warengonzaga avatar Sep 20 '21 11:09 warengonzaga

Here is a codepen... https://codepen.io/joeworkman/pen/806494d7b7c38a16d1ba52ebd0eae89e

joeworkman avatar Sep 20 '21 16:09 joeworkman

This shouldn't be needed. animation-fill-mode should've dealt with it. I'll investigate this and get back here.

eltonmesquita avatar Oct 13 '21 16:10 eltonmesquita

This is a bit outdated now, sorry about this. I'll close it as I'll be working on a bunch of parts regarding this anyway

eltonmesquita avatar Mar 02 '24 11:03 eltonmesquita