Animate 3D Models and More on Scroll | Unleash the power of Scroll-Driven Animations (8/10)

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

In this eighth episode of “Unleash the Power of Scroll-Driven Animations”, show host Bramus shows how to animate external objects such as 3D models, video elements, etc. on scroll.

The trick is to use a Scroll-Driven Animation (even a dummy one), read the effect’s progress, and then map its value to the external object.

Chapters:
0:00 - Intro
0:38 - Rotating a 3D Model on scroll
1:18 - Effect progress vs Animation progress
1:49 - Rotating a 3D Model on scroll (continued)
2:25 - Advancing a video on scroll
3:03 - Outro

Resources:
Demo: Rotating 3D Robot → goo.gle/sda-ep8-rotate-3d-mode...
Demo: 3D Shoe Explorer → goo.gle/4aRUyaD
Demo: Video Scroll Progress → goo.gle/sda-ep8-video-playback
Article: Scroll-Driven Objects → goo.gle/scroll-driven-objects

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