GSAP Archives - TECHNIG

How to Repeat Animation in GreenSock?

Hujatulla Asghari — Thu, 23 Jun 2016 15:30:49 +0000

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.


  T
  E
  C
  H
  N
  I
  G

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.

GreenSock TimelineLite Animation Step by Step.

Hujatulla Asghari — Tue, 14 Jun 2016 15:00:07 +0000

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.

GreenSock TimelineLite Animation

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.

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.

How to Animating Multiple Objects with GreenSock?

Hujatulla Asghari — Sun, 12 Jun 2016 16:00:29 +0000

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.


  T
  E
  C
  H
  N
  I
  G

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 GreenSock Practice #6 multiple object animation by Hujjat Nazari (@Hujjat) on CodePen.[/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.

Learn GreenSock Easing Visualization Step by Step

Hujatulla Asghari — Fri, 27 May 2016 16:30:02 +0000

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 Robert Penner’s easing cheatsheet by Edan Kwan (@edankwan) on CodePen.[/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.

GreenSock Easing tutorial options

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 GreenSock Practice #5 Easing by Hujjat Nazari (@Hujjat) on CodePen.[/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.

GSAP Multiple Tweens Step by Step Tutorial

Hujatulla Asghari — Wed, 25 May 2016 17:28:59 +0000

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 GreenSock Practice #2 by Hujjat Nazari (@Hujjat) on CodePen.[/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 GreenSock Practice #2 by Hujjat Nazari (@Hujjat) on CodePen.[/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 GreenSock Practice #4 by Hujjat Nazari (@Hujjat) on CodePen.[/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. 🙂

The post GSAP Multiple Tweens Step by Step Tutorial appeared first on TECHNIG.

Introduction to GSAP Animation with Examples

Hujatulla Asghari — Fri, 06 May 2016 06:00:43 +0000

Animation is one the most interesting topic in web designing. Nowadays, we see animations in most websites and web applications. GSAP animation intro is the first part of animation tutorials with GreenSock Animation Platform know us GSAP. GreenSock is a powerful animation platform, that lets you animate almost any DOM element properties, CSS values, canvas objects, svg and more. In this tutorial series, we are going to start from the basic to pro of GSAP platform. We will not bore by explaining and writing too much, rather will discuss shortly just what is necessary.

GSAP Animation Examples

Before we start learning what is GSAP and how to use it, let’s see a few examples.

SVG Bubble Slider

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”GZNgLw” default_tab=”result” user=”chrisgannon”]See the Pen SVG Bubble Slider by Chris Gannon (@chrisgannon) on CodePen.[/codepen_embed]

SVG Flight Loader

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”RaYxaO” default_tab=”result” user=”chrisgannon”]See the Pen SVG Flight Loader by Chris Gannon (@chrisgannon) on CodePen.[/codepen_embed]

SVG Flying Saucer

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”NqyWOw” default_tab=”result” user=”chrisgannon”]See the Pen SVG Flying Saucer by Chris Gannon (@chrisgannon) on CodePen.[/codepen_embed]

And – Howl’s Moving Castle

[codepen_embed height=”266″ theme_id=”dark” slug_hash=”byouf” default_tab=”result” user=”gordonnl”]See the Pen Howl’s Moving Castle by Nathan Gordon (@gordonnl) on CodePen.[/codepen_embed]

What is GSAP Animation?

GreenSock is a tool that let you animate almost everything in the web page. From svg to images, web elements, CSS properties, canvas and many more.

It has four main tools plus a few plugins. Let’s take a look at each of them briefly.

TweenLight

As the name say’s light. It is a light version of the library with just necessary features.

TweenMax

TweenMax is the same as TweenLight, but it has a few more features. Features like repeat(), repeatDelay(), yoyo(), staggered tweens, and more.

TimelineLite

If you have ever worked with Adobe Flash, Adobe After Effect or any other animation tools, you will know what the timeline is. TimelineLite in gsap animation is working with same. Simply, timeline is the break points for new animation effects. The TimelineLite is lightweight version of timeline for TweenLight and TweenMax. It has just necessary features.

TimelineMax

It is the same us TimelineLight, but it has some more features. Those features are not essential actually, unless, you use it in advance animations.

Conclusion

It was just the introduction to GSAP animation. We will continue this tutorial in some other parts. Make sure you check the other parts if you want to learn it easily. We hope it has been informative for you. If you have any questions related to this article, feel free to comment it bellow. 🙂

The post Introduction to GSAP Animation with Examples appeared first on TECHNIG.