JavaScript is becoming more and more powerful every day. Nowadays, with JavaScript, you can develop almost any types of application. From desktop to web and even game and mobile apps. Also, you can applications that interact with a database with Nodejs. Besides, with new JavaScript Frameworks like Nuxtjs and Reduxjs you can develop amazing web applications. In contrast, you must know to learn ES6 basics.

What is ES6?

ES6 or EcmaScript is the future of JavaScript. In a nutshell, JavaScript was taken from ECMAScript. Nowadays, people bring updates to ECMAScript and those featured work in JavaScript as well.  Besides, we used to call the older version ES5 and ES6 is the 2015 version with a lot of brilliant features. So, In this step by step tutorials, we will cover all the features with examples. Also, we will talk about Webpack and package bundlers as well.

Why should I Learn ES6?

Well, if you come here to learn ES6, you probably have a good reason right! Most developers use the ES6 code in their project. Also, most software development companies require you to know ES6. Besides, the new features are amazing. It helps you write code in more efficient ways.  You can use Class, Modules, Array Functions and more cool features. It’s the next version of JavaScript, which delivers new language features. So, let’s learn the ES6 basics and configuration.

Learn ES6 Basics Introduction and Configuration

Some modern browsers support ES6 syntax now. Chrome 60+ almost support all ES6 features. But, as of writing this article, most browsers don’t support ES6 features. Therefore, if you want to write code for production, you must convert your code to old JavaScript. So, now we need a tool like Babeljs. If you don’t know what it is. It’s simple a JavaScript compiler. It takes the ES6 code and converts it to old JavaScript code.

Configure Babeljs

Let’s setup Babeljs and use it. Also, you can read the documentation if you want. But I will explain it with step by step ways.

Steps to Configure Babeljs

Firstly, you must have NPM installed on your system. If you don’t have it, just go to nodejs.org download and install it. It will not take more than 2 minutes.

Secondly, create a new folder for your ES6 learning anywhere in your system. Then, open terminal or CMD and run the following command to install Bablejs.

npm install --save-dev babel-cli babel-preset-env

That will install Bablejs and preset env.

Create a package.json file in your directory and paste the following code.

{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "build": "babel src -d output"
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.6.1",
    }
}

Everything should look familiar to you if you have ever used NPM. The script part registers the build command for NPM. It means you can run ‘ npm run build ‘ in your current directory and it will run the babel in the src folder and compile the files to the output directory.

Your project structure should look like this.

The final step is to create a .babelrc file and write the following code.

{
  "presets": ["env"]
}

In older versions of Babel, we used to write the presets value like es2015 or es2016. Now you don’t need to since you have preset-env and it will work just fine.

Now, create any file in the src directory and write ES6 code. Then, run the ‘ npm run build ‘ command in CMD.

I have a file called Persion.js in the src directory.

class User {
  constructor(name) {
    this.name = name;
  }
}

I wrote a simple class usage structure in ES6. When it compiles, it will look like this

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function User(name) {
  _classCallCheck(this, User);

  this.name = name;
};

You don’t need to worry about how long it is and how hard it’s to read. Just read the ES6 version. Also, that’s super clean.

Conclusion

I think it’s enough about ES6 basics part. Besides, we are supposed to make clean and short tutorials. So, I hope they learn the ES6 basics part has been informative for you. If you have any questions, feel free to comment below.

The post Learn ES6 : Basic Introduction and Configuration appeared first on TECHNIG.

Vue js is becoming more and more popular every day. It has a community of great developers. Also, you can develop almost any types of a web application with Vue. Besides, The Vue.js is an open-source progressive JavaScript framework for building user interfaces. Vue can also function as a web application framework capable of powering advanced single-page applications. In this article, you will learn about Vuejs computed properties vs methods. Also, where should you use methods and where should you use computed properties.

Vuejs Computed Properties VS Methods

Firstly, I expect you know the basics of Vue and want’s to learn the differences between computed property and methods. So, we will discuss with clear and real-life examples.

You write the computed properties and methods almost in the same way. Let’s see an example and then we will explain it more.

[codepen_embed height=”432″ theme_id=”0″ slug_hash=”GOxPbN” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/GOxPbN/’>GOxPbN</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

In the above example, we have a collection of tasks. Then, we display them based on completed and incompleted tasks. As you can see, we have once computed property and one method. They do almost the same thing but opposite to each other.

Return completed tasks:

  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    }
  }

Return Incompleted tasks:

methods: {
    InCompletedTasks() {
      return this.tasks.filter(task => !task.completed);
    }
  }

Note: As you can see, we could use computed property or methods for both. Instead, we put them in two ways so that you can understand that, what we can do with methods can be done with computed properties as well.

So, there are some significant difference and usage you should consider while using them.

Computed Properties

In a nutshell, computed properties are called computed value as well. It means, they update and can be changed anytime. Also, it caches the data until it changes. When the Vue is instantiated, computed properties are converted into a property. Therefore, you reference a computed property just like you would a data property.

Example:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

You can use it like this.

<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>

As you can see, the reverse message is not written like function. It’s just like a keyword. Additionally, you can’t pass a value to a computed property despite the fact that it’s like function.

Methods

You probably work with function a lot. Methods are the same as function and work the same way. Besides, a method does nothing unless you call it. Also, like all javascript functions, it accepts parameters and will be re-evaluated every time it’s called. After that, they can’t cache values. Additionally, you must use methods when you want to pass a value to modify it. 

Example:

[codepen_embed height=”305″ theme_id=”0″ slug_hash=”yPjjyg” default_tab=”html,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/yPjjyg/’>Vuejs example for tutorial</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see. We can call it like a function and pass value. Then, you can change it or add something.

In a nutshell, if you want to pass value, methods are good. Otherwise, computed properties are better for cache and speed.

Conclusion

I hope the Vuejs computed properties VS methods compression has been informative for you. If you have any questions or suggestions, feel free to comment below. Besides, you can join our forum and ask questions frequently.

The post Vuejs Computed Properties vs Methods Comparison With Example appeared first on TECHNIG.

WYSIWYG stands for “What you see is what you get“. So, you might have seen it before. If you ever wrote an article on WordPress or any other website, then you have used it. It’s the editor where you can stylize your text instantly with tools. Besides, it makes your life comfortable as a usual writer. So, if you are a developer and want to add the WYSIWYG editor for your website, we have the list of top 7 best WYSIWYG HTML Editor with JavaScript.

Best WYSIWYG HTML Editor

Below are the lists of top 7 best WYSIWYG HTML editors. Also, they are the most popular ones and free on the web.

1. CKEditor
2. TinyMCE
3. Summernote
4. Froala Editor
5. Redactor
6. MediumEditor
7. Bootstrap-wysihtml5

This list is ordered based on rich features, popularity, and ease of use.

CKEditor

This one is my favourite. The CKEditor is the fastest and easiest way to integrate a rich text editor into your application. So, it’s a very interactive and flexible editor. Also, it’s open-source and free. Moreover, it has three different types: Classic editor, Inline editor, and Balloon editor. You can read more about it on its documentation.

TinyMCE

For a decade TinyMCE has been an open-source project. Licensed under LGPL, everyone at TinyMCE remains as committed to its open-source future as the day their team started. So, If open source matters to you too, you can contribute to this WYSIWYG editor. Also, it has very clean and comprehensive documentation. So, you can configure it in almost less than 5 minutes.

Summernote

The Summernote is yet another great best WYSIWYG HTML editor. It’s super simple WYSIWYG editor on Bootstrap. Also,  Summernote is a JavaScript library. So, it’s fast, free, open-source and easy to use. Besides, you can contribute to this project if you are a developer. They have a very active team of developer who brings frequent updates.

Froala Editor

The Froala Editor is a lightweight WYSIWYG HTML Editor written in JavaScript that enables rich text editing capabilities for your applications. Also, It has complete documentation, specially designed framework plugins and tons of examples make it easy to integrate. Besides, it’s very nice and creatively design.

Redactor

If you are looking for a simple, fewer features and fast WYSIWYG editor, Redactor is your best choice. Also, it has a smooth and clean design with limitless flexibility and extensibility. Besides, it has also a simple and super-efficient API and amazing user experience.

MediumEditor

Looking for more simple and small size WYSIWYG editor? MediumEditor is pure JavaScript and 28kB gzipped. By default, it comes with basic features, but you can extend it with plug-ins. So, a very fast, easy-to-use and flexible editor.

Bootstrap-wysihtml5

Finally, if you are a bootstrap user, this one is made especially for bootstrap. So, it’s a JavaScript plugin that makes it easy to create simple, beautiful WYSIWYG editors with the help of wysihtml5 and Twitter Bootstrap. Besides, it uses bower for client-side dependency management.

Conclusion

All in all, there are many other JavaScript and jQuery plug-ins, but most of them are out of data. So, the list above was the top among them. If you know any WYSIWYG Editor better than them, feel free to share with us.

The post Top 7 Best WYSIWYG HTML Editor with JavaScript appeared first on TECHNIG.

Vuejs is by far the most popular JavaScript framework nowadays. So, if you want to build an appealing and brilliant web application, definitely you should learn Vue. Also, it’s becoming more popular day by day. The job opportunities are a lot for this framework. Besides, they have a community of great and active people who can help you in anytime. So, Vue-CLI is one of the many features of Vue. One of the most common problems that beginners face is how to install and configure it. Furthermore, you will learn how to solve Vue command not found error step by step with an example.

1. What’s Vue-CLI?

In the first place, you must know what’s Vue-CLI? Shortly, Vue-CLI let you install Vue applications or templates with the command line. For instance, when you install Laravel, you use a command line, so, the same case with Vue.

2. How to install Vue-CLI

To install Vue-CLI, you must have Nodejs and Git installed on your system. So, if you don’t have Nodejs, just go to their website and download the current version.

Install Vue-CLI with the following command

npm install -g vue-cli

It will install Vue-CLI globally, which according to the documentation when you install any NPM package globally, you can access it through the command line.

Open your command line and run the following command.

vue init webpack my-project

The above command normally installs a demo project form Webpack, but you should get an error.

Or your error might be list Vue command not found.

How to Solve Vue command not found

In order to solve this problem, you should add the Vue path to your environment variable manually. So, here is how you can do that.

• Press Win + R
• Type “control sysdm.cpl,,3” and press enter
• Press N to open environment variables.
• Select the path and click Edit.
• Click new to add a new path.
• Paste the path to NPM folder in your AppData.
• Click OK for all windows and you are done.

NPM path is normally in the following folder. Just change your username on your system.

C:\Users\UserName\AppData\Roaming\npm

Your show hidden files option must be on the view this files.

You are done now. So, this time if you open the command line and type the following command, it should install the Webpack demo template in the current directory.

vue init webpack my-project

After installing, you can run the following command to open the project in the browser.

npm run dev

So, it will run a server in the following URL

http://localhost:8080/#/

Conclusion

All in all, it was that easy. Besides learning what’s Vue-CLI, you learned how to install it from the command line. So, if you have any questions or problems related to how to solve Vue command not found, feel free to comment it below.

The post How to Solve vue Command not found on Windows? appeared first on TECHNIG.

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.

jQuery ui has an amazing plugin that will help you make drag and drop web application in a very easy and simple way. We will use jQuery ui sortable plugin to make a simple sortable drag and drop list. jQuery ui really made it easy to make an amazing drag and drop applications. Here is what we are going to make from scratch.

[codepen_embed height=”357″ theme_id=”dark” slug_hash=”RRNbbO” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/RRNbbO/’>jQuery ui Sortabl plugin</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

How to Use jQuery UI Sortable?

As like every other jQuery ui plugins, using sortable plugin is also the same and easy. All you need is to add jQuery and jQuery ui. You can download them from jQuery site.

Let’s add some html and css to start designing our sortable list. here the basic html markup(Of course you can customize it).

<ul id="sortable">  
    <li class="item-1">Item 1</li>  
    <li class="item-2">Item 2</li>  
    <li class="item-3">Item 3</li>  
    <li class="item-4">Item 4</li>  
</ul>

and Here some CSS for styling.

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  margin: 0px;
  padding: 0px;
  background: #303030;
  font-family: 'Lato', sans-serif;
}

h1 {
  color: #fff;
  text-align: center;
  margin-top: 2em;
}

ul {
  list-style: none;
  margin-top: 2em;
}

ul li {
  color: #fff;
  padding: 20px;
  width: 500px;
  margin: 0px auto;
  cursor: pointer;
}

ul li.item-1 {
  background: #5BC0EB
}

ul li.item-2 {
  background: #9BC53D
}

ul li.item-3 {
  background: #E55934
}

ul li.item-4 {
  background: #FA7921
}

Coming to JavaScript part, it’s pretty simple. If you have not yet link to jQuery and jQuery ui, you can link them through cdn.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

I assume you have a added them at the bottom of your page. Now let’s write our JavaScript code to preform the action.

 $(function() {
   $("#sortable").sortable();
 });

We used jQuery to select the  sortable id and than we applied th sortable function to it. Now, our list will be sortable. We can change the order the way we want.

Conclusion

It was how jQuery ui sortable plugin works. You can use it in any project you want in the same way. We hope it has been informative for you. If you have any questions related to this content, feel free to comment it bellow. 🙂

The post jQuery UI Sortable Drag and Drop 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.

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

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

FancyBox is an amazing jQuery plugin that will let you open any image in the webpage like lightbox modal. When you click on the image, unlike opening on new tab or refreshing the page, it will open it in the same page with a nice modal dialog box. This tutorial will teach you how to configure and use fancybox jquery plugin.

Configurations

For configuration, all you need is to download this plugin form fancyapps.com. After you download the plugin, unzip the file, now you will see some files and folders inside. The folder we need is source folder. Copy that folder to your project. There are some helper files inside helpers folder that you might want to use, but they are optional. We are not going to use them.

Include Fancybox to Your Project

Inside source folder, you have one CSS file and two files for JavaScript. Simply, both JavaScript files  are the same, just the one which has suffix of pack.js is compress version for production. For testing, feel free to use either of them.

Now let’s create a html file with a simple template files.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>How to use Fancybox jquery plugin</title>
	<link rel="stylesheet" href="source/jquery.fancybox.css">
</head>
<body>
	

	<!-- images goes there -->

	<script src="source/jquery.js"></script>
	<script src="source/jquery.fancybox.js"></script>
</body>
</html>

To use fancybox jquery plugin, you need to include jquery as well.

How to Use fancybox jQuery plugin?

Now you have configured the fancybox. It’s time to use fancybox jquery pluign and apply it on you images. Every image need to be in <a> tag, and the href attribute must refer to image image path. And one more thing, it must have a class, you can name it anything you wish.

	<div class="gallery">
		<a href="img/1.jpg" class="teching">
			<img src="img/1.jpg" alt="first">
		</a>
		<a href="img/2.jpg" class="teching">
			<img src="img/2.jpg" alt="first">
		</a>
		<a href="img/3.jpg" class="teching">
			<img src="img/3.jpg" alt="first">
		</a>
		<a href="img/4.jpg" class="teching">
			<img src="img/4.jpg" alt="first">
		</a>
	</div>

Apply a little style at top of the page to align them.

<style>
	.gallery{
		display: flex;
	}
	img{
		width: 100%;
		display: inline-block;
	}
</style>

Finally, at the bottom of the page add one line of jquery to apply the script to the images.

<script>
	$(".teching").fancybox();
</script>

It was that easy to use fancybox jquery plugin. It will apply to all elements that have the class of technig.

Here is live example.

[codepen_embed height=”539″ theme_id=”dark” slug_hash=”VaJjvX” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/VaJjvX/’>VaJjvX</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 all about how to use fancybox jquery plugin. If you have any questions or problem, feel free to comment it bellow. 🙂

The post How to Use FancyBox jQuery Plugin? appeared first on TECHNIG.