Front End Animation

Kevin Flanagan
May32019

Animation adds a simple bit of polish to a page, perhaps ordering elements' appearance on the screen, or animating them as the screen is scrolled.

Step One:

Determine which twig to edit and add libraries to.

ie : 

Enable TWIG debug;

Inspect the page you want to add the annimation to

Clear cache

inspect the page .... look for the template that is currently laying out the page and see if there are any suggestions.

Copy the template that is being used and create a new template using a fielname from the suggestions part

Clear the cache and re-inspect the page to ensure that the new template is being used now.

Disable the twig debugging

Create library within the theme for settingup GSAP/Scroll Magic

Open the themes library.yml file

[theme].libraries.yml

 

Libraries:

jQuery

GSAP

ScrollMagic