Animation Archives - TECHNIG

Top 5 Best Whiteboard Animation Software

Hujatulla Asghari — Fri, 06 Oct 2017 09:30:47 +0000

If you want to make a video for YouTube or just want to make an amazing animated video, so, whiteboard animation software is for you. Also, whiteboard animation makes your presentation fabulous and appealing. Besides, it makes people enjoy watching your video or presentation. So, check the top 5 best whiteboard animation software. Additionally, this softwares are selected based on rich features, ease of use and popularity.

If you don’t know what’s exactly whiteboard animation is? Then watch out this video on YouTube to see how amazing they are. The business owner uses whiteboard animation software for business advertising and video marketing.

Best Whiteboard Animation Software

Below are the lists of top 5 best whiteboard animation software.

RawShorts
GoAnimate
EasySketchPro
Videoscribe
PowToon

Some of these softwares are free and some others premium. Also, they have a trial version to test for a few days as well.

1. RawShorts, Explainer Video Software

RawShort – best Whiteboard Animation Software

Raw Shorts gives you everything you need to make an explainer video animation, right at your fingertips. Besides, RawShorts is more focused on making it easy to produce professional videos without the use of artistic talent. So, it’s good to make an explainer video for your business online.

2. GoAnimate, Whiteboard Animation Software

GoAnimation – Online Whiteboard Animation Video Software

The GoAnimate is a cloud-based, animated video creation platform. So, it is designed to allow business people with no background in animation to quickly and easily create animated videos. Founded in 2007 as a private company by Alvin Hung.

3. EasySketchPro,

Easy Sketch Pro – Best Whiteboard Animation Software

The Easy Sketch Pro 3.0 is a mind-blowing whiteboard animation video software. Also, Andrew Fox and Paul Lynch are the founders. The latest version of this software is really amazing and fantastic. If you want to create video For YouTube, it’s a great choice. Because most people like this types of animations.

4. Videoscribe, Whiteboard Animation Video

Videoscribe – Online Whiteboard Marketing Animation Software

The VideoScribe is an online marketing animation software for creating whiteboard animations automatically. UK company Sparkol launched it in 2012. So, in April 2014 it had more than 250,000 users in 135 countries around the world. But, the downside is that it’s based on Adobe Flash.

5. PowToon, Marketing Animation Software

PowToon – Cartoon Video Animation Software

Pow Toon is a company which sells cloud-based software for creating animated presentations and animated explainer videos. So, it’s like GoAnimate. Also, Spitalnik and Daniel Zaturansky are the founders. So, as the name suggests, it’s good for creating the cartoon explainer video for business advertising.

Conclusion

All in all, none of these marketing animation softwares are bad or weak. It’s about how easy they are to use. So, if used any of them or have a question, feel free to comment below or ask on our forum.

The post Top 5 Best Whiteboard Animation Software appeared first on 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.

Setting up GreenSock Animation Part 2

Hujatulla Asghari — Tue, 10 May 2016 05:30:45 +0000

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.

GreenSock animation setting on codepen

Settings
JavaScript tab
jQuery cdn link
TweenMax cdn link
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:


  
     Move me with GreenSock

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.

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.