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”
Do you like the animations on Apples website?
Это просто невероятно! Знай вас смотрят и в Украине !
(This is just unbelievable! Know you watch in Ukraine)!
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)?
I’ve been looking at the trigger element lol
https://www.adidas.de/speedfactory Can you build a website like the one from Adidas?
I swear u high af but I love it
On my computer the effect is not visible, does anyone know why?
60 mb cool effect is not a good idea
Your Intros are more confusing.. youre funny
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
I love the way you sponsor yourself for the video! hahaha made me laugh!
Your code didn't work in Ubuntu 18.04 chrome browser. Please help me.
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?
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.
Tip: you could put your showcases into git repositories like codrops (github.com/codrops)
Is there any advanced GSAP (3) tutorials coming to your Patreon soon? I want to learn more about SVP morphing & complex timeline control.
I haven't laughed so hard watching a tutorial before. Thanks Ed :))
Technically, Apple didn’t use video rather than jpgs for each frame. But good tutorial anyway.
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!
Hi man, great tutorial, but not working from mobile Safari, there is a way to make it works on mobile? like Apple
Ahh Pirated copy of Adobe smart!
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
Really cool effect
Oh my gosh, you are amazing, Funny and Interesting video. I was really wondering how apple did that, thanks
You've got a good sense of humor bro, I love that… 😉😉
You're funny. And because of that, I subbed.
I know nothing about programming and coding but I finished the video.
You're so funny :v
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
lol google did it first …https://store.google.com/ca/product/pixel_buds
LoL I have seen tons of sides use this before. But obviously most people think it's the Idea of Apple..