In the John template we have implemented brand-new animation engine based on the scrollReveal.js script. This script makes creating on-scroll element animations very simple.
Thanks to the functionality provided by this script you can describe an animation using natural language..
The description of the animation is placed in the data-scrollreveal attribute:
<!-- These 2 lines are equivalent --> <p data-scrollreveal="enter top move 25px"> foo </p> <p data-scrollreveal="enter from the top and then move 25px"> foo </p>
The full description of the syntax is available on the project’s documentation page