Bramus Van Damme

Synchronize videos, 3D-models, etc. to Scroll-Driven Animations

https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/#the-demos

With Scroll-Driven Animations it’s really easy to animate elements as they enter/exit/whatever. But what if you want to sync a video to that? Or maybe rotate a 3D-model as you scroll? With a little bit of JavaScript, it’s pretty easy to do so!

It currently requires Chrome Canary, but it's really promising! 😍

• older link:
  Thoughts from “Meet Safari for Spatial Computing”
• newer link:
  Maps Distort How We See the World

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 7 April 2023
   • animation, CSS
   • 4 reactions
   • permalink

   Chrome 113 beta adds support for @​media (update: slow) (Firefox already has it), great to remove some animations.

   But can we @​supports a @​media to use it only if supported? I don't think so.

   How do you use new @​media features progressively?

2. 

   Josh Collinsworth

   Ten tips for better CSS transitions and animations

   • Nicolas Hoizey
   • 21 March 2023
   • CSS, animation
   • 7 reactions

   users may not realize what it is about the transitions or animations on our websites and apps, but they can keenly spot the difference between good…

3. 

   Stéphanie Walter

   Enhancing User Experience With CSS Animations

   • Nicolas Hoizey
   • 26 August 2020
   • CSS, animation, transition, UX

   Another amazing resource from Stéphanie, a detailed transcript of a talk she gave for Shift Remote. With CSS and JS progress, implementing animations…

4. 

   Cassie Evans

   Creating my logo animation

   • Nicolas Hoizey
   • 30 July 2019
   • CSS, SVG, animation

   Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website: There's a few things going on…