Animation opacity delay not working (likely my fault)

This topic contains 9 replies, has 2 voices, and was last updated by  Sebastian 1 month, 1 week 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


majorpayne

Hey Sebastian.

Sent you a message last week via your Support > Contact page.


Sebastian

You did! I’m sorry I missed it. I thought I had replied requesting more information. I will reply to your email now if you prefer to continue offline.

Cheers,
Sebastian


majorpayne

No worries. After a few days I moved those DIVs to the home page.

I would like to figure out why my initial concept didn’t work though – each DIV appearing one after the other with a 1 second delay. They should animate up (fade/slide/bounce etc.) as if appearing from behind the section below (in teal).

I created 3 test DIVs on that page, and I would appreciate help getting started, not so much you doing all the work – I really need to figure out what I did wrong. Basically I had the same issue as my original comment; the DIVs would appear on page load, disappear, then reappear to complete the animation.

Thanks.


majorpayne

Would it help if I gave you access to the Website?


Sebastian

Hey,

Yes it might help if you could provide me with access via our secure contact form.

I see that you have this CSS in your stylesheet:

#headline-home.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

But I couldn’t find the #headline-home div. Are the 3 elements on the home-page you wish to animate links (rather than divs) with the class ‘home-service-block’?

Thanks,
Sebastian


Sebastian

Hey,

Thanks for providing access. Please check on the test page and let me know if I’ve understood your intention correctly. Here is the CSS Microthemer generated to achieve the affect. I explain how it works below.

/** Animation >> .test-divs **/
.test-divs {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.test-divs.mt-inview_once {
	/* MT [ sub: 1 | group: animation | event: 1 ] */
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/** Animation >> #div_block-72-610 **/
#div_block-72-610 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

/** Animation >> #div_block-73-610 **/
#div_block-73-610 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}

/** Animation >> #section-14-610 **/
#section-14-610 {
	position: relative;
}
  1. The initial transform: translate3d rules position the three .test-divs out of view by default. Because MT doesn’t have UI fields for transform yet, I added this code manually. I copied it from MT’s stylesheet which shows the @keyframes for the fadeInUp animation near the top.
  2. I set the animation event to inView once so the animation rules are inside the following selector: .test-divs.mt-inview_once. This means the animation only runs when MT adds the mt-inview_once class to the divs, which is does when they come into view.
  3. fadeInUp is set as the animation to run for 0.5 seconds. The animation-fill-mode is set to forwards so that the CSS styles in the final frame of the animation persist after the animation completes. The final frame styles reset the transform: translate3d, so the divs remain in view (overriding our first transform: translate3d rules that position the three .test-divs out of view)
  4. We didn’t specify a delay with our selector that targets all three divs, so this defaults to zero.
  5. But we create selectors for the 2nd and 3rd divs, which we use to set 1 and 2 second delays, so the divs animate in sequence – one second between each.
  6. Finally, I set position:relative on the teal section so that its z-index setting of 10 would actually take effect, and it would stack in front of the animated divs. This allowed the divs to appear from behind the section.

I hope that makes sense, and you can now apply the same technique elsewhere on the site.

Cheers,
Sebastian


majorpayne

That’s it! Last week I started to write the CSS manually, but thought MT would do all this for me. That’s when I got in trouble.

And I would of never got the “forwards” part, so a big thanks for taking time to explain the process.


Sebastian

You’re welcome 🙂

You must login or register to reply to this topic.