Learn JavaScript for Designers

Bring your websites to life with interactive elements using JavaScript. These tutorials are tailored to web designers and are full of practical examples and tips.

All JavaScript for Designers tutorials:

Filters

Animation

TimelineMax: Getting a Handle on Bézier Tweening

Tutorial • Intermediate

Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or...

Dennis Gaebel • 21 May 2015
Animation

Introducing ScrollMagic 2.0

Tutorial • Intermediate

If you’re desperate to generate beautiful scroll animations in your next project, then look no further. ScrollMagic is a JavaScript library to help you...

Dennis Gaebel • 19 May 2015
HTML

Native Popups and Modals With the HTML5 “dialog” Element

Tutorial • Intermediate

Many processes on the web these days require users’ full consent in order to be completed. For example, users may need to remove an account, change their...

Thoriq Firdaus • 13 May 2015
Animation

TimelineMax: Controlling Playback With addPause()

Tutorial • Intermediate

In this tutorial we’ll learn how to control animations, on demand, using a method called addPause(). Ready? Set? … slight pause … Let’s go!

Dennis Gaebel • 22 Apr 2015
HTML

The Perfect Lightbox? Using PhotoSwipe With jQuery

Tutorial • Intermediate

I recently came across a JavaScript library called PhotoSwipe, and I am truly impressed. It is a brilliant library which overlays an image or a group of...

Thoriq Firdaus • 9 Apr 2015
SVG

Adobe Illustrator’s SVG Interactivity Panel Explained

Tutorial • Beginner

In today’s tutorial we’ll take a look at a tool in Illustrator which helps authoring of SVG interactivity. It’s called–wait for it–The SVG Interactivity...

Dennis Gaebel • 3 Apr 2015
JavaScript for Designers

The Command Line for Web Design: Wrapping Up

Tutorial • Beginner

I hope you had a great time with this tutorial series, and discovered some of the incredibly useful ways the command line can be incorporated into every day...

Kezz Bracey • 1 Apr 2015
JavaScript for Designers

The Command Line for Web Design: Live Reload & BrowserSync

Tutorial • Beginner

In this lesson you'll learn how to create commands that add an extra layer of awesome to your projects, enabling live reload and browser synchronization.

Kezz Bracey • 26 Mar 2015
JavaScript for Designers

The Command Line for Web Design: Automation With Gulp

Tutorial • Beginner

In the previous tutorial we setup a project and used Grunt to watch and automatically compile Stylus and Jade. In this tutorial we’ll be doing the same, but...

Kezz Bracey • 24 Mar 2015
JavaScript for Designers

The Command Line for Web Design: Automation With Grunt

Tutorial • Beginner

In this tutorial you’ll be learning how to setup task runners and, in the process, you’ll also see an example of bringing in scripts from Bower packages for...

Kezz Bracey • 24 Mar 2015
UX Design

How to Display Update Notifications in the Browser Tab

Tutorial • Intermediate

In this tutorial, we are going to build a form of user feedback, making use of the browser tab as a medium for notifying users of updates. Let’s see how it’s...

Thoriq Firdaus • 18 Mar 2015
JavaScript for Designers

How to Install NPM and Bower

Tutorial • Beginner

In this tutorial you’ll learn how to make handling third party packages a matter of just typing a handful of two to five word commands.

Kezz Bracey • 17 Mar 2015