Classic Feature Box - Animate on page load

[micahkritzman]

Hello,

How can I make our Classic Feature Box animate when the page loads.

Since it’s above the page fold on HD screens it doesn’t animate until you scroll.

Thanks,

Micah

[lely]

Hello Micah,

On the classic feature box class field, we can add a certain class. Let say custom-bounce. Then add the animation property on this class. Add this CSS on Theme Options > Global CSS. See this guide regarding animation property:
https://css-tricks.com/making-css-animations-feel-natural/

Hope this helps.

[micahkritzman]

I don’t want to change the animation type, it’s already animated fine.

I just need to to animate upon page load instead of upon page scroll.

I don’t see an answer to that question on the given link.

Micah

[rad]

Hi Micah,

Unfortunately, the animation only starts upon scroll and it’s not currently changeable. I recommend increasing the height of the content above it.

And please provide your site’s URL that has this and I’ll check, other than scroll, it’s also dependent to scroll position so even if you trigger the scroll event upon load, it may still not work depending on a current content position versus the scroll position.

Thanks!

[micahkritzman]

Increasing the height puts the copy below the fold and less valuable to google so I don’t thinks a smart move.

https://lipcandie.com/

Micah

[rad]

Hi @websperations,

In that case, I recommend disabling the animation since it’s meant to be displayed by default above the fold. Hiding it with animation may trigger the below-the-fold issue due to the visibility of the content. Remember that for the animation to work, it must start hidden first.

Thanks!