Author
Ray Villalobos
Released
6/24/2020Skill Level Intermediate
Duration
Views
- [Narrator] Humans are attracted to movement and adding it to your website can have a dramatic effect on the engagement of your viewers. Hey there, this is Ray Villalobos, senior staff instructor and in this course, I'm going to show you how to build all types of animations using a variety of techniques. Now this is a hands-on, practical course that shows you everything you need to know to animate elements with CSS transforms, transitions and keyframes. Plus, it helps you understand what you need to know in JavaScript to build your own custom animations or use libraries like ScrollMagic and GSAP to make things go. So if you're ready to get started, let's get moving.
-
Introduction
-
1. Simple Scrolling with CSS
-
Positioning10m 47s
-
Pseudo classes and elements6m 17s
-
Display and flexbox7m 25s
-
Background properties7m 25s
-
Adding a background image8m 23s
-
-
2. Creating CSS Animations
-
Using transform properties7m 34s
-
Using transitions to animate4m 57s
-
The animation property3m 45s
-
Magic keyframes6m 5s
-
Sequencing animations9m 11s
-
3. Scroll-Based Animation
-
Request animation frame4m 22s
-
Randomizing the appearance5m 26s
-
4. Using ScrollMagic
-
Toggling classes6m 28s
-
Configuring your scenes6m 53s
-
5. Tweening with GSAP
-
Installing GSAP2m 33s
-
Adding a GSAP tween6m 30s
-
Easing tweens with GSAP2m 41s
-
Pinning elements4m 32s
-
-
6. Putting It All Together
-
Animating the parachute7m 16s
-
-
Conclusion
-
Next steps2m 28s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Why are scrolling animations useful?