title
Apple Airpod Pro Javascript Animation Tutorial

description
My new HTML5 & CSS3 COURSE IS OUT NOW! https://developedbyed.com/ 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. Microphones I Use Audio-Technica AT2020 - https://geni.us/Re78 (Amazon) Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon) BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon) Camera Gear Fujifilm X-T3 - https://geni.us/7IM1 (Amazon) Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon) PC Specs Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon) Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon) AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon) Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon) ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon) Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon) Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon) Logitech G305 - https://geni.us/PIjyn (Amazon) Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon) DISCLAIMERS: I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. 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/developedbyed Twitter: https://twitter.com/developedbyed Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/developedbyed/ #javascript #programming

detail
{'title': 'Apple Airpod Pro Javascript Animation Tutorial', 'heatmap': [{'end': 279.288, 'start': 252.297, 'weight': 0.789}, {'end': 1487.577, 'start': 1467.765, 'weight': 0.89}, {'end': 1785.127, 'start': 1739.759, 'weight': 1}], 'summary': "Tutorial 'apple airpod pro javascript animation' covers scroll-based animation techniques, usage of scroll magic and gsap for web animations, video animation setup, scrolling delay and easing, time conversions, frame rate calculation, and video and text animation with practical examples and code explanations.", 'chapters': [{'end': 661.457, 'segs': [{'end': 29.059, 'src': 'embed', 'start': 1.176, 'weight': 0, 'content': [{'end': 6.34, 'text': 'Excitement! You know why we are excited? Oh, good morning my gorgeous friends on the internet.', 'start': 1.176, 'duration': 5.164}, {'end': 14.046, 'text': 'In this episode, we are excited because Apple released the new AirPod, the headphone things that you put in your ears.', 'start': 6.781, 'duration': 7.265}, {'end': 15.787, 'text': 'And what they did.', 'start': 15.007, 'duration': 0.78}, {'end': 23.773, 'text': 'they released this new website and basically they had this animation that took over the world and everybody was like how did they do that?', 'start': 15.787, 'duration': 7.986}, {'end': 29.059, 'text': 'Basically, what they did check it out is when you scroll.', 'start': 24.694, 'duration': 4.365}], 'summary': 'Apple released new airpods with a captivating website animation.', 'duration': 27.883, 'max_score': 1.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1176.jpg'}, {'end': 229.872, 'src': 'embed', 'start': 176.933, 'weight': 1, 'content': [{'end': 182.881, 'text': "Okay So basically the animation that we're going to do, you can achieve it with vanilla JavaScript.", 'start': 176.933, 'duration': 5.948}, {'end': 186.425, 'text': "And I'm going to kind of show you how it's just like one little modification.", 'start': 182.941, 'duration': 3.484}, {'end': 194.965, 'text': "I'm gonna add scroll magic and GSAP just so we can animate these titles and all just to make it look similar to what Apple has.", 'start': 187.079, 'duration': 7.886}, {'end': 201.69, 'text': "So what we're gonna do is go to our best friend, Google here.", 'start': 197.987, 'duration': 3.703}, {'end': 209.756, 'text': "So we're gonna click clickety clackety here and we are getting, we want two things from here actually.", 'start': 201.71, 'duration': 8.046}, {'end': 215.24, 'text': 'We want scroll magic, which is the library that enables you to do animations on scroll.', 'start': 209.796, 'duration': 5.444}, {'end': 219.639, 'text': "So let's add it here like that.", 'start': 216.875, 'duration': 2.764}, {'end': 223.984, 'text': 'You can just copy, you can go to scroll magic and copy the script tag.', 'start': 219.679, 'duration': 4.305}, {'end': 229.872, 'text': 'Now, if you want this to work with GSAP, you can also get animation GSAP.', 'start': 224.685, 'duration': 5.187}], 'summary': 'Demonstrating animation using vanilla javascript, scroll magic, and gsap to achieve apple-like effects.', 'duration': 52.939, 'max_score': 176.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo176933.jpg'}, {'end': 279.288, 'src': 'heatmap', 'start': 252.297, 'weight': 0.789, 'content': [{'end': 255.339, 'text': "All right, so these, and then we're just gonna add GSAP.", 'start': 252.297, 'duration': 3.042}, {'end': 258.26, 'text': 'GSAP CDN, all right.', 'start': 255.519, 'duration': 2.741}, {'end': 262.222, 'text': 'Good thing no weird websites showed up there.', 'start': 259.12, 'duration': 3.102}, {'end': 265.184, 'text': 'not safe for work.', 'start': 263.243, 'duration': 1.941}, {'end': 269.545, 'text': "um so, here what we're gonna do is just get tween max.", 'start': 265.184, 'duration': 4.361}, {'end': 276.667, 'text': "okay, uh, there's also normal tween, but we we want to get the max.", 'start': 269.545, 'duration': 7.122}, {'end': 279.288, 'text': 'we want to max out our potential.', 'start': 276.667, 'duration': 2.621}], 'summary': 'Implementing gsap for animations, aiming to maximize potential.', 'duration': 26.991, 'max_score': 252.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo252297.jpg'}, {'end': 554.496, 'src': 'embed', 'start': 526.578, 'weight': 4, 'content': [{'end': 535.601, 'text': 'We can say section H1 and we can just add a padding top of like 300 pixels and we can text align this to the center,', 'start': 526.578, 'duration': 9.023}, {'end': 537.602, 'text': 'just so we have something to look at.', 'start': 535.601, 'duration': 2.001}, {'end': 540.443, 'text': "Font size, let's do 80 pixels as well.", 'start': 537.742, 'duration': 2.701}, {'end': 543.064, 'text': 'Okay, just so we have this down here.', 'start': 541.223, 'duration': 1.841}, {'end': 545.145, 'text': 'Cool, okay, so we have the video.', 'start': 543.544, 'duration': 1.601}, {'end': 547.645, 'text': 'Okay, now we can do the JavaScript part.', 'start': 545.645, 'duration': 2}, {'end': 551.267, 'text': "How do we animate this? So let's do an app.js.", 'start': 547.705, 'duration': 3.562}, {'end': 554.496, 'text': 'Okay, make sure you link it.', 'start': 552.955, 'duration': 1.541}], 'summary': 'Adjust h1 section with 300px padding top, 80px font size, and center alignment. implement javascript animation in app.js.', 'duration': 27.918, 'max_score': 526.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo526578.jpg'}], 'start': 1.176, 'title': 'Scroll-based animation techniques', 'summary': 'Covers creating scroll-based animation, implementing scroll animations with vanilla javascript, using scroll magic and gsap libraries, css styling, and javascript animation for webpage modification and manipulation.', 'chapters': [{'end': 175.191, 'start': 1.176, 'title': 'Creating scroll-based animation', 'summary': 'Discusses creating a scroll-based animation like the one used by apple for the airpod release website, with detailed steps and explanations of the process.', 'duration': 174.015, 'highlights': ["Apple's innovative scroll-based animation for new AirPod release website Apple's new website for AirPod release features a scroll-based animation that garnered attention and curiosity worldwide.", "Demonstrating creation of a similar scroll-based animation The speaker demonstrates how to create a scroll-based animation similar to Apple's, with a step-by-step guide and detailed instructions.", 'Inclusion of easing for natural movement The speaker highlights the inclusion of easing in the scroll-based animation to create a natural and fluid movement effect, enhancing the user experience.', 'Step-by-step tutorial for implementing the animation The tutorial provides a detailed step-by-step guide for implementing the scroll-based animation, including creating a new folder, naming files, and adding video sources.', 'Opportunity for further customization and additions The tutorial also mentions the opportunity for further customization and additions, such as adding more animations or sections, providing flexibility for users to enhance their creations.']}, {'end': 287.47, 'start': 176.933, 'title': 'Implementing scroll animations with vanilla javascript', 'summary': 'Demonstrates how to implement scroll animations using vanilla javascript with the addition of scroll magic and gsap libraries, along with debugging indicators for visibility and easy understanding.', 'duration': 110.537, 'highlights': ['The chapter introduces implementing scroll animations using vanilla JavaScript, Scroll Magic, and GSAP libraries.', 'The speaker advises to obtain Scroll Magic and GSAP libraries from Google and add them to the code for enabling scroll animations.', 'Debugging indicators can also be added to make everything more visible and easy to understand.']}, {'end': 661.457, 'start': 287.47, 'title': 'Css styling and javascript animation', 'summary': 'Covers css styling to modify the appearance of the webpage, including setting font families, adjusting dimensions, and positioning elements, before delving into javascript to select and manipulate elements for animation.', 'duration': 373.987, 'highlights': ['The chapter covers CSS styling, including setting font families, adjusting dimensions, and positioning elements.', 'The transcript also includes details about using JavaScript to select and manipulate elements for animation.', 'The speaker demonstrates specific CSS properties such as margin, padding, box-sizing, object-fit, and position to modify the layout and appearance of the webpage.', 'The speaker also shares code snippets for using JavaScript to select elements from the DOM using document.querySelector and intro.querySelector.']}], 'duration': 660.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1176.jpg', 'highlights': ["Apple's innovative scroll-based animation for new AirPod release website Apple's new website for AirPod release features a scroll-based animation that garnered attention and curiosity worldwide.", "Demonstrating creation of a similar scroll-based animation The speaker demonstrates how to create a scroll-based animation similar to Apple's, with a step-by-step guide and detailed instructions.", 'The chapter introduces implementing scroll animations using vanilla JavaScript, Scroll Magic, and GSAP libraries.', 'The speaker advises to obtain Scroll Magic and GSAP libraries from Google and add them to the code for enabling scroll animations.', 'The chapter covers CSS styling, including setting font families, adjusting dimensions, and positioning elements.', 'The speaker demonstrates specific CSS properties such as margin, padding, box-sizing, object-fit, and position to modify the layout and appearance of the webpage.']}, {'end': 1003.223, 'segs': [{'end': 687.315, 'src': 'embed', 'start': 662.118, 'weight': 0, 'content': [{'end': 668.162, 'text': 'Now, what we can do is we can initiate our scroll magic, scroll magic, like that.', 'start': 662.118, 'duration': 6.044}, {'end': 673.966, 'text': 'And the way this works is basically create a controller and then you attach scenes to it.', 'start': 668.862, 'duration': 5.104}, {'end': 676.167, 'text': "That doesn't make any sense, you're gonna see right now.", 'start': 674.326, 'duration': 1.841}, {'end': 678.229, 'text': "So let's create a controller.", 'start': 676.707, 'duration': 1.522}, {'end': 684.433, 'text': "We can say controller, set that equal to new scroll magic, make sure it's uppercase there, .", 'start': 678.269, 'duration': 6.164}, {'end': 687.315, 'text': 'controller I always mess it up, so I have the code right here.', 'start': 684.433, 'duration': 2.882}], 'summary': 'Initiate scroll magic by creating a controller and attaching scenes to it.', 'duration': 25.197, 'max_score': 662.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo662118.jpg'}, {'end': 953.322, 'src': 'embed', 'start': 899.574, 'weight': 3, 'content': [{'end': 904.056, 'text': 'So what I did, the duration here is I put it to 9, 000.', 'start': 899.574, 'duration': 4.482}, {'end': 906.418, 'text': 'Okay Like that.', 'start': 904.057, 'duration': 2.361}, {'end': 909.681, 'text': 'So basically there is a ton to scroll here.', 'start': 906.538, 'duration': 3.143}, {'end': 911.002, 'text': 'A ton, a ton, a ton.', 'start': 909.961, 'duration': 1.041}, {'end': 917.766, 'text': "Okay So basically throughout the whole video it's going to be animated.", 'start': 911.322, 'duration': 6.444}, {'end': 925.225, 'text': "Okay Now I'm going to move this back to zero because I want this to start instantly like that.", 'start': 917.786, 'duration': 7.439}, {'end': 926.866, 'text': 'So boom.', 'start': 925.245, 'duration': 1.621}, {'end': 927.727, 'text': "Okay We're going to scroll.", 'start': 926.946, 'duration': 0.781}, {'end': 930.709, 'text': 'Now the problem is that this stays there.', 'start': 927.747, 'duration': 2.962}, {'end': 932.35, 'text': "Okay It doesn't stay there.", 'start': 930.809, 'duration': 1.541}, {'end': 933.791, 'text': 'It kind of moves down.', 'start': 932.53, 'duration': 1.261}, {'end': 935.592, 'text': 'I want this to be pinned.', 'start': 934.251, 'duration': 1.341}, {'end': 939.834, 'text': 'So what you can do is this is very cool.', 'start': 936.192, 'duration': 3.642}, {'end': 945.718, 'text': 'You can just go down here and then you can just say set pin and then you can just add the intro.', 'start': 939.854, 'duration': 5.864}, {'end': 947.539, 'text': 'Like that.', 'start': 947.179, 'duration': 0.36}, {'end': 948.44, 'text': 'Hit save.', 'start': 947.959, 'duration': 0.481}, {'end': 953.322, 'text': 'Now if we scroll, as you can see, it stays stuck there until we scroll all the way down.', 'start': 948.98, 'duration': 4.342}], 'summary': 'Video duration set to 9,000 with pinned intro, stays stuck while scrolling.', 'duration': 53.748, 'max_score': 899.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo899574.jpg'}, {'end': 1003.223, 'src': 'embed', 'start': 971.351, 'weight': 2, 'content': [{'end': 981.559, 'text': 'Trigger hook is basically gonna be the position you wanna finish something, so unpin something or maybe start an animation or start.', 'start': 971.351, 'duration': 10.208}, {'end': 993.475, 'text': 'just add the class to something and the duration can be combined with GSAP if you want to kind of scroll and animate,', 'start': 981.559, 'duration': 11.916}, {'end': 997.418, 'text': 'or maybe you want something to trigger when you scroll down way more.', 'start': 993.475, 'duration': 3.943}, {'end': 1000.401, 'text': "Okay I hope that's clear.", 'start': 997.538, 'duration': 2.863}, {'end': 1002.302, 'text': 'I talked about it too much.', 'start': 1001.061, 'duration': 1.241}, {'end': 1003.223, 'text': "People don't care.", 'start': 1002.502, 'duration': 0.721}], 'summary': 'Trigger hook sets position to finish, trigger animation, and scrolls.', 'duration': 31.872, 'max_score': 971.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo971351.jpg'}], 'start': 662.118, 'title': 'Using scroll magic and gsap for web animations', 'summary': 'Covers usage of scroll magic to create animations, including creating a controller, attaching scenes, setting durations and trigger elements, and adding indicators for animations, along with using gsap for trigger hooks, duration, and pin positions, with examples of setting a video duration to 9,000 for a 9-second video.', 'chapters': [{'end': 875.777, 'start': 662.118, 'title': 'Scroll magic for animations', 'summary': 'Covers the usage of scroll magic to create animations, including creating a controller, attaching scenes, setting durations and trigger elements, and adding indicators to trigger animations based on pixel scrolling. it provides a practical demonstration of setting up animations using scroll magic.', 'duration': 213.659, 'highlights': ['The chapter covers the usage of Scroll Magic to create animations, including creating a controller, attaching scenes, setting durations and trigger elements, and adding indicators to trigger animations based on pixel scrolling.', 'Practical demonstration of setting up animations using Scroll Magic is provided.', 'Explanation of setting durations and trigger elements for animations is given with a visual demonstration.', 'Details about moving trigger hooks and changing trigger positions for animations are explained.']}, {'end': 1003.223, 'start': 875.777, 'title': 'Scroll trigger and duration in web animation', 'summary': 'Explains how to use trigger hooks and duration in web animation using gsap, with examples of setting duration to 9,000 for a 9-second video and setting pin positions, as well as discussing trigger hook position and its interaction with gsap.', 'duration': 127.446, 'highlights': ['The duration for a 9-second video is set to 9,000, causing the content to scroll throughout the entire video, resulting in a pinned animation.', 'Demonstrates setting pin positions to keep content fixed until scrolled to a certain point, with an example of setting it to unpin at the end of the scroll.', 'Discusses trigger hook position as the point to finish or start an animation, unpin something, or add a class, and its interaction with GSAP for scrolling and animating.']}], 'duration': 341.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo662118.jpg', 'highlights': ['Covers usage of Scroll Magic to create animations, including creating a controller, attaching scenes, setting durations and trigger elements, and adding indicators to trigger animations based on pixel scrolling.', 'Practical demonstration of setting up animations using Scroll Magic is provided.', 'Details about moving trigger hooks and changing trigger positions for animations are explained.', 'Demonstrates setting pin positions to keep content fixed until scrolled to a certain point, with an example of setting it to unpin at the end of the scroll.', 'The duration for a 9-second video is set to 9,000, causing the content to scroll throughout the entire video, resulting in a pinned animation.', 'Discusses trigger hook position as the point to finish or start an animation, unpin something, or add a class, and its interaction with GSAP for scrolling and animating.']}, {'end': 1226.335, 'segs': [{'end': 1055.863, 'src': 'embed', 'start': 1004.404, 'weight': 0, 'content': [{'end': 1006.085, 'text': "So what I'm going to do is I'm going to make it 9, 000.", 'start': 1004.404, 'duration': 1.681}, {'end': 1011.03, 'text': "This, I found that this works great for this, but it's all experimentation.", 'start': 1006.085, 'duration': 4.945}, {'end': 1014.572, 'text': "So I didn't just say, Hey, it's a 9, 000 and everything was good.", 'start': 1011.07, 'duration': 3.502}, {'end': 1020.547, 'text': "Okay So now what I wanna do is we're gonna get straight to the animation.", 'start': 1015.854, 'duration': 4.693}, {'end': 1023.388, 'text': 'So here is where we set up our scene.', 'start': 1021.147, 'duration': 2.241}, {'end': 1027.65, 'text': "I'm just gonna name this scenes and down.", 'start': 1023.568, 'duration': 4.082}, {'end': 1033.573, 'text': 'here is where we are gonna create the video animation.', 'start': 1027.65, 'duration': 5.923}, {'end': 1038.315, 'text': "okay?. So let me scroll down, and here we're gonna need a few variables.", 'start': 1033.573, 'duration': 4.742}, {'end': 1045.875, 'text': "We're gonna need something called Excel amount and I'm gonna set this to 0.1.", 'start': 1038.856, 'duration': 7.019}, {'end': 1055.863, 'text': "Now what is Excel amount? Well, what is gonna happen is when we scroll, we're basically gonna change the frame, the current frame of the video.", 'start': 1045.875, 'duration': 9.988}], 'summary': 'Experimenting with a 9,000 setting for video animation, adjusting excel amount to 0.1 for frame changes.', 'duration': 51.459, 'max_score': 1004.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1004404.jpg'}, {'end': 1112.663, 'src': 'embed', 'start': 1081.711, 'weight': 2, 'content': [{'end': 1082.771, 'text': "It's kind of like an easing.", 'start': 1081.711, 'duration': 1.06}, {'end': 1091.775, 'text': "When we scroll all of a sudden forward, the remaining frames are gonna catch up and it's gonna give that effect that it's gonna move a bit more.", 'start': 1083.131, 'duration': 8.644}, {'end': 1097.117, 'text': "So you're gonna see that you can mess around with this Excel amount to get different results.", 'start': 1092.095, 'duration': 5.022}, {'end': 1102.959, 'text': "If we're gonna put this to one, basically if we scroll fast or scroll slow, it's gonna be like this.", 'start': 1097.217, 'duration': 5.742}, {'end': 1104.74, 'text': "Okay, it's gonna stop.", 'start': 1102.979, 'duration': 1.761}, {'end': 1106.721, 'text': "As soon as you stop scrolling, it's gonna stop.", 'start': 1104.8, 'duration': 1.921}, {'end': 1112.663, 'text': "But if you put it lower, if you stop, it's still gonna go for a bit, okay? Because we're gonna have this bit of delay.", 'start': 1107.161, 'duration': 5.502}], 'summary': 'Adjusting the excel amount affects scrolling behavior, with 1 causing immediate stop and lower values causing delay.', 'duration': 30.952, 'max_score': 1081.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1081711.jpg'}, {'end': 1226.335, 'src': 'embed', 'start': 1123.384, 'weight': 3, 'content': [{'end': 1129.909, 'text': "All right, basically where we scroll, this is gonna be set to zero and we're gonna have that delay or that easing if you wanna say.", 'start': 1123.384, 'duration': 6.525}, {'end': 1131.25, 'text': "That's gonna be zero too for now.", 'start': 1129.969, 'duration': 1.281}, {'end': 1132.851, 'text': 'This is gonna be super short and simple.', 'start': 1131.31, 'duration': 1.541}, {'end': 1137.433, 'text': "Surprisingly, it's five or six more lines of code.", 'start': 1134.292, 'duration': 3.141}, {'end': 1144.535, 'text': "So what we're gonna do is on that scene that we created, scene, we actually have access to something.", 'start': 1137.893, 'duration': 6.642}, {'end': 1147.256, 'text': 'So the scene here, right? The scroll magic scene.', 'start': 1144.835, 'duration': 2.421}, {'end': 1149.077, 'text': 'We have access to something.', 'start': 1147.656, 'duration': 1.421}, {'end': 1153.238, 'text': "So we can say on, it's basically an event listener, on update.", 'start': 1149.277, 'duration': 3.961}, {'end': 1157.449, 'text': 'And here we have an E, which is an event.', 'start': 1154.388, 'duration': 3.061}, {'end': 1160.149, 'text': 'This is basically just an arrow function here.', 'start': 1158.189, 'duration': 1.96}, {'end': 1161.869, 'text': "And this is what I'm saying.", 'start': 1160.829, 'duration': 1.04}, {'end': 1167.67, 'text': 'If you wanna do this in vanilla JavaScript, you would just do a basic event listener on scroll.', 'start': 1161.949, 'duration': 5.721}, {'end': 1170.051, 'text': "That's basically the whole change.", 'start': 1168.59, 'duration': 1.461}, {'end': 1180.652, 'text': 'And here, what we can do is set that scroll position equal to, and on this event, we have access to something called scroll position.', 'start': 1172.031, 'duration': 8.621}, {'end': 1183.633, 'text': "If we console log this out, I'm gonna show you.", 'start': 1181.713, 'duration': 1.92}, {'end': 1193.272, 'text': 'scroll position, position like that, okay? And you know what? We can also uppercase this if you want.', 'start': 1184.446, 'duration': 8.826}, {'end': 1194.632, 'text': 'You can uppercase these.', 'start': 1193.592, 'duration': 1.04}, {'end': 1195.433, 'text': 'I got lazy.', 'start': 1194.812, 'duration': 0.621}, {'end': 1197.334, 'text': 'Let me uppercase these.', 'start': 1196.313, 'duration': 1.021}, {'end': 1199.175, 'text': 'There we go.', 'start': 1197.354, 'duration': 1.821}, {'end': 1200.356, 'text': 'Everything is nice now.', 'start': 1199.495, 'duration': 0.861}, {'end': 1206.58, 'text': "So actually let's leave it lowercase because I don't want you to confuse these two things.", 'start': 1200.996, 'duration': 5.584}, {'end': 1213.746, 'text': 'This is coming from scroll magic on the event, all right? So let me just console.log event here.', 'start': 1207.68, 'duration': 6.066}, {'end': 1225.615, 'text': 'So, if we take a look in the browser, if we scroll, as you can see, this event that we have from scroll, magic has a scroll position on top of it,', 'start': 1214.408, 'duration': 11.207}, {'end': 1226.335, 'text': 'as you can see there.', 'start': 1225.615, 'duration': 0.72}], 'summary': 'Using scroll magic, the code will set scroll position and update event listener, resulting in 5-6 lines of code.', 'duration': 102.951, 'max_score': 1123.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1123384.jpg'}], 'start': 1004.404, 'title': 'Video animation setup, scrolling delay and easing, and scroll magic in vanilla javascript', 'summary': 'Covers video animation setup with a frame setting of 9000, defining an excel amount variable of 0.1, scrolling delay and easing with a code example using a delay of 0.1, and introducing scroll magic in vanilla javascript to create an event listener on scroll.', 'chapters': [{'end': 1104.74, 'start': 1004.404, 'title': 'Video animation setup', 'summary': 'Explains the setup for a video animation, including experimenting with a frame setting of 9000, defining an excel amount variable of 0.1 for easing the video movement, and adjusting the excel amount to achieve different scrolling effects.', 'duration': 100.336, 'highlights': ['Experimented with a frame setting of 9000, finding it effective for the video setup.', 'Defined an Excel amount variable of 0.1 to create an easing effect for video movement.', 'Adjusted the Excel amount to achieve different scrolling effects, such as fast or slow scrolling.']}, {'end': 1144.535, 'start': 1104.8, 'title': 'Scrolling delay and easing', 'summary': 'Introduces the concept of scrolling delay and easing, demonstrating its application through code with a short and simple example, involving a delay of 0.1 and five to six lines of code.', 'duration': 39.735, 'highlights': ['The chapter introduces the concept of scrolling delay and easing, demonstrating its application through code with a short and simple example, involving a delay of 0.1 and five to six lines of code.', 'The code snippet exemplifies the setting of scroll position and the introduction of delay or easing, both set to zero initially, with a brief explanation of its functionality.']}, {'end': 1226.335, 'start': 1144.835, 'title': 'Scroll magic in vanilla javascript', 'summary': 'Introduces using scroll magic in vanilla javascript to create an event listener on scroll, allowing access to the scroll position and demonstrating how to manipulate the data.', 'duration': 81.5, 'highlights': ['Using scroll magic in vanilla JavaScript to create an event listener on scroll, providing access to the scroll position and demonstrating event handling.', 'Manipulating the scroll position data by logging it and showcasing the scroll position from the scroll magic event in the browser.', 'Demonstrating the process of setting the scroll position and uppercasing the scroll position data in the event.']}], 'duration': 221.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1004404.jpg', 'highlights': ['Experimented with a frame setting of 9000, finding it effective for the video setup.', 'Defined an Excel amount variable of 0.1 to create an easing effect for video movement.', 'Adjusted the Excel amount to achieve different scrolling effects, such as fast or slow scrolling.', 'The chapter introduces the concept of scrolling delay and easing, demonstrating its application through code with a short and simple example, involving a delay of 0.1 and five to six lines of code.', 'Using scroll magic in vanilla JavaScript to create an event listener on scroll, providing access to the scroll position and demonstrating event handling.', 'Manipulating the scroll position data by logging it and showcasing the scroll position from the scroll magic event in the browser.', 'Demonstrating the process of setting the scroll position and uppercasing the scroll position data in the event.']}, {'end': 1408.59, 'segs': [{'end': 1281.072, 'src': 'embed', 'start': 1226.716, 'weight': 2, 'content': [{'end': 1230.759, 'text': 'And basically what this does is we have the duration, which is 9, 000 pixels.', 'start': 1226.716, 'duration': 4.043}, {'end': 1238.545, 'text': 'And basically as soon as we scroll, this keeps updating all the way till we arrive at 9, 000.', 'start': 1231.38, 'duration': 7.165}, {'end': 1242.008, 'text': "So there, boom, as you can see, it's 9, 000 now.", 'start': 1238.546, 'duration': 3.462}, {'end': 1254.779, 'text': "But the problem is that this is not gonna work for us, Because I don't want this to be 9, 000, right?", 'start': 1245.191, 'duration': 9.588}, {'end': 1257.921, 'text': 'I want this to be in seconds, okay?', 'start': 1254.879, 'duration': 3.042}, {'end': 1259.102, 'text': "I don't want milliseconds.", 'start': 1257.941, 'duration': 1.161}, {'end': 1268.968, 'text': "So what I'm going to do is I'm going to divide this by 1, 000, okay? Just so I get seconds because I have duration 9, 000 milliseconds.", 'start': 1259.842, 'duration': 9.126}, {'end': 1272.891, 'text': 'And here is 9, 000 as well as soon as we scroll all the way down.', 'start': 1269.789, 'duration': 3.102}, {'end': 1275.978, 'text': 'Um, but I want to have seconds.', 'start': 1273.913, 'duration': 2.065}, {'end': 1277.582, 'text': "I'm going to divide everything by a thousand.", 'start': 1275.998, 'duration': 1.584}, {'end': 1278.084, 'text': 'All right.', 'start': 1277.602, 'duration': 0.482}, {'end': 1281.072, 'text': 'So we have nine and the video is nine seconds as well.', 'start': 1278.344, 'duration': 2.728}], 'summary': 'The duration is 9,000 pixels, which is converted to 9 seconds by dividing by 1,000.', 'duration': 54.356, 'max_score': 1226.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1226716.jpg'}, {'end': 1408.59, 'src': 'embed', 'start': 1382.962, 'weight': 0, 'content': [{'end': 1387.743, 'text': "Basically, this is gonna be so the frame rate doesn't look too bad.", 'start': 1382.962, 'duration': 4.781}, {'end': 1395.945, 'text': 'If I take 1, 000 and divide this by the frame rate of the video, which is gonna be 30, yeah, we have 33.', 'start': 1387.803, 'duration': 8.142}, {'end': 1399.727, 'text': 'All right, so I thought that this result would look good when we scroll.', 'start': 1395.945, 'duration': 3.782}, {'end': 1408.59, 'text': 'If you have like a 24 frames per second video, you can basically divide a second by 24 and then you would put it at 41.6.', 'start': 1400.807, 'duration': 7.783}], 'summary': 'Optimizing frame rate by adjusting to 33 for 30 fps and 41.6 for 24 fps.', 'duration': 25.628, 'max_score': 1382.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1382962.jpg'}], 'start': 1226.716, 'title': 'Time conversions and frame rate calculation', 'summary': 'Illustrates converting 9,000 milliseconds to 9 seconds and discusses setting a 33.3-millisecond interval in javascript, as well as frame rate calculation based on scroll position and delay.', 'chapters': [{'end': 1281.072, 'start': 1226.716, 'title': 'Converting milliseconds to seconds', 'summary': 'Demonstrates the process of converting a duration of 9,000 milliseconds to 9 seconds by dividing it by 1,000, resulting in a video duration of 9 seconds.', 'duration': 54.356, 'highlights': ['The duration is initially 9,000 pixels, which needs to be converted to seconds by dividing by 1,000, resulting in a video duration of 9 seconds.', 'As the scroll progresses, the duration updates until reaching 9,000, but the goal is to have the duration represented in seconds rather than milliseconds.']}, {'end': 1408.59, 'start': 1281.433, 'title': 'Javascript coding and frame rate calculation', 'summary': 'Discusses setting an interval in javascript to run a function every 33.3 milliseconds and explains the calculation for frame rate based on scroll position and delay.', 'duration': 127.157, 'highlights': ['The interval is set to run a function every 33.3 milliseconds, aiming for a smoother frame rate.', 'Explanation of the frame rate calculation based on scroll position and delay, ensuring a better visual experience.', "Utilizing a calculation to determine the appropriate frame rate based on the video's frame rate, such as 30 frames per second."]}], 'duration': 181.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1226716.jpg', 'highlights': ['The interval is set to run a function every 33.3 milliseconds, aiming for a smoother frame rate.', "Utilizing a calculation to determine the appropriate frame rate based on the video's frame rate, such as 30 frames per second.", 'As the scroll progresses, the duration updates until reaching 9,000, but the goal is to have the duration represented in seconds rather than milliseconds.', 'The duration is initially 9,000 pixels, which needs to be converted to seconds by dividing by 1,000, resulting in a video duration of 9 seconds.', 'Explanation of the frame rate calculation based on scroll position and delay, ensuring a better visual experience.']}, {'end': 1804.302, 'segs': [{'end': 1438.963, 'src': 'embed', 'start': 1408.59, 'weight': 0, 'content': [{'end': 1414.753, 'text': "This is what I've seen look good, but feel free to experiment with this.", 'start': 1408.59, 'duration': 6.163}, {'end': 1420.995, 'text': 'Okay, so I just want to console.log you scroll position and delay just to kind of show you what I mean by the delay catching up.', 'start': 1415.013, 'duration': 5.982}, {'end': 1423.997, 'text': 'so take a look.', 'start': 1423.036, 'duration': 0.961}, {'end': 1426.378, 'text': 'this is what we have when we scroll.', 'start': 1423.997, 'duration': 2.381}, {'end': 1429.359, 'text': "as you can see, it's nine and the.", 'start': 1426.378, 'duration': 2.981}, {'end': 1432.14, 'text': 'the delay is catching up to our scroll position.', 'start': 1429.359, 'duration': 2.781}, {'end': 1438.963, 'text': "so we, if we scroll 10 and this is catching up, let's go up zero.", 'start': 1432.14, 'duration': 6.823}], 'summary': 'Demonstrating delay catching up to scroll position in javascript.', 'duration': 30.373, 'max_score': 1408.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1408590.jpg'}, {'end': 1497.564, 'src': 'heatmap', 'start': 1467.765, 'weight': 0.89, 'content': [{'end': 1468.766, 'text': "You don't have to do anything.", 'start': 1467.765, 'duration': 1.001}, {'end': 1469.967, 'text': 'So take a look.', 'start': 1469.226, 'duration': 0.741}, {'end': 1470.788, 'text': 'Let me scroll back.', 'start': 1470.087, 'duration': 0.701}, {'end': 1473.85, 'text': 'If we start scrolling, the video starts animating.', 'start': 1470.948, 'duration': 2.902}, {'end': 1476.088, 'text': 'Okay, very cool.', 'start': 1475.367, 'duration': 0.721}, {'end': 1481.412, 'text': 'But as you can see, as soon as I stop scrolling, boom, it stops instantly.', 'start': 1476.608, 'duration': 4.804}, {'end': 1484.454, 'text': 'So if this is something you want to have, you can remove everything here.', 'start': 1481.552, 'duration': 2.902}, {'end': 1486.456, 'text': "Okay, you don't need this Excel amount.", 'start': 1484.874, 'duration': 1.582}, {'end': 1487.577, 'text': "You don't need this delay.", 'start': 1486.496, 'duration': 1.081}, {'end': 1488.898, 'text': "You don't need anything.", 'start': 1487.797, 'duration': 1.101}, {'end': 1495.483, 'text': 'But if you want to have that small easing, then you can set the video current time to the delay.', 'start': 1490.159, 'duration': 5.324}, {'end': 1497.564, 'text': 'All right, hit save.', 'start': 1495.503, 'duration': 2.061}], 'summary': 'Demonstration of instant video stop with scrolling; easing achieved by setting video current time to delay.', 'duration': 29.799, 'max_score': 1467.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1467765.jpg'}, {'end': 1515.596, 'src': 'embed', 'start': 1490.159, 'weight': 1, 'content': [{'end': 1495.483, 'text': 'But if you want to have that small easing, then you can set the video current time to the delay.', 'start': 1490.159, 'duration': 5.324}, {'end': 1497.564, 'text': 'All right, hit save.', 'start': 1495.503, 'duration': 2.061}, {'end': 1499.966, 'text': 'Now take a look when we scroll a bit and stop.', 'start': 1497.945, 'duration': 2.021}, {'end': 1503.349, 'text': 'See, it still goes for a bit, which I think just looks good.', 'start': 1500.146, 'duration': 3.203}, {'end': 1511.374, 'text': 'All right, so basically let me just go through this very quickly again.', 'start': 1507.512, 'duration': 3.862}, {'end': 1515.596, 'text': 'So we have this Excel amount, we have the scroll position.', 'start': 1511.394, 'duration': 4.202}], 'summary': 'Setting video current time to delay for small easing during scroll.', 'duration': 25.437, 'max_score': 1490.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1490159.jpg'}, {'end': 1579.849, 'src': 'embed', 'start': 1548.99, 'weight': 2, 'content': [{'end': 1556.052, 'text': "right?. Because if we go all the way down, it's 9, 000, and we divide it by 1, 000, just so we can get it in seconds.", 'start': 1548.99, 'duration': 7.062}, {'end': 1568.839, 'text': 'And then in here, we just accelerate the delay based on the scroll position minus whatever there is in delay times the Excel amount.', 'start': 1559.033, 'duration': 9.806}, {'end': 1579.849, 'text': "Okay, and now, if you wanna have like a, if you don't want this to be as powerful, you can just change up the Excel amount to maybe 0.5,", 'start': 1569.747, 'duration': 10.102}], 'summary': 'Acceleration calculation based on scroll position and delay for 9000 seconds.', 'duration': 30.859, 'max_score': 1548.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1548990.jpg'}, {'end': 1709.572, 'src': 'embed', 'start': 1672.472, 'weight': 3, 'content': [{'end': 1679.574, 'text': "I'm going to say text animation is create a animation.", 'start': 1672.472, 'duration': 7.102}, {'end': 1685.616, 'text': "I can say let const, let's do const text anim and set this equal to a twin max.", 'start': 1679.594, 'duration': 6.022}, {'end': 1688.237, 'text': 'from two.', 'start': 1687.697, 'duration': 0.54}, {'end': 1700.246, 'text': 'So I want to animate the text, the variable that we have up here, the H one and one to animate that I can put three, just like the duration.', 'start': 1688.257, 'duration': 11.989}, {'end': 1709.572, 'text': 'And then I can go from opacity one, and then you create another object opacity zero to make it go away.', 'start': 1700.846, 'duration': 8.726}], 'summary': 'Creating a text animation with a duration of 3, transitioning from opacity 1 to 0.', 'duration': 37.1, 'max_score': 1672.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1672472.jpg'}, {'end': 1785.127, 'src': 'heatmap', 'start': 1739.759, 'weight': 1, 'content': [{'end': 1742.42, 'text': 'And finally, we just add it to the controller.', 'start': 1739.759, 'duration': 2.661}, {'end': 1746.621, 'text': 'Alright, so all these things that you create, you basically add to the controller, hit save.', 'start': 1742.44, 'duration': 4.181}, {'end': 1747.961, 'text': "Let's take a look.", 'start': 1747.141, 'duration': 0.82}, {'end': 1749.022, 'text': 'And there we go.', 'start': 1748.482, 'duration': 0.54}, {'end': 1751.843, 'text': 'When we scroll, it starts fading out.', 'start': 1749.122, 'duration': 2.721}, {'end': 1755.824, 'text': 'Awesome Perfect.', 'start': 1752.463, 'duration': 3.361}, {'end': 1761.161, 'text': "And let's see if it comes back and you can basically do the same thing too.", 'start': 1757.66, 'duration': 3.501}, {'end': 1765.682, 'text': 'You can do the same thing to the last text.', 'start': 1763.381, 'duration': 2.301}, {'end': 1770.263, 'text': 'Okay Just do another scene and animate that whenever you want.', 'start': 1765.742, 'duration': 4.521}, {'end': 1772.823, 'text': 'So thank you very much for watching this episode.', 'start': 1770.463, 'duration': 2.36}, {'end': 1776.744, 'text': "Hope you enjoyed this little tutorial and also it's Halloween today.", 'start': 1772.863, 'duration': 3.881}, {'end': 1785.127, 'text': "So I'm going to go spend some time watching scary movies with my girlfriend and I I did have a costume, even though I'm not in a costume right now.", 'start': 1776.764, 'duration': 8.363}], 'summary': 'Tutorial on adding animations to the controller, achieving scroll fading effect. happy halloween!', 'duration': 45.368, 'max_score': 1739.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1739759.jpg'}, {'end': 1804.302, 'src': 'embed', 'start': 1792.173, 'weight': 4, 'content': [{'end': 1798.538, 'text': 'Please let me know what did you dress up as and leave it down in the comments and I will judge you.', 'start': 1792.173, 'duration': 6.365}, {'end': 1802.881, 'text': 'And until next time, make sure you purchase the new DevEd Pro.', 'start': 1799.158, 'duration': 3.723}, {'end': 1804.302, 'text': '$9.99 No stand included.', 'start': 1802.901, 'duration': 1.401}], 'summary': 'Encourage dressing up for judging, and promote deved pro at $9.99 with no stand included.', 'duration': 12.129, 'max_score': 1792.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1792173.jpg'}], 'start': 1408.59, 'title': 'Video and text animation', 'summary': 'Discusses using scroll position delay to animate a video, demonstrating the catching up effect, and adjusting the delay for a small easing effect. it also explains a tutorial on creating text animation using tweenmax, with a 3-second duration and opacity transition from 1 to 0, along with a recommendation to purchase deved pro for $9.99.', 'chapters': [{'end': 1637.083, 'start': 1408.59, 'title': 'Scroll position delay for video animation', 'summary': "Explains how to use scroll position delay to animate a video, demonstrating the catching up effect and the impact of adjusting the delay, with a recommendation to set the video's current time to the delay for a small easing effect.", 'duration': 228.493, 'highlights': ['The delay is catching up to our scroll position, creating a catching up effect.', "Setting the video's current time to the delay allows the video to start animating when scrolling and continue for a bit after stopping, adding a small easing effect.", 'Accelerating the delay based on the scroll position and Excel amount determines the amount of delay, with a recommendation to adjust the Excel amount for different delay strengths.', 'Adding a new scene using let instead of const resolves a bug related to conflict.']}, {'end': 1804.302, 'start': 1637.703, 'title': 'Text animation tutorial with tweenmax', 'summary': 'Explains a tutorial on creating text animation using tweenmax, with a duration of 3 seconds and opacity transition from 1 to 0, and the recommendation to purchase the new deved pro for $9.99.', 'duration': 166.599, 'highlights': ['The tutorial demonstrates creating text animation using TweenMax with a duration of 3 seconds and opacity transition from 1 to 0.', 'A recommendation is made to purchase the new DevEd Pro for $9.99.', 'The speaker mentions enjoying Halloween and watching scary movies with their girlfriend, and shares a picture of their pirate costume.']}], 'duration': 395.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wLUJ9VNzZXo/pics/wLUJ9VNzZXo1408590.jpg', 'highlights': ['The delay is catching up to our scroll position, creating a catching up effect.', "Setting the video's current time to the delay allows the video to start animating when scrolling and continue for a bit after stopping, adding a small easing effect.", 'Accelerating the delay based on the scroll position and Excel amount determines the amount of delay, with a recommendation to adjust the Excel amount for different delay strengths.', 'The tutorial demonstrates creating text animation using TweenMax with a duration of 3 seconds and opacity transition from 1 to 0.', 'A recommendation is made to purchase the new DevEd Pro for $9.99.']}], 'highlights': ['The speaker advises to obtain Scroll Magic and GSAP libraries from Google and add them to the code for enabling scroll animations.', 'The chapter introduces implementing scroll animations using vanilla JavaScript, Scroll Magic, and GSAP libraries.', 'The speaker demonstrates specific CSS properties such as margin, padding, box-sizing, object-fit, and position to modify the layout and appearance of the webpage.', 'Covers usage of Scroll Magic to create animations, including creating a controller, attaching scenes, setting durations and trigger elements, and adding indicators to trigger animations based on pixel scrolling.', 'The duration for a 9-second video is set to 9,000, causing the content to scroll throughout the entire video, resulting in a pinned animation.', 'Defined an Excel amount variable of 0.1 to create an easing effect for video movement.', 'The chapter introduces the concept of scrolling delay and easing, demonstrating its application through code with a short and simple example, involving a delay of 0.1 and five to six lines of code.', 'The interval is set to run a function every 33.3 milliseconds, aiming for a smoother frame rate.', "Utilizing a calculation to determine the appropriate frame rate based on the video's frame rate, such as 30 frames per second.", "Setting the video's current time to the delay allows the video to start animating when scrolling and continue for a bit after stopping, adding a small easing effect.", 'The tutorial demonstrates creating text animation using TweenMax with a duration of 3 seconds and opacity transition from 1 to 0.']}