Animate 3D models and more on scroll | Unleash the power of Scroll-Driven Animations (8/10)

Channel:
Chrome for Developers
Subscribers:
751,000
Published on ● Video Link: https://www.youtube.com/watch?v=yrBbAWK6Gf8


Duration: 3:23
660 views
24

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 → https://goo.gle/sda-ep8-rotate-3d-model
Demo: 3D Shoe Explorer → https://goo.gle/4aRUyaD
Demo: Video Scroll Progress → https://goo.gle/sda-ep8-video-playback
Article: Scroll-Driven Objects → https://goo.gle/scroll-driven-objects

Check out more Scroll-Driven Animations Demos → https://goo.gle/scroll-driven-animations-demos

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

#CSS #ScrollDrivenAnimations #Animation #Chrome

Speaker: Bramus Van Damme



Other Videos By Chrome for Developers


2024-05-16The latest in Web UI (Google I/O ‘24)
2024-05-16What's new in the Web (Google I/O ‘24)
2024-05-16What's new in ChromeOS (Google I/O ‘24)
2024-05-14Reimagine the web with AI | Google I/O 2024
2024-05-14New in Chrome 125: CSS anchor positioning, Compute Pressure API and more
2024-05-09The Pile Mini Web Machine
2024-05-03ScrollSpy animations with just CSS thanks to Scroll-Driven Animations
2024-05-03Recreate Cover Flow using only CSS thanks to Scroll-Driven Animations
2024-05-03Outro | Unleash the power of Scroll-Driven Animations (10/10)
2024-05-03Scroll Velocity Detection | Unleash the power of Scroll-Driven Animations (9/10)
2024-05-03Animate 3D models and more on scroll | Unleash the power of Scroll-Driven Animations (8/10)
2024-05-03Animate elements in different directions | Unleash the power of Scroll-Driven Animations (7/10)
2024-05-03Add Scroll Shadows to a Scroll Container | Unleash the power of Scroll-Driven Animations (6/10)
2024-05-03Core Concepts: Timeline Lookup and Named TLs | Unleash the power of Scroll-Driven Animations (5/10)
2024-05-03Core Concepts: Timeline Ranges Demystified | Unleash the power of Scroll-Driven Animations (4/10)
2024-05-03Core Concepts: view() and ViewTimeline | Unleash the power of Scroll-Driven Animations (3/10)
2024-05-03Core Concepts: scroll() and ScrollTimeline | Unleash the power of Scroll-Driven Animations (2/10)
2024-05-03Introduction | Unleash the power of Scroll-Driven Animations (1/10)
2024-04-30Websocket Stream API
2024-04-26Optimizing INP: A deep dive
2024-04-25From asm.js to Wasm with Emscripten creator Alon Zakai


Tags:
Chrome
Developers
Google
Web
pr_pr: Chrome;
Type: DevByte Video ;
gds:N/A;
scroll-driven animations
animations
css
chrome
web
Scroll-Driven Animation
javascript
chrome developers
web developers
ux ui web design
front end developers