How to have animation on scroll on Grav?

5

Hi @pjy
In order to make gsap + scrolltrigger works in your grav project, you have to integrate the javascript files into your partials/base.html.twig. Here is the way of how I integrate them on my projects.

  1. create of modify your javascript block in your partials/base.html.twig. (I suppose your custom javascript file is called app.js and is located in the your-theme/js folder). Make sure to respect the right order. First the main gsap file, then the scrolltrigger file and then your custom javascript file.

    {% block javascripts %}			
 	{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js',{group:'bottom'}, 100) %}
 	{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js',{group:'bottom'}, 100) %}			
    {% do assets.addJs('theme://js/app.js',{group:'bottom'}, 100) %}
 {% endblock %}

  2. Then just before the </body> tag, add the following lines to execute the javascript files from the group bottom

     {% block bottom %} 
    {{ assets.js('bottom')|raw }}
 {% endblock %}
 </body>

  3. That’s it, now gsap and scrolltrigger are ready to use. You can now add your custom javascript in the app.js file like in the tutorial video

Hope it helps!