Animate elements on scroll (viewport-entry)

So you want to spice up the page with some cool effects, awesome! Keep in mind though, a webpage has to be readable, easy to scan and fast, so try not to exaggerate with too many element effects as it could result in a high page bounce/exit rate (some do love it, but some hate it).

By default this feature is disabled, so first you’ll need to enable. To do that, go to Admin > THEME options > Layout options , locate the “Enable Element Entry Animations” option and enable it eg: . This is very important, as the Animation options won’t appear otherwise in the page builder element’s options.

Now that the option is enabled, access any page, edit with page builder and start customizing. Choose any element, click on its toolbar’s gear icon to open the options panel and go to the Misc. Options tab. Here you should find the Animation Entry options and choose any animation effect you want eg: .

In case you might have multiple elements on the same row, you might want to add a delay effect for each of those elements to make it even cooler, so simply use the dragbar to choose the delay period (milliseconds).

Save & Publish and refresh the page. You should see the elements animating their entry when scrolling to their position.