Scroll effects on page

I was wondering if it was possible to do scrolling effects such as the opacity effect on the following link

Could I do this in beaver builder?


1 Like

Not with beaver Builder but you could use a JS library like Animate On Scroll:
You would tag your page elements with AOS classes to trigger effects on scroll.
Maybe you would also need custom CSS to fix the background images position on scroll.

Thank you for the response, sorry I’ve got little experience with adapting themes, how would I go about incorporating the library into a WordPress theme


If you want to use the library on a specific page, you can both load the script from a CDN and initialize it by inserting this code in an HTML module in the layout:

<script src=""></script>
        Here your init parameters (see the doc)

If you want to load the script site wide (need to use it on multiple pages), you can insert the link to the CDN in the theme’s customizer, in a Code location (depending on the theme).

Thank you so much, I’ll be sure to give this a try

One more question, do I need to reference any other stylesheets when loading script on one page?

I’m not sure to understand, stylesheets related to what?
AOS doesn’t require any dependency.

Ok thank you my bad, sorry I’m new to all this

Thank you so much for your help

No problem, but as mentioned before, i think you’ll need also a bit of custom CSS to reproduce the effect of static background images seen in your example, AOS will not provide all the effects by itself in my opinion. :wink: