Apple AirPod Style Animation on scroll
Hey,
Kind of a noob question, but I wondered what the best way to implement something like this animation would be.
Example: https://www.youtube.com/watch?v=hY1a94niwpY
I did some research and found multiple ways, some use image sequences others mp4s.
Just wondered how you guys would go on with this.
Thanks 🙂
Webflow
YouTube
Animate a 3D render on scroll (same technique as Apple's AirPods Pr...
Learn how to use Cinema 4D Lite (which is included for free in After Effects) to render a 3D phone as an image sequence, then import the sequence into Webflow to tie the animation to a website's scroll position.
Clone this project and download the assets to follow along:
https://wfl.io/lottie-phone
The full After Effects + Lottie in Webflow c...
4 Replies
those are good options. I don't usually deal with 3D, and mostly do Adobe AE, but the solution you mentioned and in the video makes sense 🙂
if you really wanted to be fancy and do 3D
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
+ your 3D software of choice
React Three Fiber Documentation
React Three Fiber Documentation
React-three-fiber is a React renderer for three.js
I dont know if this is still how they do it, but for some versions of apples pages they would load multiple high-definition images (split the video frame-by-frame) and change them on scroll
Definitely would recomend going R3F instead if you care to learn it, super interesing package and ecossystem
I have played around with R3F before quite a lot and used it for some client work, but I feel like the rendering quality isnt on the level I need it
I tried using lottie files, but they are really laggy so i probably will build something out myself that preloads some images
Any other ideas?
So how I did it now is basically I just load the first 15 images and depending on the scroll position display the current image from there on I just infinite load the next images to reduce the load time
Not to difficult, if anyone ever needs help with that just hmu