This repo contains notes from John Lindquist's Egghead course Create Amazing Animations With GreenSock.
These notes contain the same structure as the transcriptions, along with additional rewrites, links to resources, and personal takes on the lesson. Feel free to submit additions to these notes, but please don't remove anything (unless we messed up or misunderstood something).
Generally, there is one document for each lesson in the course. If there are related lessons, the notes will be in the same document.
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.
John Lindquist is a co-founder of egghead.io John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg. Learn more about John's story with egghead here.
- 01-Setup GreenSock As A Module With Parcel
- 02-Animate and Center an Element to a Click Event with Greensock
- 03-Rotate an Element Based on Previous Values with Greensock
- 04-Create Animation Steps with Greensock's Timeline
- 05-Pause or Resume an Animation by Checkout isActive with Greensock
- 06-Manually Control the Animation with progress in Greensock
- 07-Animate From a Variable Point with from and fromTo in GreenSock
- 08-Control and Array of Elements with the Same Animations in Greensock
- 09-Stop Animations with killTweensOf and killAll in Greensock
- 10-Animate class changes
- 11-Spin Elements in 3d with GreenSock
- 12-Control the Shared 3d Perspective of Multiple Elements with GreenSock
- 13-Loop a Tween Forever Using yoyo and Repeat with GreenSock
| emoji | explanation |
|---|---|
| 📹 | links to the course video |
| 💻 | course repository |
| ⌨️ | keyboard shortcut |
| 🤔 | additional resources |
| 👍 | good practice |
Thanks goes to these wonderful people (emoji key):
 Thomas Barrett 🖋️ |