Animate on Scroll (direct children)

[Araminta]

Hello @grantambrose,

Thank you for bringing this up!

@grantambrose

https://bespokejoinerydesign.com.au/

What a nice looking website

@grantambrose

The only way to apply animations is to edit the block directly. You can’t apply it to a class or using Relative Styling - is that correct?

Correct!
This is a current limitation with AOS, which we do plan to address when possible.
I’ll move this thread to Feature Requests so the team and I can keep track of it.

@grantambrose

Is there an easy way to animate the direct children of a Post Content block and apply animations to them (with relative styling not being an option to apply AOS)? For example, as you scroll down a blog post, each of the paragraphs has a slide fade in and up as you scroll.

This would require a few lines of code to achieve at the moment.
I’ve looped @Louis in on this, and he’ll be sure to get back to you with this.

@grantambrose

Is there a video that explains how to use the Animations under the Block Inspector > Design > Effections > Animations.

Unfortunately we don’t have an in-depth video explaining the Animations tab.
We’ll try to provide a mini-tutorial on this.

@grantambrose

but from reading the docs I write my keyframes in custom CSS and add the animation’s name here

Exactly.

@grantambrose

But I don’t think I can then fire that on scroll, right?

Right, as the keyframes are not linked to AOS, but to CSS animations, you won’t be able to target them to animate on scroll.
However, the idea of customising AOS animations is interesting.