Lessons:25Length:3.1 hours
- Overview
- Transcript
3.4 Animating the Dots
With your positions randomized, in this lesson you will use GreenSock to animate the circles back to their original position, and then fade them to their randomly selected opacities.
Related Links
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
