Overview
-
Learn how to develop and add new interactions and navigation behaviors to websites and apps by leveraging new CSS scrolling and parallax possibilities.
Syllabus
-
Introduction
- Why are scrolling animations useful?
- Using the exercises for this course
- Positioning
- Pseudo classes and elements
- Display and flexbox
- Background properties
- Adding a background image
- Alternative background properties
- Working with the transform property
- Using transform properties
- Understanding transitions
- Using transitions to animate
- The animation property
- Creating keyframes for animation
- Magic keyframes
- Sequencing animations
- Building your new monsters section
- Smooth scrolling on link clicks
- Request animation frame
- Adding classes when scrolling
- Removing the header cue when scrolling
- Parallax scrolling with JavaScript
- Determining when an object first appears
- Animating when objects enter the screen
- Randomizing the appearance
- Adding final HTML for animation
- Downloading and installing ScrollMagic
- Toggling classes
- Configuring your scenes
- Installing GSAP
- Adding a GSAP tween
- Easing tweens with GSAP
- Controlling animations with scroll
- Pinning elements
- Animating the parachute
- Adding a staggered GSAP tween
- Next steps
