Lessons: 25Length: 3.1 hours
In this course, I’ll walk you through three projects where you will learn how to create programmatic animations, in real-world scenarios, using the GreenSock Animation Platform. You'll learn how to create an animated preloader, an SVG logo animation, and a custom content slider.
If you haven't used GreenSock before, get started with our two previous GreenSock courses:
1.Introduction
1.1Introduction00:44
1.1
Introduction
00:44
1.2GSAP Refresher09:09
1.2
GSAP Refresher
09:09
2.Project 1: Animated Preloader
2.1The Starter File07:48
2.1
The Starter File
07:48
2.2Creating a Timeline11:48
2.2
Creating a Timeline
11:48
2.3Bouncing Circles13:08
2.3
Bouncing Circles
13:08
2.4Animating the Shadows04:12
2.4
Animating the Shadows
04:12
2.5Loading Images10:50
2.5
Loading Images
10:50
2.6Preloading Multiple Images08:48
2.6
Preloading Multiple Images
08:48
2.7Animating the Preloader Off12:55
2.7
Animating the Preloader Off
12:55
2.8Revealing the Main Content05:28
2.8
Revealing the Main Content
05:28
3.Project 2: SVG Animated Logo
3.1Examining the Logo03:44
3.1
Examining the Logo
03:44
3.2Setting Up the Styles04:29
3.2
Setting Up the Styles
04:29
3.3Randomizing Position and Opacity07:29
3.3
Randomizing Position and Opacity
07:29
3.4Animating the Dots06:38
3.4
Animating the Dots
06:38
3.5Animating Paths With jQuery DrawSVG06:28
3.5
Animating Paths With jQuery DrawSVG
06:28
3.6Finishing Touches03:01
3.6
Finishing Touches
03:01
4.Project 3: GSAP Image Slider
4.1Getting Started05:21
4.1
Getting Started
05:21
4.2A Note on Slide Positioning04:59
4.2
A Note on Slide Positioning
04:59
4.3Setting Up Some Variables08:56
4.3
Setting Up Some Variables
08:56
4.4Placing the Slides05:08
4.4
Placing the Slides
05:08
4.5On Deck12:24
4.5
On Deck
12:24
4.6Setting Up the Animation Array09:53
4.6
Setting Up the Animation Array
09:53
4.7Setting Up the Animations11:36
4.7
Setting Up the Animations
11:36
4.8Creating the Button Events08:37
4.8
Creating the Button Events
08:37
5.Conclusion
5.1Final Thoughts00:46
5.1
Final Thoughts
00:46
