Animation not working with fixed header style

alltor · February 2019

Hello,

I'm having some issues with animations not working while using the fixed header style.

It seems that the animation goes off immediately when loading the page, so if I have an image with fade in on the bottom of the page, the animation seems to already have played when I get there by scrolling. It seems to work with other header styles.

In this case it's the car image on the bottom of this page:

http://www.alltor.se

Thanks!

Pablo · February 2019

Hi,

I do not see that issue.

Did you solve the problem?

Thanks

alltor · February 2019

No I experimented a little bit I didn't manage to fix it.

So when you scroll down to the car the car fades in from the left?
I have tried in Chrome, Opera and IE9 and it's the same thing on all of them. Even iOS Safari and Android Chrome is not animating the image of the car when scrolling down.

Pablo · February 2019

Yes, it fades from the left when I scroll to the bottom.
This problem can be related to content which loads after this section with a car.
I mean, the screen is for one second a little bit lower, and it's triggering this section.

Please add some additional space(divider item, like 500px) after the first section and check if the issue still exists.
Thanks

alltor · February 2019

Hm yes, that works. It also works when fullscreen it not enabled for the top section. At least combined with the fixed header style. Even then the page is not as high, but when fullscreen is enabled it jumps a bit while loading the page.

I guess I'll have to live with a static image or have a lot more text. Thanks!

Pablo · February 2019

If you have some other questions, feel free to ask.

Thanks

alltor · October 2019

I'm still not quite happy with how this works. I have 3 fullscreen sections, but it still loads the second section directly which triggers the animation. Is there a workaround to this? I tried disabling all plugins but it's the same.

Still the same page at www.alltor.se. There should be a fade in animation on the text in the middle section. The bottom section is fine since the page doesn't load that section immediately.

Pablo · October 2019

Yes, it starts animation directly when your screen is on that image, it triggers it automatically.

We do not have any option to delay it - our theme uses the animate.css and jquery waypoint.

So if you would like to delay it, you would have to edit these libraries - but we do not support this kind of modifcations.

Thanks

alltor · October 2019

Thanks Pablo for leading me in the right direction.

This works to delay the animations in custom css (for anyone who stumbles in to this thread):

div {

animation-delay: 2s;

}

However, it still animates the second section after 2 seconds.

Is there any way you know to have it not loading the second section? Why does it jump up when loading the page? Have tried different modern browsers. Even on iOS it does not work.

Pablo · October 2019

It jumps because these first items are not calculated to the height value.

Did you try to leave this first section without animation?

Thanks

Animation not working with fixed header style

Comments