Learn Greensock, Riot and Webstorm

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

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

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

riot

Tag Options allow you to abstract your custom tag elements into reusable objects by allowing the tag-user to specify the dynamic parameters of their component.

Riot JS - Tag Options

Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

Riot JS - Getting Started with this React-like micro-library

Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

Riot JS - DOM Events

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

Riot JS - Repeating Elements with Each Attribute

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

WebStorm - Managing Imports

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

Introduction to Karma

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the *ddescriber* plugin, as well as some alternative methods for Jasmine for selectively running your tests.

Speed Testing with WebStorm and Jasmine

Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.

Riot JS - Scoped CSS and Toggled Classes

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

WebStorm - Setting Up Angular 2

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

Every tag in Riot has a lifecycle. I'll explore the three hooks: mount, update, and unmount while adding an animation feature for an existing tag. Lifecycle hooks are important for setting up, tearing down, and keeping a tag's view up to date after external logic is run.

Riot JS - Tag Life Cycle Hooks

grunt

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Topics

Instructors

Content Type