A Guide to Web Animation with GSAP - Part 2

It's really cool having you back here again!🤗

In Part 1 we learned how to make use of GSAP to get things moving on the web.

However, there was something I failed to explain which really make sense.

If you can remember, all I explained was how to get things moving and so on..... but what if you don't want those things to animate immediately the page is loaded (in other words, you want it to animate when you scroll towards that section).

If that's the case then I've got you covered!

If you don't have a basic idea about GSAP I will recommend you go through Part 1 first.

Before getting Started

We would be making use of ScrollMagic.

ScrollMagic is a scroll interaction library. It helps you to easily react to the user's current scroll position.

It's the perfect library for you if you want to ...

• animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).
• pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
• toggle CSS classes of elements on and off based on the scroll position.
• effortlessly add parallax effects to your website. e.t.c.

ScrollMagic is not a GreenSock product nor is it officially supported here, but GSAP and ScrollMagic work well together.

Getting Started

There are basically 4 options for making use of ScrollMagic:

• Clone from Github
• Install it via Bower
• Install it via npm
• Load from CDN. See the installation page for more details.

Once you have successfully downloaded/installed ScrollMagic, you can now link the necessary files.

The simplest way to add the ScrollMagic files to your page is to use a script tag like this😁:

<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

Successfully done that? You are cool to go!😘

Don't forget to link your GSAP file below and then your Js file (in that order).

<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script  src="app.js"></script>

Note: Endeavour to check the Installation guide for alternative methods to get ScrollMagic.

Making use of ScrollMagic

The basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.

Each scene is used to define what happens when the container is scrolled to a specific offset.

The first thing to do is to initialize the ScrollMagic controller

// init controller
var controller = new ScrollMagic.Controller();

Once that is done, we can now proceed to create a Timeline. In the previous article, I explained a few things about Timeline and I also used certain examples.

var  hello = gsap.timeline({ paused:  true });

Brief Explanation: I created a timeline and for the hello section I intend to animate and set it to pause. meaning this animation can only happen when it's played.

Next, we can create our tween, I would just be making use of something very simple.

hello.from(".hello", { duration:  1, y: 100, opacity:  0, delay:  0.5 });

Brief Explanation: I created a tween and remember we are animating the hello timeline.

I believe everyone that took out time to go through the previous article will perfectly understand everything I've been explaining.

Finally, the last thing we need to do is to create a Scene.

Normally, if we want to trigger it, we could just use hello.play() but we want it to animate at a certain point when we scroll. That is why we are making use of ScrollMagic.

new  ScrollMagic.Scene({
    triggerElement:  ".hello",
    triggerHook:  0.5
}).setTween(hello)
  .addTo(controller);

Dodon't feel lost, I will explain everything!

Brief Explanation:

• I created a scene and passed two objects i.e. the element we intend to trigger which is .hello , then I passed a triggerHook meaning the point on the screen we intend to trigger this animation ranging from 0 - 1, here I made use of 0.5 meaning it would trigger at half the screen.
• Finally, I added two basic methods I guess, setTween() holds the name of the tween/timeline we intend to animate and always remember to addTo(controller).
• There are other methods we could add like the Indicators plugin which we linked to our page earlier. This would help us see indicators of when our animation would trigger and when it will start. To add, we would simply add .addIndicators().

Once with that you can go ahead to animate while scrolling.

To make us understand better I will attach an organized code hosted on codePen.

You will notice that the animation occurs once it reaches the trigger position and fades away once you leave the area, to avoid that you can simply add .reverse(false).

With this, you will notice that there are so many kinds of animation you can do to make things move on your website.

Here are some few pens, that will help you learn more ways of animating web pages while scrolling.

You can also read more about ScrollMagic here.

Conclusion

There is nothing to conclude though, I would love to see what you eventually do after learning how to make use of GSAP for Web Animation.

As always, any questions or suggestions, please feel free to leave a response or tweet me 🤭! Be sure to connect with me on socials! 😎

Thanks for reading!