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. 🙂

The post How to Repeat Animation in GreenSock? appeared first on TECHNIG.

If you want to automate the step by step animation frame, GreenSock TimelineLite animation is going to do that for you. In this part of the GreenSock tutorial series, we are going to cover the step by step of TimelineLite in GreenSock. If you are new to GreenSock technology, we recommend you to take a  look at our beginner tutorial on GSAP first, then come to this part.

What is GreenSock TimelineLite Animation?

We have already covered the TweenLite and TweenMax . TimelineLite is similar to those class. GreenSock TimelineLite animation feature will help you managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. If you have worked with Adobe Flash or any other animation studio, you are familiar with the timeline concept.

How it works?

First, we create an instance of TimelineLite class.

var timeLine = new TimelineLite();

Second, let’s select the objects to an array.

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

Now we can apply the to(), from or staggerFrom functions. You already know that staggerFrom function will accept an array argument and it will automate the sequences for animation to happen. Here is how we do that.

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

As you can see, we used the timeline object we have created and applied the staggerFrom function to it. The Last value for staggerFrom function will specify the time interval between each object to animate. You can use floating point number if you want.

Alternatively, you can use to() or from() function. But, you know that if you use those functions, you will need to select every object separately. For example:

timeLine.from(letter[0],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

timeLine.from(letter[1],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

timeLine.from(letter[2],2,{
  y:"-200px",
  ease: Elastic.easeOut
});

The staggerFrom is a lot easy and flexible to use.

Here is the final demo.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”KMzZvo” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/KMzZvo/’>GreenSock Practice #7 Timeline animation</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

It was how you can use TimelineLite instead of TweenMax or TweenLite. We hope it has been informative for you, if you have any questions related to this topic, feel free to comment bellow. 🙂

The post GreenSock TimelineLite Animation Step by Step. appeared first on TECHNIG.

Animation mulitple object with GreenSock will help you power up your animation skill with GreenSock. In this part of the GreenSock tutorial series, we are goint to focus on GreenSock multiple objects animation features. We will create an amazing animated text with GreenSock. We assume you have the basic knowledge of using GreenSock technology. If not, please talk a look at the basic tutorials here at technig and than continue to this article.

Here is the final project we are going to build together from scratch.

[codepen_embed height=”362″ theme_id=”dark” slug_hash=”WxrMWb” default_tab=”result” user=”Hujjat”]See the Pen GreenSock Practice #6 multiple object animation by Hujjat Nazari (@Hujjat) on CodePen.[/codepen_embed]

GreenSock Multiple Objects Animation

To animate multiple object, you have two ways. Either use TweenLight class make apply separate Tweens to every object or use TweenMax class and automate the process. We are going to show you both ways. At the end you learn both ways.

Using TweenLight

If you use TweenLight, you will write more code. But this more code will give you more flexibility to make more amazing animations. Here, You select every object and apply different animation properties. Here an example.

Imagine if you want to animate a sets of alphabet letters.

<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>

Now, if I want to animate each and every letter, I must select and apply animations individually. Here is the example code for above html markup.

var t = $('.letter.t');
var e = $('.letter.e');
var c = $('.letter.c');
var h = $('.letter.h');
var n = $('.letter.n');
var i = $('.letter.i');
var g = $('.letter.g');

TweenLite.from(t, 2, {y:"200",opacity:0.1});
TweenLite.from(e, 2, {y:"-200"});
TweenLite.from(c, 2, {y:"200"});
TweenLite.from(h, 2, {y:"-200"});
TweenLite.from(n, 2, {y:"200"});
TweenLite.from(i, 2, {y:"-200"});
TweenLite.from(g, 2, {y:"200"});

The good thing about this method is here that, you can add different property for each object. If you make a complex animation, you will definitely need to use this method.

Using TweenMax

Using TweenMax class help you make the animation easier. With less code, you can write do more thins done. The cons of using this method is that you can’t apply different property separately for each object. If you want to give the same animation property for all object, this method is going to for you.

We assume you have the above html markup. Here is how we write the JavaScript code.

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

TweenMax.staggerFrom(letters,1,{
  y: '-110',
  ease: Bounce.easeOut
},0.18);

As we said in introduction tutorial, TweenMax have some more feature and functionality. The staggerFrom function will talk the fourth argument.

This argument will specify the timing in which animation repeat on the next object. It will repeat those two property for every single letter after 0.18 second. Don’t forget that we have passed an array of object to straggerFrom function.

Here is the final demo.

[codepen_embed height=”331″ theme_id=”dark” slug_hash=”WxrMWb” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/WxrMWb/’>GreenSock Practice #6 multiple object animation</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

GreenSock multiple objects animation will help you build powerful yet flexible animations. We hope you have learned something new. If you any question, feel free to comment it bellow. 🙂

The post How to Animating Multiple Objects with GreenSock? appeared first on TECHNIG.

Easing is one of another powerful functionality of GreenSock animation platform. In this GreenSock easing tutorial you will learn different types of easing and how they work in gsap. We have covered the basic of GreenSock  previously. This will be the continue part of those tutorials. If you have problem in basic of GreenSock, you can refer to those articles.

GreenSock Easing Tutorial

Easing functions specify the rate of change of a parameter over time. In GreenSock, we use it to specify how an object is moving from one point to another point. There are a lot of different easing function, in this GreenSock easing tutorial we will discuss a few of them. If you want to know more about different kinds of easing, I recommend take a look at easings.net site to see all examples. Here is a live examples of easing.

[codepen_embed height=”482″ theme_id=”dark” slug_hash=”OPewzj” default_tab=”result” user=”edankwan”]See the Pen <a href=’http://codepen.io/edankwan/pen/OPewzj/’>Robert Penner’s easing cheatsheet</a> by Edan Kwan (<a href=’http://codepen.io/edankwan’>@edankwan</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

I hope the example gives you a clear concept of what easing is. Not let’s learn how to use in GreenSock

How to Use Easing in GreenSock?

So far we have learn how to use GreenSock. Now let’s create a pen on codepen and continue learning. Using easing is very easy in GreenSock, all you need is to add value for ease property. Here is an example.

var item = $('.object');
TweenLite.to(item, 1, {
  x: "400px",
  color:'red',
  ease: Power2.easeInOut,
});

As you can see, we have wrote the ease property with value of Power2.easeInOut. We have 5 different power in GreenSock. Beside that, we have Back, Elastic, Bounce, Rough, SlowMo, Stepped, Circ, Expo and Sine too. You can use any of them depending on which type of animation you want to make.

If you want to practice live, how all of this easing functions works, you check this link.

So let’s end of this GreenSock easing tutorial with a live example. We have three space shuttle that have different easing function let’s see how they more.

[codepen_embed height=”488″ theme_id=”dark” slug_hash=”WxeVqo” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/WxeVqo/’>GreenSock Practice #5 Easing</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

We hope this short GreenSock easing tutorial gave you the idea of how to use easing in different projects. If you have any types of question regarding to this topic, feel free to comment it bellow. 🙂

The post Learn GreenSock Easing Visualization Step by Step appeared first on TECHNIG.

In previous tutorial you have learned what GreenSock animation platform is and why we use it. In this article, you will learn how to use GreenSock animation in your first project. You will also learn GreenSock animation setting up and configurations. Overall, we will make our first project and environment for our project. Beside this, you will learn how to animate elements or any other object with GreenSock.

GreenSock Animation Setting up

As promised, we will will write clean and to the point. So, to use GreenSock, all you need is to download the framework and add it in your project and than write your animation code. We will use codepen instead of saving the file locally. If you want to so, you can fork our project and make changes for your own. Let’s start doing it step by step.

• Create a pen on Codepen. ( if you want, you can fork our project here ).
• Add the GreenSock and jQuery.

Of course you will need jQuery as well, so we will add jQuery first, than GSAP. In codepen, you can like this.

1. Settings
2. JavaScript tab
3. jQuery cdn link
4. TweenMax cdn link
5. We have added it through Quick-add.

Once you have added them, you are done with GreenSock animation setting up. Now you can start writing your code.

Here a simple html code:

<div class="object">
  <p>
     Move me with GreenSock
  </p>
</div>

Here is some basic CSS style.

.object{
  background-color: blue;
  width:170px;
  padding:30px;
  color:#fff;
}

So far we had just write the basic codes. Now let’s start learning the GreenSock syntax.

First, let’s select the item class with jQuery

var item = $('.object');

Now, you can apply the GreenSock functions to variable item. The most common type of tween is a to () tween which allows you to define the destination values:

TweenLite.to(myObject, 2, {x:100, y:200});

For our example, let’s more our item 300px to the right direction. To do that, add the following code to your JavaScript code.

TweenLite.to(item, 2, {x:300});

The TweenLite is the class name and the to() is the function.

The first arguement is the object you want to apply the animation on.

The second arguement is for time set or How much time it should take.

The third arguement, you can add an array of different affects.

In our example, it will more the item element to x direction in 2 second.

Here is the completed pen.

Conclusion

It was about the basic of GreenSock animation and GreenSock animation setting. We will continue this tutorial series with intermediate and advance level of GreenSock animation. I hope it has been informative for you, if you any question, feel free to comment it bellow. 🙂

The post Setting up GreenSock Animation Part 2 appeared first on TECHNIG.