Is There A Way To Change The Viewport Scroll Trigger Point For CSS Animations?

[DannyC]

Hi,

I’ve got a few nice and simple CSS animations in my pages that trigger on scoll.

These are the standard animations built into X & Pro and I’m not using any custom plugins or CSS for these, just the standard choice of settings.

My question:

Is there a way to change when these are triggered in the viewport?

Currently, they appear to be triggering at 50% ie, when that column, row or element is in the middle of the page.

I’d like to trigger them a bit earlier (tweak for effect)

Animations can aid the flow of the page and encourage people to keep scrolling further down, whereas if they are just below 50% it looks empty or as if there isn’t anything there at all.

it’d be great if I could tweak the trigger so that they fire when they are, say 30% or 40% in view rather than bang in the middle of the page at 50%.

Good user experience dictates that subtle animation can help engagement or prominence, but making people wait to read content or for something to load directly where their eye-line is would be classed as bad.

Many thanks for your help here.

Dan

[rad]

Hi Dan,

Thanks for reaching out.

Unfortunately, it’s not currently possible. There is available option for that as of yet. I’ll add this as feature request in our list.

Thanks!

[DannyC]

Okay thanks for the update.

It would be great to control this and even have other options for animations as well.

Thanks

Dan

[christian]

You’re welcome, Dan. Thanks for your feedback.