Apple Airpod Pro Javascript Animation Tutorial




I am excited to bring you a javascript tutorial today. I always enjoyed apples product presentation pages on their website.
One cool thing they did was they animated a sequence of pictures or video based on the users scroll.
So in this episode we are going to create a javascript animation that animates a video based on scroll just like the one on airpod pro.

All the code will be available on patreon.
FILES: https://www.patreon.com/posts/31251043

🎁Support me on Patreon for exclusive episodes, discord and more!
https://www.patreon.com/dev_ed

🛴 Follow me on:
Twitch: https://www.twitch.tv/dev_ed
Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

#javascript #programming

Original source


31 responses to “Apple Airpod Pro Javascript Animation Tutorial”

  1. Hello, dear developer! Do not prompt, why there is a problem with the scroll (played too sharply and pieces) if video (even from your example) render in video redactor (even without editing, just render)?

  2. I tried to follow the instructions but had to use
    window.addEventListener('scroll', () => {

    scrollPosition = window.scrollY / 2000;

    });
    Since my scene.on(…. didnt work.
    Now I get a huge delay and am searching for help! Anyone?

  3. Short question: I want the video starts payling when i scroll down a little bit (like this: https://jsfiddle.net/ardpz086/24/). But the problem is, that the video already starts playing when i start scrolling. I added "scrollpos = (e.scrollPos -2000) / 1000;" because the video starts at a scrollposition = 2000. Is there any way to make this more dynamic ? I dont want to write "-2000" i would like to use a variable there.

  4. Not just about good tutorials… You are one of the best YouTubers, Ed. You have a talent to hold attention and be fun. Use it, you can make much money with making online courses. It's a pleasure to follow you!

Leave a Reply