How to Repeat Animation in GreenSock?

Repeating animation in GreenSock is very easy and useful. If you want to repeat any animation for twice or more than once, you can use the repeat GreenSock animations feature. This tutorial will teach you the step by step process on how to use this amazing feature for you next animation project. Though their are different ways of repeating animations in GreenSock, we will show you the most easy and precise ways. We assume you have the basic knowledge of using GreenSock technology, if you don’t, please take a look at our previous tutorials of on GSAP first, than come to this tutorial.

How to Repeat GreenSock Animations?

Let’s start by writing some html markups to work with. At the end we will put all the codes together and make a live demo. So here is the html code.

<div id="teching">
  <div class="letter t">T</div>
  <div class="letter e">E</div>
  <div class="letter c">C</div>
  <div class="letter h">H</div>
  <div class="letter n">N</div>
  <div class="letter i">I</div>
  <div class="letter g">G</div>
</div>

Let’s design it a litte so that we can apply animation on it.

body{
  background-color: #8c47c2;
  text-align: center;
  padding: 30px;
}
.letter {
  display:inline-block;
  font-family: sans-serif;
  font-weight: bold;
  font-size:120px
}
.t{color:#5BC0EB}
.e{color:#FDE74C}
.c{color:#9BC53D}
.h{color:#E55934}
.n{color:#FA7921}
.i{color:#ffffff}
.g{color:#FF6696}

Now, let’s add a basic animation to this letters.

var letters = $('.letter').toArray();
var timeLine = new TimelineLite();

timeLine.staggerFrom(letters,2,{
  y:"-100px",
  ease: Elastic.easOut,
},0.15);

Here is the live demo.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”KMzZvo” default_tab=”result” user=”Hujjat”]See the Pen GreenSock Practice #7 Timeline animation by Hujjat Nazari (@Hujjat) on CodePen.[/codepen_embed]

As you can see, It’s showing-up only once. What if we want to repeat the same animation for a number of times? We can do it simply by adding the repeat and repeatDelay properties.

repeat will accept a number that indicate the number of times you want to repeat the animation. The repeatDelay on the other hand will indicate the delay between each animation.

Here is how we do it.  Let’s imagine you want to repeat this animation for 6 times, you will write the number 5 for repeat property. We will explain why now.

var letters = $('.letter').toArray();
var timeLine = new TimelineLite();

timeLine.staggerFrom(letters,2,{
  y:"-100px",
  ease: Elastic.easOut,
  repeat:5,
  repeatDelay:1
},0.15);

Here is the demo.

[codepen_embed height=”376″ theme_id=”dark” slug_hash=”MebXwQ” default_tab=”result” user=”Hujjat”]See the Pen GreenSock Practice #8 repeating animations by Hujjat Nazari (@Hujjat) on CodePen.[/codepen_embed]

Explain

By default, It will animate once, so when you write the number, it will add the default number as well. That’s why, when we write 5 it will repeat 6 times.

If you want to repeat an animation for infinite amounts of time, just give it a negative number like -1.

Second Way to Repeat GreenSock Animations.

Their is another way that you can repeat GreenSock animations. This way is more useful specially when you have more than one objects and tweens to animate. You will use TimelineMax instead of TimelineLite. It’s not possible with TimelineLite.

Here is how you do that.

var letters = $('.letter').toArray();

var timeLine = new TimelineMax({repeat:4,repeatDelay:1});

timeLine.staggerFrom(letters,2,{
  y:"-100px",
  ease: Elastic.easOut,
},0.15);

It’s that easy. When you instantiate the TimelineMax, pass the repeat and repeatDelay properties. It will work the same, but more power. Because it will apply to all animation that use timeLine object.

Conclusion

It was all about repeating animation with GreenSock Technology. If you have any question related to GreenSock, feel free to comment it bellow. We hope has been informative for you. 🙂