Animate Elements in Different Directions | Unleash the power of Scroll-Driven Animations (7/10)

Опубликовано 3 мая 2024, 16:01

In this seventh episode of “Unleash the Power of Scroll-Driven Animations”, show host Bramus shows how you can scroll an element in a different direction than the scrolling one.

Not only can you have columns scroll in the reverse direction, but you can also move sections along the horizontal axis as you scroll vertically.

Chapters:
0:00 - Intro
0:33 - Reverse Columns Demo: Layout CSS
1:44 - Reverse Columns Demo: Animation CSS
2:11 - Reverse Columns Demo: JavaScript
2:20 - Horizontal Section Demo: Concept
3:04 - Horizontal Section Demo: CSS
3:46 - Horizontal Section Demo: JavaScript
4:17 - Outro

Resources:
Demo: Reverse Columns (CSS) → goo.gle/3UjrUbm
Demo: Reverse Columns (JS) → goo.gle/3Wi1wBA
Demo: Horizontal Section (CSS) → goo.gle/3JBdrCJ
Demo: Horizontal Section (JS) → goo.gle/44ykp5n
Video: Timeline Ranges Demystified (Episode 4) → goo.gle/learn-scroll-driven-an...

Check out more Scroll-Driven Animations Demos → goo.gle/scroll-driven-animatio...

Watch more Unleash the Power of Scroll-Driven Animations → goo.gle/SDA
Subscribe to Chrome for Developers → goo.gle/ChromeDevs

#CSS #ScrollDrivenAnimations #Animation #chrome

Speaker: Bramus Van Damme