Custom animate long page sections

This script adds a the possibility to add animations to areas, so they animate when they hit the bottom fourth of the screen.
See the demos below for how to add the different animations.

Note: The script will only animate the element *once* per page load, to avoid superfluous animation when scrolling up and down. When the sections are done animating, they stay that way. 

Add Pagescripts/long_page_functions/longpage_animate_sections.js to the scripts section of a long page to use.

Please use sparingly - we recommend only using this to highlight certain sections, like call to actions, important features etc, or just to break up an otherwise static page.

 

animatescaleup

Add class="animatescaleup" to your element, or add a <div class="animatescaleup" > before your elements, and end with a </div>

animateshiftright

Add class="animateshiftright" to your element, or add a <div class="animateshiftright" > before your elements, and end with a </div>

animateshiftleft

Add class="animateshiftleft" to your element, or add a <div class="animateshiftleft" > before your elements, and end with a </div>

animatemoveup

Add class="animatemoveup" to your element, or add a <div class="animatemoveup" > before your elements, and end with a </div>

Donec consectetur ex ac molestie posuere. Praesent rhoncus dui ut nibh pellentesque finibus. Nam mauris quam, suscipit varius libero sit amet, aliquam molestie turpis.

Link here