GSAP Animation multiple Tweens Tutorial Step by Step

Learn GSAP will make you a powerful web designer and animator. So far we have learned the basic of GSAP animation or GreanSock Animation Tools. GSAP animation multiple tweens tutorial is the continue part of the GSAP animation tutorial series. In this part of the series, you will learn the GSAP animation multiple tweens. If you don’t know the basic and configuration of GSAP, we recommend you to take a look at the first and second part of the tutorial. Otherwise you might face some problem during this this GSAP animation intermediate tutorial.

GSAP Animation Multiple Tweens

We continue with a fork pen that we have created in previous tutorial. We have added font awesome to use it’s icon. It look like this.

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

Just a little changes we have brought. Now let’s continue learning step by step options.

Multiple Tweens

So far we have learn how to apply single animation tween to an object. Now let’s add another or multiple tween to an object. To do that, there are many ways. One way is to repeat the same TweenLight and just change the property you want to apply. Here is an example. Let’s apply two property at the same time to the space shuttle.

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

We have applied x position and opacity. That’s when it reach to end of point, it start hiding.

The second way to apply multiple property is easier way. It work’s like this, you write all the property as an object for third argument of TweenLight.to function. Here is the example.

var item = $('.object');
TweenLite.to(item, 1, {
  x: "200px",
  y:'100px',
  color:'red',
});

As you can see, we have wrote all three property in third argument. You can add more, as much as you need.

Here is a live example.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RaXOKO” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/RaXOKO/’>GreenSock Practice #4</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 the basic of GSAP animation multiple tweens. I hope it has been informative for you, if you have any question regarding this GSAP animation multiple tweens or GSAP in general, feel free to comment it bellow. 🙂

GSAP Multiple Tweens Step by Step Tutorial