As a developer or web designer, we use NPM almost more than 5 times on average per day. Sometimes, it takes a long time to install a package. Even more than 5 minutes or more. Besides, you watch some people on tutorials who install a package in 5 seconds. How they do that? If you want to make NPM install Work 20 times faster, this tutorial will help you.

Why NPM install is Too Slow?

Before we make NPM work faster, we should know what are the reasons why NPM install is too Slow. Well, there are many reasons. We just mention a few of them. So, if you are using Mac, it’s faster than the PC. Because all Apple MacBooks are having SSD hard drive. Also, most SSD drives are 5 to 10 times faster than HDD hard drives. Therefore, your computer might work slow.

If you have Mac or PC with SSD hard drive and still your NPM install command work slow, you can make it faster by following the tutorial. Also, this method works for HDD drives as well. 

Make NPM Install  Work 20 Times Faster

1. The first way to make NPM install faster is to make the progress set to false. So, this makes NPM install packages without showing the progress status.

npm set progress=false

It makes NPM install run 2x faster.

2. The second way is to use PNPM. It’s fast, disk space-efficient package manager. Besides, it’s a lot faster than NPM and Yarn. The way it works is similar to NPM. Also, as the documentation says, it supports almost 80% of NPM commands.

Features:

• Fast. Faster than NPM and Yarn.
• Efficient. One version of a package is saved only ever once on a disk.
• Deterministic. It has a lock file called.shrinkwrap.yaml
• Strict. A package can access only dependencies that are specified in its.package.json
• Works everywhere. Works on Windows, Linux and OS X.

Here is how you install and use it. Assuming you have NPM.

npm install -g pnpm

Now, instead of using NPM install, use PNPM install. For example.

pnpm install bootstrap

But you should remember, it will not work if you don’t have the filepackage.json.

npm init -y

Before using PNPM install command, run  npm init -y to create an empty package.jsonfile.

NPM commands that are re-implemented in PNPM:

• install
• update
• uninstall
• link
• prune
• list
• install-test
• outdated
• rebuild
• root
• help

You can read more here about it.

Conclusion

I hope it has been informative for you and y help you. If you have any questions, feel free to comment below. Besides, you can join our forum and ask questions there.

The post How to Make NPM Work 20 Times Faster appeared first on TECHNIG.

JavaScipt is by far the most popular programming language now. It will definitely rank in 2018. Also, you can almost develop anything with javascript. Web application, mobile, desktop and even work with a database. Besides, it has a large community of developers and contributors. Additionally, ES6 or ECMAScript 2015 is making the JavaScript better and better each day. So, we have collected the top best JavaScript Frameworks. If you want to learn any framework 2018, you may want to know which is the best, most popular and easy-to-use. Therefore, we collected these 5 best frameworks.

Furthermore, we show the resources that you can learn these frameworks in the best ways. Plus, we will compare them with Google trend to see the trending.

Best JavaScript Frameworks

Below are the lists of top JavaScript Frameworks that will rank in 2018. 

• Vue.js
• React
• Angular
• jQuery
• Redux

These frameworks are selected based on popularity on Github, most active users, eas of use, rich features and Google trends.

Notice: The above chart is the comparison of 5 best JavaScript frameworks on Google trend. In such a manner, you may not agree with it, but it’s the Google trend search terms. So, we don’t pay too much attention to that as well. What people search on Google doesn’t determine that it’s the best. Therefore, we order these frameworks more based on user-friendly, active users, updates plus most stars on Github.

Vue.js

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. Besides, it has a lot of pre-made components. Also, one the strongest reason why it’s popular is Laravel Framework. By default, Laravel comes with Vue installed. That way, most Laravel user will use it. The second reason is that Vue become popular in a short time. It was released in early 2014.

Additionally, it has great documentation and many other learning resources. Also, at the time of writing this article, it has 73000+ Github stars. So, if you want to learn, start with documentation or free Laracast video series.

React

React is a JavaScript library for building user interfaces. Also, it is maintained by Facebook, Instagram and a community of individual developers and corporations. Besides, React allows developers to create large web-applications that use data with Single Page Application. The initial release was 2013 and the author was influenced by the Angular framework. The Github repo is very active and currently, it has over 80000 stars.

Since it’s built by Facebook, again there are countless numbers of resources to learn. So, the documentation is a great place to start. If you want free video, check Jeffrey Ways course on React here.

Angular

AngularJS is also on the list of top JavaScript frameworks. The AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google. Plus, a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. So, AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Also, the initial release was 2010. Though it has different versions, like angular 2, angular 4, they are almost the same. So, currently, it has over 57000+ star on Github.

Importantly, it has lots of resources for learning. If you want to learn it, start with W3schools. The second resource is learn-angular.org. Finally, if you like video, search on youtube. We could not find any complete free course.

jQuery

From a very long time, jQuery has been the most used JavaScript framework. Despite all other great frameworks nowadays, you can’t escape learning jQuery. It is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Also, it is free, open-source software using the permissive MIT License. There are many JavaScript libraries that are based on jQuery. Therefore, you can’t stop learning. The initial release was 2006. Currently, it has over 47 stars on Github.

In Addition, since 2006, there have been countless numbers of blog articles and tutorials about jQuery. The best place to learn step by step is W3Schools.com. It’s not that complicated. very easy to learn and understandable even if you read the doc.

Redux

Redux is an open-source JavaScript library designed for managing application state. It is primarily (but not mandatorily) used together with React. Besides, Redux is a predictable state container for JavaScript apps. It helps developers write applications that behave consistently, run in different environments and are easy to test. Well, you may not need Redux. Before start using it, the article why you may not need it. But, definitely, it’s a great framework.

Want to learn about it? The documentation is a great place. Besides, the creator of Redux has a video tutorial as well. You can find it here.

Conclusion

So, we hope the article has been informative for you. Also, if you have any questions or suggestions about these top 5 best JavaScript Frameworks, feel free to comment below.

The post Top 5 Best JavaScript Frameworks of all Time appeared first on TECHNIG.

You might have downloaded Windows from its official website. So, they give you 90 days trial after which you should buy Windows. Well, many sites give you the crack version of Windows. Also, you can find cracking software tools for your Windows. But there are many disadvantages of cracking which we will discuss below. So, we will show you the right way on how to extend or renew Windows 10 90 days trial free using CMD. Further, you can use it without any problem up to 6 months a Windows 10.

Why Shouldn’t You Crack Windows?

Well, I don’t say you shouldn’t crack Windows because it’s illegal. You know that already. So, besides being illegal, when you crack software, it will become malicious. You might not feel the danger of using the cracked software unless you see some suspicious activity on your system. Also, must feature of your Windows will not work. It’s not because Windows will limit the usability and features of Windows, it’s because malicious code or scripts that crack your system mess-up ruin your operating system. So, now you know why shouldn’t you use cracked software, let’s do the legal way.

Renew Windows 10 90 days Trial Free Using CMD

Here is the step by step guide to renewing Windows 10 trial using CMD. You must run cmd as administrator.

• Open CMD  as administrator.
• Type “slmgr -rearm” without quotes and press enter.
• You will see a success popup window. Click Ok.
• Restart your computer, and you’re done.

Now you have 90 more days. In a nutshell, it’s that easy. So, If you still have problem follow the following steps.

1. Open CMD  as administrator.

2. Type “slmgr -rearm” And Press Enter

3. Success Message. After seeing the following success message, restart your computer.

Conclusion

Command-line commands have incredible powers. So if you want to learn more about command prompt, read the ten useful command-line command you should know article 10 Useful Command Line Commands. Besides, if you have any questions, feel free to comment below or ask on our forum.

The post How to Free Renew Windows 90 Days Trial appeared first on TECHNIG.

With this Windows 10 Photos feature, you can enhance the colour of your photos, remove blemishes, brighten and darken the light and shadow of your photos to make it looks professional and beautiful. In this tutorial, I am showing you all the tips about the Windows 10 Photos Application to enhance your photos by yourselves.

 Remove Unwanted Spots in Photo with Windows 10 Photos

The best thing about Windows 10 Photos is very easy to use you can enhance the colours, fix the spots apply colour effects with just one click.

1. To work better with this feature of Photos set the following setting as I show you below, Open the Photos go to Start click on Photo tile in Start Menu to open it.

2. Click on three dots at the right top side of the Photos which are located under the Title bar then click on the setting; it will open the setting page for you and then select the Zoom in and out from the Mouse Wheel option; this option allows you to zoom in and out by your mouse wheel.

3. Open the photo you want to enhance the colours and clarity  after you open the photo, click on Edit Tab (Ctrl+E) there are six options (Crop & Rotate, Enhance, Adjust, Undo all, Save and Save a copy )

4. From Enhance options click on Enhance your photo option and drag your mouse to the right and find the best result for your photo. You can also use the Filters from the Filter lists.

5. Go to Adjust option; you can brighten and even saturate your photo by moving the Light and Color slides to the right or left, use the Clarity slider to sharpen the photo just move it to the right and find the best result for your photo. Light: 42, Color: 21, Clarity: 45 and Vignette: 11.

6. Now use Spot fix tool to remove the blemishes on your face just dabble click on each spot it automatically removes the spots, uses mouse wheel to zoom in and out and hold down the Ctrl and use the Arrow keys to navigate the photo.

Remember that the size of Spot fix tool is related to the zoom level of your photo when your picture is zoomed 100% the size would be smaller than 50% zoomed.

Hope you enjoy this tutorial and feel free to comment if you faced any question related to this tutorial and didn’t forget to share it with your fellows. Enhance or edit photos.

The post How to Use Windows 10 Photos to Enhance Your Photos? appeared first on TECHNIG.

In this tutorial I will show you how to Create Anniversary Badge Inside Illustrator? this tutorial is for any one basic and advanced user, I will introduce the usage of shape tools , gradient tool to create golden gradient for our badges and many useful shortcuts and tips.

Create Anniversary Badge Inside Illustrator

lets see what we will going to create in this tutorial, I will create only one of the badges, then you can create other by yourself.

1. Open a basic RGB document, go to File > New (Ctrl+N) name your document Badge Sets and set the other option as the image bellow, click OK.

2. Pick the Rectangle tool (M) and draw a shape the size of your art board and set the stroke to non and the fill to light gray use this hex code (DBDBDB). Name your layer Background, as bellow.

3. Now create new layer and name it Badge Sets then pick the Star tool to create the main part of our badge, so to create the main body of the badge click on the art board your Star tool should be selected, an small dialog box will open and set the Radius 1: (35 mm)  Radius 2: (40 mm) Points (15).

4. Right! Now change the fill color of your badge to gradient and use these hex codes to make the badge golden, so to set all the gradient setting well follow the image bellow.

5. OK, make a copy of the badge layer (Ctrl +C) and (Ctrl + B) and set its color to dark orange (D8A607) then scale and rotate it a little bit till to give it stroke or depth. Your badge should looks like bellow.

6. Now pick the Ellipse tool to draw a circular path for our text, the circular path should be inside the badge shapes then pick the Type on a Path Tool to add the text on the path. As bellow.

7. It is time to add some stars around the badge, it is very easy to do draw an star with Star tool then go to Effect> Distort & Transform> Transform and set all the value as bellow, try to play around transform option to be familiar with Transform because it is the most wanted option of Illustrator.

8. Now go to Object> Expend Appearance and place it on top of the badge and delete some of the stars which are on top of the text, remember that when you  Expend that layer Ungroup (Shift+Ctrl+G) it two times to be able to delete some part of the layer.

9. OK, now pick the Rectangle Tool and draw a rectangle, then place your text on top that, select both and  Group it (Ctrl+G). Now go to Effect> Warp>  and set the value as bellow.

We are done! Place the ribbon on its place then see the result, and do the other badges by your self. Thank you very much for following hope you enjoy it, if you have any question please ask in comment section.

The post How To Create Anniversary Badge Inside Illustrator? 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.

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.

In this tutorial I am going to show you how to create perspective photo template using Photoshop. So in this article I we will talk about basic but important things to show all the thing you need to create and organize the group very well till your client easily can use it.

Create Perspective Photo Template Using Photoshop

Remember that when you want to create this kind of designs you should create a high rasulotion, at least it should be 2000×2000 or up. OK lets see what we will create in this article.

1. Open a new document  (2000x 1800) px, and name it whatever you like I name my document (01 Template) so naming is very important especially when you create template for clients, try give unique name for each the files.

2. OK now pick the Gradient too and use these color hex code (222222) and (c9c9c9) and set the gradient style to (Radial) and drug it from center of your document to any corner of the document till your document looks like bellow.

3. Now pick the Rectangle (U) tool and draw a shape as bellow, and make a copy of that shape then move it to the right and make another copy, move it to the left as bellow. Try to use Guides to align it better.

4. Remember that these shapes that I created are just a guide I will remove it latter, when I set the Smart Objects layers on each shape layers. Now draw another shape bigger then the old ones name it (01 Image), give it different color as bellow then rasterize it by right clicking on layer find the rastrize option, and make two copies of that layer and name one of them 02 Image & 03 Image.

5. Now select 01 Image layer and convert it to Smart Object by right clicking on layer thumbnail then hide other two layers (02 & 03 Image) so move it to the left side and scale it down make it the size of the black shape, do the same thing for layer 02 & 03 do not forget to convert the layer to smart object before re size it, as bellow.

6. Right! now delete the black shape layers, and select the 01 Image press (Ctrl+ T) then right click on the layer not on layer thumbnail and choice Perspective option then move your mouse over the left corner and click and hold it then move your mouse to the top or bottom.

Note:  If your looks to long you right click on and use Scale option to re size it.

7. Now do the same process for the 03 Image layer, try to use guides to make the right side as the left one. It is time give to our layers some layer styles and place some photos to do so dabble click on each of 01,02,03 layers it will open in new document, and apply Stroke and Inner Shadow layer style as bellow.

your layer should looks like bellow after applying the following layer styles.

8. OK now make copy of this layer which we applied layer styles and bring down the Fill percentage to 0 and name it Frame, then go to File>Place select a photo and place and fit it in your document then press (Ctrl+S)  to save. It will save in the 01 Template document, do the same steps for two other layers, finally your Template should looks like bellow. I add some reflection to it you can do it so.

I hope you enjoy this toturial, if you have any question regarded to this tutorial fell free to ask in comment section thanks for following.

Buy the full template

The post How to Create Perspective Photo Template Using Photoshop? 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.

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.