Animation opacity delay not working (likely my fault)

This topic contains 1 reply, has 2 voices, and was last updated by  Sebastian 2 weeks, 1 day ago.

Author Posts

majorpayne

I have two SVG elements that are supposed to appear only when inView. What I’m seeing in Chrome and Firefox is these animation elements already on page, disappear, then reappear running the animation.

Doesn’t really matter what the illustrations are, but might help ‘paint’ the picture of what I’m dealing with. The animation element left; packing boxes. The animation element right; person sitting at a desk.

Animation should show nothing on page load, 2s later show the boxes BounceInLeft, person at desk BounceInRight. As mentioned above, on page load both elements are already visible for 1s (my estimate), disappear, then reappear from the left and right respectively as part of the animation. Needless to say, just looks goofy.

What step am I missing that should keep the opacity of both elements at 0 until inView?

#img-home-hero-boxes {
	opacity: 0;
	transition: opacity 1s, transform 1s;
}
#img-home-hero-boxes.mt-inview {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	animation-name: bounceInLeft;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	opacity: 1;
}
#img-home-hero-boxes.mt-inview_once {
	/* MT [ sub: 1 ] */
	opacity: 1;
}

Sebastian

Hey,

I can provide more definitive advice if you could send me a link to the site either here or via our contact form. But for now I suggest the following CSS:

#img-home-hero-boxes {
opacity: 0;
}
#img-home-hero-boxes.mt-inview {
/* MT [ sub: 1 | group: animation | event: 1 ] */
animation-name: bounceInLeft;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-fill-mode: forwards;
opacity: 1;
}

I’ve removed your transition CSS, including the inView once event. I think that may have been confusing things by making opacity 1, only for the animation to set if to zero when it starts. I also added:

animation-fill-mode: forwards;

This should ensure the opacity:0 setting above gets overridden by the animation’s opacity 1 setting once the animation completes (I think opacity:1 is applied by the bounce animations).

If I haven’t quite got to the bottom of this, please send over a link to the page.

Thanks!
Sebastian

You must login or register to reply to this topic.