How to have animation on scroll on Grav?

1

Im new to grav, can any body help me make a website like this on grav?

I want to be able to incorporate animation on scroll for website using grav. Im very open to tutorials and etc. Please help me, thank you!

2

Hi @pjy
I can only recommend you GSAP and its plugin “ScrollTrigger”. Super easy to use and there’s a lot of options and customization.

You can follow the official doc here

Or watch this tutorial from DesignCourse

Hope you’ll find what you need.

3

Thanks @AlexMart sorry for the late reply. Ill check it out this week. Thanks again for sending the documentation and tutorial video.

4

Hey @AlexMart by any chance do you have videos or links of integrating GSAP onto grav? Im really new to both tbh and Im not too sure how to link them up together. If you could direct/help on how to set this one up thatd be really great.

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!

6

Hey @AlexMart @pjy do you have any sample projects or source codes I could download so I can have reference on how you handle coding the pages? Im currently coding it using plain HTML on a grav page.

image
image1231×940 42.8 KB

If you could direct me to a grav project that uses gsap already, that would really help me a bunch in understanding how it works together.

7

hey @Joshua

I suggest you to have a look a the grav documentation here :

You’ll find how grav works with markdown files and twig templates. The power of grav is to use template file (twig) to put your html in a dynamic way and rarely “hard code” your code.

As I can see in your screenshot you try to add differents divs in the same page, so maybe you have to consider using modular pages. You can find documentation here :

Those are the basis of grav. Start understanding how it works first. You can use a pre-made skeleton, with modular pages, like this one and try playing with the markdown files and twig template to change the site content :

Unfortunately there’s no grav projects with gsap already installed.

Cheers,

Alex

8

Hello,

An other solution.

I’ve done some animations on scroll on my personnal website.
It’s nothing fancy, only some background-color changes, or background scaling.

I didn’t use GSAP for this, only plain javascript.
I’m checking if an element is about to be in view, I add a class with some css transition and it’s done for the js.

In my templates, I’m adding the class that the js is looking for.

Would that be enough for your case or do you need a more complex solution ?