Learn Greensock, Nwjs and Particle

Animations attract the eye and add a higher level of engagement for your users. But they’re not easy to set up, and they don’t always look the way they should on every browser. 

Greensock is the best platform available for creating performant, highly-customizable animations. This course will walk you through the features of Greensock, including how to:

- animate an element
- manually control an animation
- animate between CSS classes

…and more, with cross-browser support to ensure your animations look sharp everywhere.

Ultra high-performance, professional-grade HTML5 animation for the modern web

greensock

Create Amazing Animations with GreenSock

NW.js is an app runtime based on `Chromium` and `node.js`. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

nwjs

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable `<div>` container and explore some options available.

Create scrollable DOM elements with Greensock

particle

Before powering up the Particle Photon we are going to look at what each of the components are on the board.

Particle Photon Component Overview

Modern development requires modern tooling. Rather than adding GreenSock as a script to an HTML page, we're going to install GreenSock using Yarn and set up our development environment using Parcel. This will allow us to quickly iterate and test out our animation ideas. GreenSock is abbreviated as `gsap` when importing.

Setup GreenSock as a Module with Parcel

Animating an element to a click event is as simple as passing the x and y coordinates of the click event to the properties of the `TweenMax.to` call. To be able to center the element where the mouse clicks, you also need to adjust the special xPercent and yPercent properties so the element is properly offset.

Animate and Center an Element to a Click Event with GreenSock

Rotating an element with GreenSock is as simple as changing the `rotation` property using `TweenMax`. But there's also a hugely convenient trick using the `+=` or `-+` syntax as a string that allows you to adjust based on the previous value of the rotation.

Rotate an Element Based on Previous Values with GreenSock

Animations often have multiple steps. GreenSock makes this simple with the concept of a timeline where you code each point you want your element to move to. This lesson will show you how to set up a timeline as well as pause and resume the timeline animation.

Create Animation Steps with GreenSock's Timeline

You often need to pause or resume an animation based on whether or not the current animation running. The `isActive()` getter returns a boolean that provides you with that information (the opposite information can be found with using the `paused()` getter).

Pause or Resume an Animation by Checking isActive with GreenSock

GreenSock also supports the ability to animate `from` a variable point to the current point. If you think `to` starts at a static point and moves to a variable point then `from` essentially does the opposite. `fromTo` supports the scenario where both points are variables and requires passing in a "from" set of properties and a "to" set of properties.

Animate From a Variable Point with from and fromTo in GreenSock

Each animation can be moved to a specific point in time based on the `progress` setting between 0 and 1 (0% and 100%). This lesson shows how to control the progress using the scroll wheel of the mouse which can easily fast-forward or rewind through the timeline.

Manually Control the Animation with progress in GreenSock

Any GreenSock animation can accept an array of dom elements. This lesson shows you how to easily create and tween 100 divs to the same point.

Control an Array of Elements with the Same Animation in GreenSock

There are many reasons you'd want to stop an animation from running. `TweenMax` provides ways to stop a tween of a specific element or every tween currently running, we are going to look at two of them, `killTweensOf` and `killAll`. This lesson walks you through stopping a tween by clicking on a specific element or stopping every tween and forcing them all to complete.

Stop Animations with killTweensOf and killAll in GreenSock

GreenSock enables you to animate between classes defined in your stylesheets using the `className` syntax in your tween properties. This lesson walks you through using the `mouseover`/`mouseout` and `mousedown`/`mouseup` events to add and remove css classes based on the specific event.

Animate Between CSS Classes with GreenSock

GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

Spin Elements in 3d with GreenSock

By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Sometimes you want to leave an animation looping without any user interaction. This is done using the "repeat" and "yoyo" properties combined to keep the tween moving back and forth from the start properties to the end properties.

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

The `gsap.set()` tween (or animation container) is a zero-duration tween that instantly applies a property to an HTML element. In addition, there is a subtle but important difference between `opacity` and Greensock's `autoAlpha` properties. You will learn how to hide a menu on page load and also how to prevent the element from flashing on page load. This lesson contains Greensock's basic building blocks that are used to create advanced animations with UI elements.

To add the latest Greensock library to your project, go to [Greensock's website](https://greensock.com/). Fun fact: GSAP stands for Greensock Animation Platform, and their current latest version is GSAP 3!

A common programming convention for Greensock I like to follow is, if you're going to animate a property with Greensock, keep it in Greensock, otherwise, if you are not going to animate a property, keep it in your CSS.

Hide a Menu with GSAP3's set() Tween and autoAlpha Property

<p>John Lindquist speaks with Jack Doyle, the creator of Greensock. They discuss many things including the motivation behind the creation of Greensock, managing GSAP forums, and how he transitioned from Flash to Javascript.</p><p>Jack didn’t initially create Greensock to be a monetized business, but rather a helpful tool for other developers. He was working at an ad firm doing animation work, and it was there that he found the inspiration to create Greensock.</p><p>The <a href="http://robertpenner.com/easing/">Robert Penner easing equations</a> were like magic for Jack. Such simple equations that could create such cool effects were terrific. He talks about how he doesn't consider himself a math wiz in the slightest. The visual feedback that animation gives with the equations however really help him solidify the concepts.</p><p>Jack's success turning his side project into a successful business is genuinely impressive. It was a stressful time for him; he was working for the agency still at the time. People don't feel safe with a product that might lose support any day, so he goes into the security behind a financially backed product and the factors that lead to him monetizing his business.</p><p>Finally, there is a lengthy discussion on the challenges of having to maintain such a universal library that works on nearly every platform. There are a <i>*lot</i>- of edge cases. Jack also makes an effort to keep the API stable, so that questions that you find online from ten years ago can still apply to you today.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/cd292852/transcript">"Jack Doyle, creator of Greensock" Transcript</a></p><h3>Resources</h3><ul><li><a href="https://greensock.com/">Greensock</a></li><li><a href="https://greensock.com/forums/">Greensock Forums</a></li><li><a href="https://greensock.com/ease-visualizer">Greensock Ease Visualizer</a></li></ul><h3>Jack Doyle</h3><ul><li><a href="https://twitter.com/greensock?lang=en&lang=en">Twitter</a></li><li><a href="https://github.com/greensock">Github</a></li></ul><h3>John Lindquist</h3><ul><li><a href="https://twitter.com/johnlindquist?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">Twitter</a></li><li><a href="https://egghead.io/instructors/john-lindquist">egghead.io</a></li><li><a href="https://github.com/johnlindquist">Github</a></li><li><a href="https://johnlindquist.com/">Website</a></li></ul>

John Lindquist speaks with Jack Doyle, the creator of Greensock. They discuss a number of things including the motivation behind the creation of Greensock, managing GSAP forums, and how he transitioned from Flash to Javascript.

Topics

Instructors

Content Type

Free or Pro