PressTigers

How To Create Iterative Animation With GreenSock and ScrollMagic

There are multiple ways to create animation for your website site. But, in this article, we will work on time saving and easy to handle animation in any way. For example, we are working on the website and need animation on objects we will move objects just once and animation will understand your need and iterate it with each scroll and window load.

Following are the steps to create iterative animation with GreenSock and ScrollMagic:

  1. Setup HTML Document with MagicScroll and GreenSock TweenMax.
  2. Animate objects with window load.
  3. Pin section and animation objects.
  4. Animate objects with Scroll.

Following is the GitHub link to download:
https://github.com/presstigers/How-to-create-iterative-animation-with-GreenSock-and-ScrollMagic

Let’s start…
1. Setup HTML Document with MagicScroll and GreenSock TweenMax:
Required Libraries are:

Required File Stricture:

(in this stricture style.css.map file is optional)
Now we are good to go and add libraries in our HTML Document before </body>.

Included libraries will look like:

2. Animate objects with window load:
Go To Custom JS and add document ready function.

Add ScrollMagic code within document ready function.

After ScrollMagic adds window load function.

We have started to build the first scene.

Trigger the main section in which section you are trying to animate.

We need to understand how the animation will find the classes and values from starting to end.

TweenLite.from is a function that animate object from the default HTML placed element.

.main.line01 means which object we need to target for animation.
After the comma, we have 1 which is the duration controller, 1 means one second you can also use (1 to 6) value.
And then we use jQuery (property and value) for animation.
Set tween within the scroll scene.

Add main variable in scrollMagicController.

Now code will look like:

HTML will look like:

The output will look like:


3. Animate objects with window load:
triggerHook: “0” means we add a pin from the start of the section you can use (0 to 9) in the hook.
duration: “2000” means how much time it will take to complete the animation in this section.
In this case, we will manage the section with pin and animate objects.

To pin section sticky we need .setPin with section parent class.

Add this to the scrollMagicController.

HTML will look like:

The output will look like:

4. Animate objects with Scroll:
In this case, we will manage the section with a scroll.

HTML will look like:

The output will look like:

Following is the GitHub link to download:
https://github.com/presstigers/How-to-create-iterative-animation-with-GreenSock-and-ScrollMagic

Written By: Mustafa Mehmood

User Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Get in Touch