• Saturday , 22 February 2020

Apple Airpod Pro Javascript Animation Tutorial

Code Canyon



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

3d Ocean

Related Posts

31 Comments

  1. Dev Ed
    November 24, 2019 at 19:08

    Do you like the animations on Apples website?

  2. Gallexis
    November 24, 2019 at 19:08

    Это просто невероятно! Знай вас смотрят и в Украине !
    (This is just unbelievable! Know you watch in Ukraine)!

  3. KiGreen
    November 24, 2019 at 19:08

    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)?

  4. Kent Lee
    November 24, 2019 at 19:08

    I’ve been looking at the trigger element lol

  5. Day Dreamer
    November 24, 2019 at 19:08

    https://www.adidas.de/speedfactory Can you build a website like the one from Adidas?

  6. Tech Space
    November 24, 2019 at 19:08

    I swear u high af but I love it

  7. agus avendano
    November 24, 2019 at 19:08

    On my computer the effect is not visible, does anyone know why?

  8. Ahmed Shawkat
    November 24, 2019 at 19:08

    60 mb cool effect is not a good idea

  9. Parkinson's Groove
    November 24, 2019 at 19:08

    Your Intros are more confusing.. youre funny

  10. Kostas Oreopoulos
    November 24, 2019 at 19:08

    It is much easier to write (the same equation just solving for delay) delay = scroll * acc/ (1 + acc). If you graph this, as acc increases, acc/(1 + acc) -> 1. So small acc => larger delay

  11. ThomasMattOnline
    November 24, 2019 at 19:08

    I love the way you sponsor yourself for the video! hahaha made me laugh!

  12. vimal raj
    November 24, 2019 at 19:08

    Your code didn't work in Ubuntu 18.04 chrome browser. Please help me.

  13. André Roxhage
    November 24, 2019 at 19:08

    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?

  14. NixdaHD
    November 24, 2019 at 19:08

    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.

  15. Holger Schauf
    November 24, 2019 at 19:08

    Tip: you could put your showcases into git repositories like codrops (github.com/codrops)

  16. Min Tran
    November 24, 2019 at 19:08

    Is there any advanced GSAP (3) tutorials coming to your Patreon soon? I want to learn more about SVP morphing & complex timeline control.

  17. M. Ali Setia Pratama
    November 24, 2019 at 19:08

    I haven't laughed so hard watching a tutorial before. Thanks Ed :))

  18. Ryan Yao
    November 24, 2019 at 19:08

    Technically, Apple didn’t use video rather than jpgs for each frame. But good tutorial anyway.

  19. BW
    November 24, 2019 at 19:08

    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!

  20. Michele Eccher
    November 24, 2019 at 19:08

    Hi man, great tutorial, but not working from mobile Safari, there is a way to make it works on mobile? like Apple

  21. David Saint
    November 24, 2019 at 19:08

    Ahh Pirated copy of Adobe smart!

  22. Matt Delahoussaye
    November 24, 2019 at 19:08

    Thanks so much for this extremely concise tutorial! I wonder if you could explain how to have the rest of the page continue to scroll up over the playing video? Thanks

  23. Dhan Sol
    November 24, 2019 at 19:08

    Really cool effect

  24. Kell Ogbonna
    November 24, 2019 at 19:08

    Oh my gosh, you are amazing, Funny and Interesting video. I was really wondering how apple did that, thanks

  25. Talha Mehar
    November 24, 2019 at 19:08

    You've got a good sense of humor bro, I love that… 😉😉

  26. Gnawty’s Ayy De La Lmao
    November 24, 2019 at 19:08

    You're funny. And because of that, I subbed.

  27. Wong_ks
    November 24, 2019 at 19:08

    I know nothing about programming and coding but I finished the video.

  28. NIAM 007
    November 24, 2019 at 19:08

    You're so funny :v

  29. jessy ndaya
    November 24, 2019 at 19:08

    Apple juste use sprite image not a video, and they just use IntersectionObserver to Observe the scroll position, it's not simple at all, it's so hard to do , https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API

  30. Viral vEEtance
    November 24, 2019 at 19:08

    lol google did it first …https://store.google.com/ca/product/pixel_buds

  31. HappyDay
    November 24, 2019 at 19:08

    LoL I have seen tons of sides use this before. But obviously most people think it's the Idea of Apple..

Leave A Comment

You must be logged in to post a comment.