PressTigers
How To Create Iterative Animation With GreenSock and ScrollMagic
- October 3, 2019
- Leave a comment
There are multiple ways to create animation for your website. 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:
- Setup HTML Document with MagicScroll and GreenSock TweenMax.
- Animate objects with window load.
- Pin section and animation objects.
- 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--Jquery v1.12.2 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!--GreenSock TweenMax v1.14.2 --> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js'></script> <!--Magic Scroll v1.3.0 --> <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js'></script> <!--Scroll To Plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> <!-- Custom Js --> <script src="js/main.js"></script> |
2. Animate objects with window load:
Go To Custom JS and add document ready function.
|
1 2 3 |
$(function() { // Code goes here }); |
Add ScrollMagic code within document ready function.
|
1 |
var scrollMagicController = new ScrollMagic; |
After ScrollMagic adds window load function.
|
1 2 3 |
$(window).load(function() { // Window load code goes here }); |
We have started to build the first scene.
|
1 2 3 |
var main = new ScrollScene({ // Code goes here }); |
Trigger the main section in which section you are trying to animate.
|
1 2 3 |
var main = new ScrollScene({ triggerElement: '#main', }); |
We need to understand how the animation will find the classes and values from starting to end.
|
1 |
TweenLite.from(".main .line01", 1, { y: -70, opacity: 0 }) |
TweenLite.from is a function that animate object from the default HTML placed element.
|
1 |
(".main .line01", 1, { y: -70, opacity: 0 }) |
.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.
|
1 2 3 4 5 6 7 |
.setTween(new TimelineMax().add([ TweenLite.from(".main .line01", 1, { y: -70, opacity: 0 }), TweenLite.from(".main .line02", 1, { y: 80, opacity: 0 }).delay(1.3), TweenLite.from(".main .line03", 1, { y: 90, opacity: 0 }).delay(1.6), TweenMax.from(".main .line04", 1, { y: 100, opacity: 0 }).delay(1.9), TweenMax.from(".main .line05", 1, { y: 100, opacity: 0 }).delay(2.3), ])); |
Add main variable in scrollMagicController.
|
1 |
main.addTo(scrollMagicController); |
Now code will look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { var scrollMagicController = new ScrollMagic; $(window).load(function() { // build scene var main = new ScrollScene({ triggerElement: '#main', }) .setTween(new TimelineMax().add([ TweenLite.from(".main .line01", 1, { y: -70, opacity: 0 }), TweenLite.from(".main .line02", 1, { y: 80, opacity: 0 }).delay(1.3), TweenLite.from(".main .line03", 1, { y: 90, opacity: 0 }).delay(1.6), TweenMax.from(".main .line04", 1, { y: 100, opacity: 0 }).delay(1.9), TweenMax.from(".main .line05", 1, { y: 100, opacity: 0 }).delay(2.3), ])) main.addTo(scrollMagicController) //main.addIndicators(); });}); |
HTML will look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section class="main d-flex h-100" id="main"> <div class="container align-self-center w-100"> <div class="row "> <div class="col-md-12 mx-auto"> <h1 class="line01">And an even wittier</h1> <p class="line02">Jumpstart your marketing efforts</p> <p class="line03">with this example based on</p> <p class="line04">Apple’s marketing pages.</p> <p class="line05">subheading to boot.</p> </div> </div> </div> </section> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
var situation = new ScrollScene({ triggerElement: '.situation', triggerHook: "0", duration: "2000" }) .setTween(new TimelineMax().add([ TweenMax.from("#heading", 8, { y: 500, }), TweenMax.from("#caption01", 8, { y: 1000, }).delay(1), TweenMax.from("#caption02", 8, { y: 1200, }).delay(2), TweenMax.from("#caption03", 8, { y: 1400, }).delay(3), ])) |
To pin section sticky we need .setPin with section parent class.
|
1 |
.setPin('.situation'); |
Add this to the scrollMagicController.
|
1 |
situation.addTo(scrollMagicController); |
HTML will look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<section class="situation mb-4"> <div class="container d-flex h-100"> <div class="row w-100"> <div class="col-md-5"> <h3 class="text-white" id="heading"> Lorem ipsum <br> dolor sit? </h3> <div id="caption01"> <h4 class="text-gradient">Lorem ipsum dolor, <br> sit amet consectetur <br> adipisicing elit. </h4> <p class="text-white"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam maxime quos repudiandae dolores tempora maiores illo iure laborum sequi.</p> </div> </div> <div class="col-md-2"> <figure> <img src="images/situation-mobile.png" alt=""> </figure> </div> <div class="col-md-5"> <div class="situation-wrap"> <div id="caption02"> <h4 class="text-gradient">Lorem ipsum dolor, <br> sit amet consectetur <br> adipisicing elit. </h4> <p class="text-white"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam maxime quos repudiandae dolores tempora maiores illo iure laborum sequi.</p> </div> </div> <div id="caption03"> <h4 class="text-gradient">Lorem ipsum dolor, <br> sit amet consectetur <br> adipisicing elit. </h4> <p class="text-white"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam maxime quos repudiandae dolores tempora maiores illo iure laborum sequi.</p> </div> </div> </div> </div> </section> |
The output will look like:
4. Animate objects with Scroll:
In this case, we will manage the section with a scroll.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var box2 = new ScrollScene({ triggerElement: '.main-section', triggerHook: "0.9", }) .setTween(new TimelineMax().add([ TweenLite.from(".box01", 1, { y: 150, opacity: 0 }), TweenLite.from(".box01 h2", 1, { x: -150, opacity: 0 }).delay(1), TweenLite.from(".box01 p", 1, { x: -250, opacity: 0 }).delay(1), TweenLite.from(".box01 .bg-black", 1, { y: 150, opacity: 0 }).delay(1), TweenLite.from(".box02", 1, { opacity: 0 }), TweenLite.from(".box02 h2", 1, { x: 150, opacity: 0 }).delay(1), TweenLite.from(".box02 p", 1, { x: 250, opacity: 0 }).delay(1), TweenLite.from(".box02 .bg-black", 1, { y: 150, opacity: 0 }).delay(1), TweenLite.from(".box03", 1, { y: 150, opacity: 0 }).delay(2), TweenLite.from(".box03 h2", 1, { x: -150, opacity: 0 }).delay(3), TweenLite.from(".box03 p", 1, { x: -250, opacity: 0 }).delay(3), TweenLite.from(".box03 .bg-black", 1, { y: 150, opacity: 0 }).delay(3), TweenLite.from(".box04", 1, { opacity: 0 }).delay(3), TweenLite.from(".box04 h2", 1, { x: 150, opacity: 0 }).delay(4), TweenLite.from(".box04 p", 1, { x: 250, opacity: 0 }).delay(4), TweenLite.from(".box04 .bg-black", 1, { y: 150, opacity: 0 }).delay(4), // TweenLite.from(".box02", 1, { y: 150, opacity: 0 }).delay(1), // TweenLite.from(".box03", 1, { y: 300, opacity: 0 }).delay(2), // TweenLite.from(".box04", 1, { y: 300, opacity: 0 }).delay(3), ])) .addTo(scrollMagicController) |
HTML will look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<section class="main-section"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 mb-4"> <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden box01"> <div class="my-3 py-3"> <h2 class="text-gradient">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-black shadow-sm mx-auto inner-box" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> <div class="col-md-6 mb-4"> <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden box02"> <div class="my-3 py-3"> <h2 class="text-gradient">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-black shadow-sm mx-auto inner-box" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> <div class="col-md-6 mb-4"> <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden box03"> <div class="my-3 py-3"> <h2 class="text-gradient">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-black shadow-sm mx-auto inner-box" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> <div class="col-md-6 mb-4"> <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden box04"> <div class="my-3 py-3"> <h2 class="text-gradient">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-black shadow-sm mx-auto inner-box" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> </div> </div> </section> |
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