Recreate Cover Flow using only CSS thanks to Scroll-Driven Animations

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


Duration: 0:51
4,481 views
309

Remember the Cover Flow interface which allowed you to flick through a list of album covers while they rotated in 3D? Thanks to Scroll-Driven Animations you can now recreate this User Interface in a very performant way using only HTML and CSS!

Learn all there is to know about Scroll-Driven Animations in our free video course “Unleash the power of Scroll-Driven Animations”.

Watch more Unleash the Power of Scroll-Driven Animations → https://goo.gle/SDA


#CSS #ScrollDrivenAnimations #Animation #Chrome


Speaker: Bramus Van Damme
Products Mentioned: Google Chrome



Other Videos By Chrome for Developers


2024-05-16WebAssembly and WebGPU enhancements for faster Web AI
2024-05-16From fast loading to instant loading
2024-05-16What's new in Angular
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)


Tags:
Chrome
Developers
Google
Web
pr_pr: Chrome;
ct:Please select for shorts;
type:;
scroll-driven animations
animations
css
chrome
web
gds: yes