Canvas, Colors and Curves | 02Skills

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Animating in JavaScript with GSAP

Animating Numbers with TweenLite

Intro
Download the Source Files
The GreenSock Animation Library
Setting up our source files
Choosing how to import GSAP
Animating from here to there
Creating a typewriter effect
Reusing the typewriter effect
Delaying animations
The easy way to give animations personality

The CSSPlugin

Animating CSS
Integrating the CSSPlugin
Stop hovering over me
Creating 2D animations
Moving into the 3D realm
It's flippin flipping
Transforming the origin

Building a SlideShow

The slideshow project
Creating a slideshow
Turning our slideshow to an OOP one
Making our slideshow more dynamic
Using the GSAP TextPlugin
Taking the TextPlugin for a spin
Completing the slideshow

JavaScript GSAP Plugins

Plugin pact slideshow
Introducing SVG
Animating SVG attributes
Using AttrPlugin when it doesn't work
Building a plugin engine
Exploring the DirectionalRotationPlugin
Introducing the RoundPropsPlugin
Playing with the ScrollToPlugin

Curving animations

Canvas, Colors and Curves
Working with HTML5 Canvas
Drawing in Canvas and the ColorPropsPlugin
Exploring Bezier Curves: Bezier Thru
Exploring quadratic bezier curves
When one controller is not enough: qubic curves
Rotating assets

From TweenLite to TweenMax

Intro
The easy eases roundup
Configuring eases (SteppedEase)
Configuring ElasticEase a sample
Listening to callbacks
Creating a yo-yo effect with vars and data
It's TweenMax Time

Teach online with

Canvas, Colors and Curves

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock