CSS: Scrolling and Parallax

Learn how to develop and add new interactions and navigation behaviors to websites and apps by leveraging new CSS scrolling and parallax possibilities.

Introduction

• Why are scrolling animations useful?
• Using the exercises for this course
• Using GitHub Codespaces with this course

1. Simple Scrolling with CSS

• Positioning
• Pseudo classes and elements
• Display and flexbox
• Background properties
• Adding a background image
• Alternative background properties

2. Creating CSS Animations

• 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

3. Scroll-Based Animation

• 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

4. Using ScrollMagic

• Adding final HTML for animation
• Downloading and installing ScrollMagic
• Toggling classes
• Configuring your scenes

5. Tweening with GSAP

• Installing GSAP
• Adding a GSAP tween
• Easing tweens with GSAP
• Controlling animations with scroll
• Pinning elements

6. Putting It All Together

• Animating the parachute
• Adding a staggered GSAP tween

Conclusion

• Next steps