title
Javascript Animations - Design & Build A Website Crash Course

description
Check out my courses and become more creative! https://developedbyed.com/ 🎁Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed 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. This is the final part of the series where we will implement all the dynamic stuff with javascript. We will also we using GSAP timelinemax and tweenmax to add all the javascript animations. You can find the source files and images on patreon for free. 🛴 Follow me on: Twitter: https://twitter.com/deved94 Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/DevEdwin #javascript #animations

detail
{'title': 'Javascript Animations - Design & Build A Website Crash Course', 'heatmap': [{'end': 1084.563, 'start': 1041.945, 'weight': 1}, {'end': 1944.212, 'start': 1907.673, 'weight': 0.718}, {'end': 3563.338, 'start': 3481.687, 'weight': 0.988}], 'summary': 'Tutorial series covers web development techniques, including html updates, javascript animations using gsap, creating slide and navigation functionality, implementing scroll animations, and building javascript functions for animating a navigation menu, aiming to provide practical skills and tricks for web development projects.', 'chapters': [{'end': 93.19, 'segs': [{'end': 31.192, 'src': 'embed', 'start': 0.899, 'weight': 1, 'content': [{'end': 3.02, 'text': 'Hello there, gorgeous friends on the internet.', 'start': 0.899, 'duration': 2.121}, {'end': 5.322, 'text': 'Am I in focus? Good.', 'start': 3.381, 'duration': 1.941}, {'end': 11.926, 'text': 'You have finally arrived to the last part of the tutorial, so give yourself a hand of applause.', 'start': 5.522, 'duration': 6.404}, {'end': 14.627, 'text': 'Hand of applause.', 'start': 12.386, 'duration': 2.241}, {'end': 16.187, 'text': 'Hand of applause.', 'start': 15.128, 'duration': 1.059}, {'end': 21.171, 'text': 'And for some reason, before I started this episode, a thought came to my mind.', 'start': 16.609, 'duration': 4.562}, {'end': 31.192, 'text': "What if Michael Jackson was a web developer? Don't ask me, this is the stupidest thing ever, but I would love to imagine that happening.", 'start': 21.291, 'duration': 9.901}], 'summary': 'Final part of the tutorial, imagining michael jackson as a web developer.', 'duration': 30.293, 'max_score': 0.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE899.jpg'}, {'end': 93.19, 'src': 'embed', 'start': 45.022, 'weight': 0, 'content': [{'end': 49.685, 'text': 'And the new files are updated right now and you can check the link in the description.', 'start': 45.022, 'duration': 4.663}, {'end': 51.486, 'text': "They're gonna be on the Patreon for free.", 'start': 49.705, 'duration': 1.781}, {'end': 53.347, 'text': "so you don't have to worry about that.", 'start': 52.006, 'duration': 1.341}, {'end': 59.052, 'text': 'But I made some changes to it, updated it, and the finished product is also going to be on there.', 'start': 53.407, 'duration': 5.645}, {'end': 65.897, 'text': 'And the magic trick for today is called the two kings that are going to find your card.', 'start': 59.973, 'duration': 5.924}, {'end': 67.639, 'text': "Okay, it's not the most original name.", 'start': 65.917, 'duration': 1.722}, {'end': 72.423, 'text': "But anyway, we're going to just take out one random card here, like let's say this one.", 'start': 67.939, 'duration': 4.484}, {'end': 74.164, 'text': 'Remember it? Perfect.', 'start': 72.563, 'duration': 1.601}, {'end': 76.426, 'text': "We're going to just drop it into the deck there.", 'start': 74.224, 'duration': 2.202}, {'end': 78.707, 'text': 'Okay, no funny business.', 'start': 76.886, 'duration': 1.821}, {'end': 81.067, 'text': 'And now if we take these.', 'start': 79.247, 'duration': 1.82}, {'end': 82.087, 'text': 'It fell down to the ground.', 'start': 81.067, 'duration': 1.02}, {'end': 88.269, 'text': 'Now if we take these two kings here, all we have to do is just tap the deck like this.', 'start': 82.788, 'duration': 5.481}, {'end': 93.19, 'text': 'One, two, three, and the card goes right in between the two.', 'start': 88.789, 'duration': 4.401}], 'summary': 'Updated files available on patreon for free. demonstrates a magic trick with two kings finding a card.', 'duration': 48.168, 'max_score': 45.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE45022.jpg'}], 'start': 0.899, 'title': 'Web development tutorial: part 3', 'summary': 'Covers the final part of a web development tutorial series with updated files available for free on patreon and concludes with a magic trick involving finding a selected card.', 'chapters': [{'end': 93.19, 'start': 0.899, 'title': 'Web development tutorial: part 3', 'summary': 'Covers the final part of a web development tutorial series, with updated files available for free on patreon, and concludes with a magic trick involving finding a selected card.', 'duration': 92.291, 'highlights': ['The finished product and updated files for the web development tutorial are available for free on Patreon.', 'The chapter concludes with a magic trick involving finding a selected card.', "The tutorial series has reached its final part, with two previous parts available on the creator's channel."]}], 'duration': 92.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE899.jpg', 'highlights': ['The finished product and updated files for the web development tutorial are available for free on Patreon.', "The tutorial series has reached its final part, with two previous parts available on the creator's channel.", 'The chapter concludes with a magic trick involving finding a selected card.']}, {'end': 1217.518, 'segs': [{'end': 158.022, 'src': 'embed', 'start': 93.871, 'weight': 0, 'content': [{'end': 94.631, 'text': 'I hate this trick.', 'start': 93.871, 'duration': 0.76}, {'end': 96.912, 'text': 'Why am I even doing it? Hello, everybody.', 'start': 94.671, 'duration': 2.241}, {'end': 98.733, 'text': "Okay, let's get started.", 'start': 96.932, 'duration': 1.801}, {'end': 102.855, 'text': 'So what I have changed from the previous tutorial is not much.', 'start': 98.893, 'duration': 3.962}, {'end': 109.998, 'text': 'So at the end of the video, I told you guys that, hey, just try to just copy paste the Chef HTML and the Photo HTML.', 'start': 102.915, 'duration': 7.083}, {'end': 112.46, 'text': 'So I literally just copy pasted everything.', 'start': 110.339, 'duration': 2.121}, {'end': 117.642, 'text': 'And the only difference here is that I changed the title, the names and the pictures.', 'start': 113.04, 'duration': 4.602}, {'end': 120.924, 'text': 'Now, if you got lazy, I got you, boy.', 'start': 117.782, 'duration': 3.142}, {'end': 122.225, 'text': 'Okay, I understand.', 'start': 121.244, 'duration': 0.981}, {'end': 124.707, 'text': "the struggle because I'm lazy too.", 'start': 123.046, 'duration': 1.661}, {'end': 129.713, 'text': 'So I have the files again on the description, on the description, in the description.', 'start': 124.728, 'duration': 4.985}, {'end': 131.475, 'text': 'So you can get those.', 'start': 130.374, 'duration': 1.101}, {'end': 133.758, 'text': "Okay And that's pretty much it.", 'start': 131.716, 'duration': 2.042}, {'end': 134.899, 'text': 'We can continue.', 'start': 133.858, 'duration': 1.041}, {'end': 140.005, 'text': "So let's open up the index.html and see where we left off.", 'start': 135, 'duration': 5.005}, {'end': 141.495, 'text': 'All right.', 'start': 141.275, 'duration': 0.22}, {'end': 143.476, 'text': 'Oh, too many things open here.', 'start': 141.675, 'duration': 1.801}, {'end': 144.737, 'text': "So let's close these up.", 'start': 143.776, 'duration': 0.961}, {'end': 147.138, 'text': 'Okay So we have these pages separate for now.', 'start': 144.797, 'duration': 2.341}, {'end': 156.322, 'text': "So what we're going to do is before we get into the JavaScript animations, we are kind of going to combine these together here.", 'start': 147.538, 'duration': 8.784}, {'end': 158.022, 'text': "So it's a one page kind of thing.", 'start': 156.402, 'duration': 1.62}], 'summary': 'The speaker made minimal changes from a previous tutorial and provides files for download.', 'duration': 64.151, 'max_score': 93.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE93871.jpg'}, {'end': 979.635, 'src': 'embed', 'start': 952.925, 'weight': 1, 'content': [{'end': 962.277, 'text': 'So we need to kind of change this with JavaScript because I do need the white here on this background, but on this one, I need it to be dark.', 'start': 952.925, 'duration': 9.352}, {'end': 965.14, 'text': 'And same goes for the menu here.', 'start': 963.058, 'duration': 2.082}, {'end': 972.548, 'text': "Let's grab the menu and just add a cursor pointer to this to see if it's on top.", 'start': 966.262, 'duration': 6.286}, {'end': 975.731, 'text': "Yeah, it's there, but it's white, so we cannot see it.", 'start': 972.588, 'duration': 3.143}, {'end': 979.635, 'text': "Don't worry, we're gonna do the JavaScript animations right now.", 'start': 975.771, 'duration': 3.864}], 'summary': 'Javascript changes needed for white/dark backgrounds and cursor pointer for menu.', 'duration': 26.71, 'max_score': 952.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE952925.jpg'}, {'end': 1041.286, 'src': 'embed', 'start': 1011.293, 'weight': 3, 'content': [{'end': 1014.016, 'text': 'So I used GSAP for animations.', 'start': 1011.293, 'duration': 2.723}, {'end': 1019.1, 'text': 'So TimelineMax is for chaining different animations together.', 'start': 1015.637, 'duration': 3.463}, {'end': 1021.341, 'text': 'Twinmax actually handles the animations.', 'start': 1019.12, 'duration': 2.221}, {'end': 1024.664, 'text': "And yeah, I think that's all we're going to use.", 'start': 1022.162, 'duration': 2.502}, {'end': 1033.02, 'text': "So let's go to index.html and down here, let's actually create an app.js.", 'start': 1026.095, 'duration': 6.925}, {'end': 1035.382, 'text': 'Okay And just link this.', 'start': 1033.46, 'duration': 1.922}, {'end': 1041.286, 'text': "So right below the body above the body, we're going to add a script with the source of app.js.", 'start': 1035.422, 'duration': 5.864}], 'summary': 'Used gsap for animations, timelinemax for chaining, and twinmax for handling the animations.', 'duration': 29.993, 'max_score': 1011.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1011293.jpg'}, {'end': 1084.563, 'src': 'heatmap', 'start': 1041.945, 'weight': 1, 'content': [{'end': 1046.31, 'text': 'Okay Then we are going to explore the CDN, CDN.js.', 'start': 1041.945, 'duration': 4.365}, {'end': 1047.731, 'text': 'All right.', 'start': 1047.349, 'duration': 0.382}, {'end': 1050.272, 'text': "Clickety clackety and we're going to search for GSAP.", 'start': 1047.771, 'duration': 2.501}, {'end': 1055.076, 'text': 'Okay Full screen this big boy.', 'start': 1052.754, 'duration': 2.322}, {'end': 1061.39, 'text': "click and we're going to go here to timeline max.", 'start': 1056.348, 'duration': 5.042}, {'end': 1068.594, 'text': "We're going to copy script tag and then we're going to get the time tween max.", 'start': 1061.911, 'duration': 6.683}, {'end': 1070.975, 'text': 'This one copy script tag.', 'start': 1068.794, 'duration': 2.181}, {'end': 1078.078, 'text': "Okay I'm going to place this right on top here and hit save and that's all we need.", 'start': 1070.995, 'duration': 7.083}, {'end': 1080.84, 'text': "Okay Let's go back to our JavaScript.", 'start': 1078.679, 'duration': 2.161}, {'end': 1084.563, 'text': 'and start this thing going.', 'start': 1082.041, 'duration': 2.522}], 'summary': 'Exploring cdn.js, adding gsap to javascript for animation.', 'duration': 42.618, 'max_score': 1041.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1041944.jpg'}], 'start': 93.871, 'title': 'Html tutorial updates and combining pages', 'summary': 'Covers minimal changes in the html tutorial, focusing on copy-pasting elements and direct file access. it also details combining html pages, adding a navigation bar with javascript animations, css updates, and gsap for animations.', 'chapters': [{'end': 134.899, 'start': 93.871, 'title': 'Html tutorial update: copy-pasting with changes', 'summary': 'Discusses the minimal changes made in an html tutorial, emphasizing the ease of copying and pasting elements and offering lazy users the option to access the files directly from the description.', 'duration': 41.028, 'highlights': ['The tutorial emphasizes minimal changes made from the previous version, primarily involving copying and pasting elements with only alterations to title, names, and pictures.', 'Lazy users are catered to with the option to access the files directly from the description, acknowledging and addressing the struggle of laziness.']}, {'end': 1217.518, 'start': 135, 'title': 'Combining html pages and adding nav bar', 'summary': 'Details the process of combining separate html pages into one and adding a navigation bar with javascript animations. it also covers the css updates to position elements and the use of gsap for animations.', 'duration': 1082.518, 'highlights': ['The chapter details the process of combining separate HTML pages into one The speaker explains the process of combining separate HTML pages into one to create a single-page application, simplifying the navigation process for the user.', 'Adding a navigation bar with JavaScript animations The speaker discusses the addition of a navigation bar with JavaScript animations, allowing for interactive elements and improved user experience.', 'CSS updates to position elements and the use of GSAP for animations The chapter covers CSS updates to position elements, such as using position absolute and display grid, and the use of GSAP library for animations, enhancing the visual and interactive aspects of the web page.']}], 'duration': 1123.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE93871.jpg', 'highlights': ['The chapter details the process of combining separate HTML pages into one to create a single-page application, simplifying the navigation process for the user.', 'Adding a navigation bar with JavaScript animations allows for interactive elements and improved user experience.', 'The tutorial emphasizes minimal changes made from the previous version, primarily involving copying and pasting elements with only alterations to title, names, and pictures.', 'CSS updates to position elements, such as using position absolute and display grid, and the use of GSAP library for animations, enhance the visual and interactive aspects of the web page.', 'Lazy users are catered to with the option to access the files directly from the description, acknowledging and addressing the struggle of laziness.']}, {'end': 1688.61, 'segs': [{'end': 1248.536, 'src': 'embed', 'start': 1217.598, 'weight': 5, 'content': [{'end': 1218.458, 'text': "That's gonna be the same.", 'start': 1217.598, 'duration': 0.86}, {'end': 1221.8, 'text': 'And this one, we are gonna add a grayish color.', 'start': 1219.159, 'duration': 2.641}, {'end': 1223.941, 'text': "It's gonna be 4E4342.", 'start': 1221.84, 'duration': 2.101}, {'end': 1225.422, 'text': 'Okay, save.', 'start': 1224.262, 'duration': 1.16}, {'end': 1229.044, 'text': 'All right, so this is kind of everything we need here.', 'start': 1225.582, 'duration': 3.462}, {'end': 1236.228, 'text': "Now, what else do we need? Let's keep it like this for now.", 'start': 1229.685, 'duration': 6.543}, {'end': 1243.433, 'text': "and kind of just get the thing going with it, changing the dots, okay? That's the first step we're gonna do.", 'start': 1237.609, 'duration': 5.824}, {'end': 1245.834, 'text': "So what I'm gonna do is create a function.", 'start': 1243.713, 'duration': 2.121}, {'end': 1248.536, 'text': "Actually, let's loop over these slides.", 'start': 1246.655, 'duration': 1.881}], 'summary': 'Discussion about adding a grayish color with code 4e4342 and creating a function to loop over slides.', 'duration': 30.938, 'max_score': 1217.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1217598.jpg'}, {'end': 1303.317, 'src': 'embed', 'start': 1271.344, 'weight': 0, 'content': [{'end': 1273.445, 'text': 'So the index is zero, one, two.', 'start': 1271.344, 'duration': 2.101}, {'end': 1275.605, 'text': 'Okay Yeah.', 'start': 1273.605, 'duration': 2}, {'end': 1279.546, 'text': 'So we have access to each individual button and the index as well.', 'start': 1275.625, 'duration': 3.921}, {'end': 1284.03, 'text': 'So on each slide, I want to add an event listener.', 'start': 1280.706, 'duration': 3.324}, {'end': 1286.173, 'text': "And we're going to add a click.", 'start': 1284.811, 'duration': 1.362}, {'end': 1288.456, 'text': "And we're going to run a function here.", 'start': 1286.674, 'duration': 1.782}, {'end': 1295.184, 'text': "I'm going to add a normal, not an arrow function, because I'm going to use the keyword this and I want to make sure it's bound to the slide.", 'start': 1288.456, 'duration': 6.728}, {'end': 1303.317, 'text': "Okay And here, what I'm going to do is call something called change Let's do change dots.", 'start': 1295.204, 'duration': 8.113}], 'summary': 'Adding event listeners to each slide for button click', 'duration': 31.973, 'max_score': 1271.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1271344.jpg'}, {'end': 1428.738, 'src': 'embed', 'start': 1384.052, 'weight': 2, 'content': [{'end': 1389.578, 'text': 'All right, so we are removing all of them and then we are adding back just the one that we want.', 'start': 1384.052, 'duration': 5.526}, {'end': 1391.019, 'text': 'Boom, boom, boom.', 'start': 1390.239, 'duration': 0.78}, {'end': 1392.421, 'text': 'Very simple.', 'start': 1391.78, 'duration': 0.641}, {'end': 1397.426, 'text': 'There are other methods to do this, but I found this to be quite simple.', 'start': 1393.062, 'duration': 4.364}, {'end': 1400.831, 'text': 'Okay, so we are finished with that one.', 'start': 1398.709, 'duration': 2.122}, {'end': 1407.439, 'text': 'What we need to do now, this is gonna be a bit lengthy, is to move to the actual, to the next slide.', 'start': 1401.853, 'duration': 5.586}, {'end': 1412.865, 'text': "So to do that, we're gonna go down here and create another function.", 'start': 1408.941, 'duration': 3.924}, {'end': 1416.309, 'text': "So we're gonna say function next slide.", 'start': 1413.466, 'duration': 2.843}, {'end': 1418.852, 'text': "And we're gonna pass in something called page number.", 'start': 1416.829, 'duration': 2.023}, {'end': 1427.738, 'text': 'Now, how can we get the page number? Well, when we click here on a specific slide, we are going to call the next slide.', 'start': 1420.236, 'duration': 7.502}, {'end': 1428.738, 'text': 'All right.', 'start': 1427.758, 'duration': 0.98}], 'summary': 'Demonstrating a simple process for adding and navigating slides.', 'duration': 44.686, 'max_score': 1384.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1384052.jpg'}, {'end': 1598.842, 'src': 'embed', 'start': 1569.408, 'weight': 1, 'content': [{'end': 1576.032, 'text': "And you're gonna see why we selected both of these pages because we wanna have a point of animating in and out.", 'start': 1569.408, 'duration': 6.624}, {'end': 1579.794, 'text': 'We wanna have one page animate in and one page animate out.', 'start': 1576.552, 'duration': 3.242}, {'end': 1587.798, 'text': "And we always wanna have kind of a tracking of the page that I'm on right now and the page that I wanna go to.", 'start': 1580.094, 'duration': 7.704}, {'end': 1592.04, 'text': "um, okay, let's get the pictures.", 'start': 1589.279, 'duration': 2.761}, {'end': 1593.06, 'text': 'so const.', 'start': 1592.04, 'duration': 1.02}, {'end': 1595.241, 'text': 'next left, all right.', 'start': 1593.06, 'duration': 2.181}, {'end': 1598.842, 'text': 'so the next picture left, the left side.', 'start': 1595.241, 'duration': 3.601}], 'summary': 'Pages selected for animating in and out with tracking of current and next page.', 'duration': 29.434, 'max_score': 1569.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1569408.jpg'}], 'start': 1217.598, 'title': 'Creating slide and navigation functionality', 'summary': 'Covers creating slide functionality with a grayish color code 4e4342, looping over slides, adding event listeners, and manipulating classes. it also explains creating a function to navigate between slides by dynamically selecting page numbers and animating images based on page tracking.', 'chapters': [{'end': 1407.439, 'start': 1217.598, 'title': 'Creating slide functionality', 'summary': 'Outlines the process of creating slide functionality, including adding a grayish color with code 4e4342, looping over slides, adding event listeners, and removing and adding classes to achieve the desired effect.', 'duration': 189.841, 'highlights': ['Adding a grayish color with code 4E4342 The speaker mentions adding a grayish color with the specific code 4E4342 to the slides, providing a visual reference for the implementation.', 'Looping over slides and adding event listeners The process involves looping over slides and adding event listeners to each individual button, demonstrating the practical application of event handling in the development process.', 'Removing and adding classes to achieve the desired effect The speaker explains the process of removing and adding classes to the slides to achieve the desired visual effect, emphasizing the simplicity of the chosen approach.']}, {'end': 1688.61, 'start': 1408.941, 'title': 'Creating function for navigating slides', 'summary': 'Explains the process of creating a function to navigate between slides by dynamically selecting page numbers and animating images based on the page tracking.', 'duration': 279.669, 'highlights': ["The chapter explains the process of creating a function to navigate between slides. It details how to create a function called 'next slide' and pass in the page number to dynamically select the page number for navigation.", "The process involves dynamically selecting page numbers and animating images based on the page tracking. It involves using a tracker variable called 'current page' set to zero and updating it to track the current page. Additionally, it explains the selection and animation of images for both left and right sides of the slides.", 'The method includes the selection and animation of images for both left and right sides of the slides. The method involves selecting and animating the next and current images for both the left and right sides of the slides, ensuring that the proper images are animated in and out for each slide transition.']}], 'duration': 471.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1217598.jpg', 'highlights': ['Looping over slides and adding event listeners The process involves looping over slides and adding event listeners to each individual button, demonstrating the practical application of event handling in the development process.', 'The method includes the selection and animation of images for both left and right sides of the slides. The method involves selecting and animating the next and current images for both the left and right sides of the slides, ensuring that the proper images are animated in and out for each slide transition.', "The chapter explains the process of creating a function to navigate between slides. It details how to create a function called 'next slide' and pass in the page number to dynamically select the page number for navigation.", 'Removing and adding classes to achieve the desired effect The speaker explains the process of removing and adding classes to the slides to achieve the desired visual effect, emphasizing the simplicity of the chosen approach.', "The process involves dynamically selecting page numbers and animating images based on the page tracking. It involves using a tracker variable called 'current page' set to zero and updating it to track the current page. Additionally, it explains the selection and animation of images for both left and right sides of the slides.", 'Adding a grayish color with code 4E4342 The speaker mentions adding a grayish color with the specific code 4E4342 to the slides, providing a visual reference for the implementation.']}, {'end': 2422.288, 'segs': [{'end': 1743.901, 'src': 'embed', 'start': 1715.831, 'weight': 0, 'content': [{'end': 1721.075, 'text': "We're going to say cost portfolio like that.", 'start': 1715.831, 'duration': 5.244}, {'end': 1723.617, 'text': "And we're also going to select this one.", 'start': 1721.956, 'duration': 1.661}, {'end': 1724.999, 'text': "And I'm going to show you why.", 'start': 1723.737, 'duration': 1.262}, {'end': 1730.083, 'text': 'Query selector portfolio.', 'start': 1725.619, 'duration': 4.464}, {'end': 1731.444, 'text': 'So this is the whole page.', 'start': 1730.163, 'duration': 1.281}, {'end': 1732.525, 'text': 'Hit save.', 'start': 1732.125, 'duration': 0.4}, {'end': 1740.819, 'text': "Okay So let's add some animations and then we're kind of going to debug a few problems that we might have with this.", 'start': 1734.696, 'duration': 6.123}, {'end': 1743.901, 'text': "Uh, so what I'm going to do is create a timeline.", 'start': 1741.7, 'duration': 2.201}], 'summary': 'Creating a timeline for cost portfolio selection and debugging animations.', 'duration': 28.07, 'max_score': 1715.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1715831.jpg'}, {'end': 1855.442, 'src': 'embed', 'start': 1822.739, 'weight': 2, 'content': [{'end': 1823.839, 'text': 'Time is gonna be the same.', 'start': 1822.739, 'duration': 1.1}, {'end': 1826.24, 'text': "This one's gonna be 10%.", 'start': 1824.76, 'duration': 1.48}, {'end': 1829.762, 'text': "This one's still gonna be minus 100%.", 'start': 1826.24, 'duration': 3.522}, {'end': 1835.606, 'text': "but I'm gonna add a small, not delay, the opposite of delay you can add here.", 'start': 1829.762, 'duration': 5.844}, {'end': 1840.55, 'text': 'If you want this animation to start quicker, you can add minus equals to 0.2,', 'start': 1835.687, 'duration': 4.863}, {'end': 1847.776, 'text': 'because generally the way this works is this animation runs for 0.3 seconds and after that ends, then this starts.', 'start': 1840.55, 'duration': 7.226}, {'end': 1855.442, 'text': 'But with this, if you add this, This starts, but after 0.1 milliseconds, this starts as well.', 'start': 1848.296, 'duration': 7.146}], 'summary': 'Adjustments include 10% increase, -100% delay, and -0.2s quick start.', 'duration': 32.703, 'max_score': 1822.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1822739.jpg'}, {'end': 1944.212, 'src': 'heatmap', 'start': 1907.673, 'weight': 0.718, 'content': [{'end': 1909.875, 'text': 'For some reason, see, I kind of messed it up here.', 'start': 1907.673, 'duration': 2.202}, {'end': 1913.518, 'text': 'Make sure to contain it in this next slide.', 'start': 1910.916, 'duration': 2.602}, {'end': 1915.019, 'text': 'Hit save.', 'start': 1913.538, 'duration': 1.481}, {'end': 1916.881, 'text': "Okay, let's take a look.", 'start': 1915.96, 'duration': 0.921}, {'end': 1919.163, 'text': "Boom All right, so that's what we have.", 'start': 1917.401, 'duration': 1.762}, {'end': 1921.605, 'text': 'And nothing is coming down, unfortunately.', 'start': 1919.963, 'duration': 1.642}, {'end': 1926.068, 'text': "Oh, it doesn't work properly, but that's fine.", 'start': 1921.745, 'duration': 4.323}, {'end': 1933.926, 'text': "Next, what I want to do, I'm going to remove the last semicolon here because for some reason it adds it.", 'start': 1927.142, 'duration': 6.784}, {'end': 1937.648, 'text': "Okay, let's remove it.", 'start': 1936.707, 'duration': 0.941}, {'end': 1940.089, 'text': "I'm going to chain another from two.", 'start': 1938.068, 'duration': 2.021}, {'end': 1942.471, 'text': "Actually, let's change the background.", 'start': 1940.91, 'duration': 1.561}, {'end': 1944.212, 'text': "I'm just going to say two for this one.", 'start': 1942.691, 'duration': 1.521}], 'summary': 'The speaker encountered issues with the code, made adjustments, and changed the background to value two.', 'duration': 36.539, 'max_score': 1907.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1907673.jpg'}, {'end': 2070.29, 'src': 'embed', 'start': 1995.942, 'weight': 1, 'content': [{'end': 2000.123, 'text': "So I'm gonna create a from two and we're gonna get the current page.", 'start': 1995.942, 'duration': 4.181}, {'end': 2004.465, 'text': "All right, we're gonna add a 0.3 seconds to this as well.", 'start': 2000.143, 'duration': 4.322}, {'end': 2011.007, 'text': "I'm gonna change the opacity from one all the way to zero.", 'start': 2004.485, 'duration': 6.522}, {'end': 2016.818, 'text': "Now I'm also gonna add the pointer events like this from all to none.", 'start': 2011.067, 'duration': 5.751}, {'end': 2021.621, 'text': "So we can not click the page that's fading out.", 'start': 2017.178, 'duration': 4.443}, {'end': 2028.745, 'text': "Opacity zero, and we're going to add pointer events to none.", 'start': 2022.601, 'duration': 6.144}, {'end': 2029.786, 'text': 'Hit save.', 'start': 2029.265, 'duration': 0.521}, {'end': 2032.467, 'text': "Let's take a look.", 'start': 2031.787, 'duration': 0.68}, {'end': 2034.989, 'text': 'All right.', 'start': 2034.789, 'duration': 0.2}, {'end': 2036.27, 'text': 'So everything fades out.', 'start': 2035.009, 'duration': 1.261}, {'end': 2037.25, 'text': 'The text.', 'start': 2036.79, 'duration': 0.46}, {'end': 2043.062, 'text': 'Perfect Okay.', 'start': 2039.412, 'duration': 3.65}, {'end': 2044.784, 'text': "So that's what we have.", 'start': 2043.683, 'duration': 1.101}, {'end': 2047.566, 'text': 'And now what I want to do is just get the next page back.', 'start': 2045.024, 'duration': 2.542}, {'end': 2053.37, 'text': "So the from two, we're going to say next page, 0.3 seconds.", 'start': 2047.806, 'duration': 5.564}, {'end': 2059.574, 'text': "Again, I'm going to change the opacity from zero and the pointer events from none.", 'start': 2053.429, 'duration': 6.145}, {'end': 2067.027, 'text': 'all the way to, you can, uh, you know what? We could have copy pasted this.', 'start': 2062.205, 'duration': 4.822}, {'end': 2068.989, 'text': 'Oh goodness.', 'start': 2068.208, 'duration': 0.781}, {'end': 2070.29, 'text': 'Hit paste.', 'start': 2069.63, 'duration': 0.66}], 'summary': 'Creating transition effects with 0.3s delay and opacity from 1 to 0.', 'duration': 74.348, 'max_score': 1995.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1995942.jpg'}], 'start': 1688.83, 'title': 'Javascript and gsap animations', 'summary': "Covers setting up animations in javascript using 'timeline from 2' and gsap to animate elements, encountering and debugging issues, and making adjustments to the animation timing. it also discusses animating background images, page transitions, and text elements involving opacity, pointer events, delays, and image transitions.", 'chapters': [{'end': 1940.089, 'start': 1688.83, 'title': 'Javascript animation debugging', 'summary': "Covers setting up animations in javascript using 'timeline from 2' to animate elements on a webpage, encountering and debugging issues, and making adjustments to the animation timing.", 'duration': 251.259, 'highlights': ["The chapter covers setting up animations in JavaScript using 'timeline from 2' to animate elements on a webpage, encountering and debugging issues, and making adjustments to the animation timing.", "The speaker explains the process of creating a timeline and adding animations to it, with a focus on using 'timeline from 2' to define starting and ending values for the animation.", 'The speaker encounters issues with the animation not working as expected and proceeds to debug by checking for errors and making adjustments to the code.', 'The speaker demonstrates making adjustments to the animation timing by adding a delay to control when the animations start, in order to address issues with the animation not functioning properly.']}, {'end': 2422.288, 'start': 1940.91, 'title': 'Animating background and page transitions', 'summary': 'Discusses the animation of background images, page transitions, and text elements using gsap, involving opacity, pointer events, delays, and image transitions.', 'duration': 481.378, 'highlights': ['The chapter covers animating background images, transitioning between pages, and fading text elements, using GSAP to manipulate opacity, pointer events, and delays.', 'The tutorial involves changing the opacity and pointer events of the current and next pages, with a specific focus on smooth transitions and avoiding rendering issues.', 'The transcript details the process of animating background images and handling page transitions by adjusting opacity, pointer events, and image positions, along with addressing rendering issues and hover state problems.', "The speaker provides a quick solution to fix hover state problems after animation using GSAP by adding a 'clear props' object to the elements involved."]}], 'duration': 733.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE1688830.jpg', 'highlights': ["The chapter covers setting up animations in JavaScript using 'timeline from 2' to animate elements on a webpage, encountering and debugging issues, and making adjustments to the animation timing.", 'The chapter covers animating background images, transitioning between pages, and fading text elements, using GSAP to manipulate opacity, pointer events, and delays.', 'The speaker demonstrates making adjustments to the animation timing by adding a delay to control when the animations start, in order to address issues with the animation not functioning properly.', 'The tutorial involves changing the opacity and pointer events of the current and next pages, with a specific focus on smooth transitions and avoiding rendering issues.']}, {'end': 3006.713, 'segs': [{'end': 2489.885, 'src': 'embed', 'start': 2443.335, 'weight': 1, 'content': [{'end': 2452.705, 'text': 'What you can do is you can create a document dot add event listener, and you can use the wheel, not the scroll.', 'start': 2443.335, 'duration': 9.37}, {'end': 2458.09, 'text': "Why? Because we don't have a scroll bar here because this is a full page app.", 'start': 2453.225, 'duration': 4.865}, {'end': 2459.011, 'text': "Scroll doesn't work.", 'start': 2458.13, 'duration': 0.881}, {'end': 2463.936, 'text': "But if you add a wheel, this detects your scroll, even though you don't have a scroll bar.", 'start': 2459.231, 'duration': 4.705}, {'end': 2469.611, 'text': 'And I have a throttle function here that you can find.', 'start': 2466.208, 'duration': 3.403}, {'end': 2474.954, 'text': "I'm just gonna copy paste this one so it doesn't take too much time for us to write.", 'start': 2470.471, 'duration': 4.483}, {'end': 2482.139, 'text': "But if you're interested, I'm gonna add it just right outside here, okay? Just a simple throttle function.", 'start': 2475.014, 'duration': 7.125}, {'end': 2486.242, 'text': 'You can copy paste this or you can search on the internet for it.', 'start': 2482.159, 'duration': 4.083}, {'end': 2487.583, 'text': "You're gonna find it very easily.", 'start': 2486.262, 'duration': 1.321}, {'end': 2489.885, 'text': "Or it's gonna be in my source files anywhere.", 'start': 2487.683, 'duration': 2.202}], 'summary': "Use 'wheel' event listener instead of 'scroll' due to full page app limitations.", 'duration': 46.55, 'max_score': 2443.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2443335.jpg'}, {'end': 2542.902, 'src': 'embed', 'start': 2514.769, 'weight': 2, 'content': [{'end': 2519.69, 'text': 'We want the animation to kind of finish or just take a bit longer for the animation to start.', 'start': 2514.769, 'duration': 4.921}, {'end': 2533.576, 'text': "So what this is gonna do is it's gonna basically throttle your wheel and it's only gonna work one time every 1.5 seconds, all right, or 1,", 'start': 2519.71, 'duration': 13.866}, {'end': 2534.217, 'text': '500 milliseconds.', 'start': 2533.576, 'duration': 0.641}, {'end': 2536.518, 'text': "So that's all that does.", 'start': 2535.417, 'duration': 1.101}, {'end': 2542.902, 'text': 'And let me just quickly throw this together for you to kind of show you the idea behind this.', 'start': 2537.379, 'duration': 5.523}], 'summary': 'The animation will be throttled to work once every 1.5 seconds, or 1500 milliseconds.', 'duration': 28.133, 'max_score': 2514.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2514769.jpg'}, {'end': 2654.117, 'src': 'embed', 'start': 2627.844, 'weight': 0, 'content': [{'end': 2633.368, 'text': 'So down here, what we can do is say scroll slide is plus equals to one.', 'start': 2627.844, 'duration': 5.524}, {'end': 2634.69, 'text': 'All right.', 'start': 2633.389, 'duration': 1.301}, {'end': 2641.876, 'text': "So we're incrementing that else we can say scroll slide minus equals one.", 'start': 2634.71, 'duration': 7.166}, {'end': 2647.813, 'text': 'Okay Now we also need to detect if the user scrolled past.', 'start': 2644.011, 'duration': 3.802}, {'end': 2648.234, 'text': 'All right.', 'start': 2648.034, 'duration': 0.2}, {'end': 2651.776, 'text': 'We cannot scroll past zero or above two.', 'start': 2648.274, 'duration': 3.502}, {'end': 2654.117, 'text': 'So we need to do a check there as well.', 'start': 2651.976, 'duration': 2.141}], 'summary': 'Code adjusts scroll position and detects scrolling limits.', 'duration': 26.273, 'max_score': 2627.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2627844.jpg'}, {'end': 2775.422, 'src': 'embed', 'start': 2744.843, 'weight': 3, 'content': [{'end': 2747.924, 'text': 'So we need to create a separate function for this.', 'start': 2744.843, 'duration': 3.081}, {'end': 2751.106, 'text': "So up above here, I'm going to do it up here.", 'start': 2748.164, 'duration': 2.942}, {'end': 2754.528, 'text': 'This is going to be very simple and fast.', 'start': 2751.126, 'duration': 3.402}, {'end': 2760.372, 'text': 'We can create a function called switch dots and add the dot number.', 'start': 2755.229, 'duration': 5.143}, {'end': 2762.253, 'text': 'All right.', 'start': 2762.033, 'duration': 0.22}, {'end': 2764.874, 'text': 'So the number of dots that we want to navigate to.', 'start': 2762.273, 'duration': 2.601}, {'end': 2775.422, 'text': "And I'm just going to say const active dot and set that equal to document dot query selector, we're going to select the slide.", 'start': 2765.535, 'duration': 9.887}], 'summary': 'Create a function called switch dots to navigate to a set number of dots for slides.', 'duration': 30.579, 'max_score': 2744.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2744843.jpg'}, {'end': 2959.24, 'src': 'embed', 'start': 2936.088, 'weight': 6, 'content': [{'end': 2944.212, 'text': 'We can loop over these and just say slide.style.pointerEvents equal to none.', 'start': 2936.088, 'duration': 8.124}, {'end': 2948.234, 'text': 'So basically we are removing the ability to click on them.', 'start': 2944.392, 'duration': 3.842}, {'end': 2953.897, 'text': 'And then after on this onStart, add a comma and say onComplete.', 'start': 2949.155, 'duration': 4.742}, {'end': 2959.24, 'text': 'And here, when the animation completes, we can run another function and we can just add it back.', 'start': 2954.257, 'duration': 4.983}], 'summary': 'Code disables click events, triggers animation, and re-enables click events.', 'duration': 23.152, 'max_score': 2936.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2936088.jpg'}], 'start': 2422.288, 'title': 'Implementing scroll animations and slide navigation', 'summary': 'Covers implementing a wheel event listener to animate scrolling with a throttle function, implementing a scroll tracking function for accurate slide transitions, and creating a function for navigating slides, achieving seamless user experience in a full page app.', 'chapters': [{'end': 2542.902, 'start': 2422.288, 'title': 'Animating scrolling with event listener', 'summary': 'Discusses how to use a wheel event listener to animate scrolling in a full page app, including a throttle function that limits the animation to occur only once every 1.5 seconds.', 'duration': 120.614, 'highlights': ['Using a wheel event listener to detect scroll in a full page app The chapter explains using a wheel event listener to detect scroll in a full page app where a scroll bar is not present, allowing for smooth scrolling without relying on traditional scroll bars.', 'Implementing a throttle function to limit animation frequency It describes implementing a throttle function to limit the frequency of the scrolling animation, ensuring it occurs only once every 1.5 seconds, thereby enhancing user experience by preventing rapid and jarring animations.', 'Demonstrating the concept with a throttle function example The speaker demonstrates the concept by providing a throttle function example that can be easily copied or found online, showcasing practical implementation and encouraging further exploration for interested individuals.']}, {'end': 2744.742, 'start': 2542.922, 'title': 'Scroll tracking function implementation', 'summary': 'Details the implementation of a scroll tracking function, monitoring user scroll behavior and determining slide transitions based on scroll direction and limits, achieving accurate slide transitions with console log events and conditional checks.', 'duration': 201.82, 'highlights': ['The scroll change function is created to monitor user scroll behavior and determine slide transitions based on scroll direction and limits, achieving accurate slide transitions with console log events and conditional checks.', 'The function increments the scroll slide when the user scrolls down and decrements it when the user scrolls up, ensuring accurate slide transition tracking.', 'Conditional checks are implemented to ensure that the scroll slide remains within the defined limits of 0 and 2, triggering a reset to the first slide if the limit is exceeded and setting the slide to the last one if the user scrolls below the limit.']}, {'end': 3006.713, 'start': 2744.843, 'title': 'Creating function for navigating slides', 'summary': 'Outlines the process of creating a function for navigating slides, including selecting specific elements, updating scroll slides, and implementing functions to disable slide clicking during animation.', 'duration': 261.87, 'highlights': ["The chapter explains the creation of a function called 'switch dots' for navigating to a specific slide, enhancing the navigation process.", 'It discusses the issue of separate elements breaking the functionality and proposes updating the scroll slide to the clicked index to resolve it.', 'It demonstrates the use of GSAP functions to disable slide clicking during animation and re-enable it after the animation completes, enhancing user experience.']}], 'duration': 584.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE2422288.jpg', 'highlights': ['Creating a scroll tracking function for accurate slide transitions based on scroll direction and limits', 'Implementing a wheel event listener to detect scroll in a full page app without traditional scroll bars', 'Implementing a throttle function to limit scrolling animation frequency to once every 1.5 seconds', "Creating a function 'switch dots' for seamless navigation to a specific slide", 'Using conditional checks to ensure accurate slide transition tracking within defined limits', 'Demonstrating practical implementation of throttle function with an easily accessible example', 'Utilizing GSAP functions to enhance user experience by disabling slide clicking during animation']}, {'end': 3591.458, 'segs': [{'end': 3059.907, 'src': 'embed', 'start': 3032.554, 'weight': 1, 'content': [{'end': 3037.236, 'text': "like that and say document query selector, and we're going to select the menu.", 'start': 3032.554, 'duration': 4.682}, {'end': 3037.696, 'text': 'All right.', 'start': 3037.496, 'duration': 0.2}, {'end': 3039.377, 'text': 'So this is what that thing is called.', 'start': 3037.756, 'duration': 1.621}, {'end': 3042.758, 'text': 'Why is this grayed out? Hmm.', 'start': 3039.637, 'duration': 3.121}, {'end': 3044.379, 'text': "That's strange.", 'start': 3043.818, 'duration': 0.561}, {'end': 3048.42, 'text': "Okay Uh, we're going to get the hamburger lines.", 'start': 3045.199, 'duration': 3.221}, {'end': 3051.962, 'text': "We're going to say document query selector.", 'start': 3049.501, 'duration': 2.461}, {'end': 3057.664, 'text': "We're going to get all, and we're going to say menu line.", 'start': 3053.462, 'duration': 4.202}, {'end': 3059.907, 'text': "That's two.", 'start': 3059.266, 'duration': 0.641}], 'summary': 'Transcript: selecting menu using document query selector.', 'duration': 27.353, 'max_score': 3032.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE3032554.jpg'}, {'end': 3124.12, 'src': 'embed', 'start': 3090.19, 'weight': 2, 'content': [{'end': 3095.652, 'text': "Okay And we're gonna get the logo, because we do need to change the color to black.", 'start': 3090.19, 'duration': 5.462}, {'end': 3099.233, 'text': 'All right, logo.', 'start': 3098.453, 'duration': 0.78}, {'end': 3101.114, 'text': 'Like that.', 'start': 3099.253, 'duration': 1.861}, {'end': 3104.575, 'text': "And then we're gonna do.", 'start': 3102.094, 'duration': 2.481}, {'end': 3106.216, 'text': "Hey, I think that's gonna be it.", 'start': 3104.575, 'duration': 1.641}, {'end': 3108.917, 'text': 'Okay, so here we can create another timeline.', 'start': 3106.236, 'duration': 2.681}, {'end': 3112.619, 'text': 'Const TL is new timeline max.', 'start': 3109.317, 'duration': 3.302}, {'end': 3119.519, 'text': 'Now, what I want to do is actually add a paused, an object here with a paused to true.', 'start': 3113.658, 'duration': 5.861}, {'end': 3121.9, 'text': 'All right.', 'start': 3121.54, 'duration': 0.36}, {'end': 3124.12, 'text': "And we're going to keep it like that for now.", 'start': 3121.92, 'duration': 2.2}], 'summary': 'Changing logo color to black and creating a new timeline with a paused object set to true.', 'duration': 33.93, 'max_score': 3090.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE3090190.jpg'}, {'end': 3254.839, 'src': 'embed', 'start': 3218.587, 'weight': 0, 'content': [{'end': 3219.687, 'text': 'We need to add a click event.', 'start': 3218.587, 'duration': 1.1}, {'end': 3227.192, 'text': 'Okay, so the way we can do this, so it kind of acts like a toggle, is this is quite cool.', 'start': 3220.488, 'duration': 6.704}, {'end': 3238.859, 'text': 'We can just go down here and we can say hamburger.addEventListener.', 'start': 3229.493, 'duration': 9.366}, {'end': 3245.233, 'text': "So when we click on the hamburger on click, We can just run a arrow function, that's fine.", 'start': 3238.959, 'duration': 6.274}, {'end': 3251.257, 'text': "And what I'm gonna say is TL, so the timeline that we have up here, reversed.", 'start': 3246.874, 'duration': 4.383}, {'end': 3254.839, 'text': 'Reversed, like that.', 'start': 3253.138, 'duration': 1.701}], 'summary': 'Adding a click event for hamburger to reverse timeline.', 'duration': 36.252, 'max_score': 3218.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE3218587.jpg'}, {'end': 3581.069, 'src': 'heatmap', 'start': 3481.687, 'weight': 4, 'content': [{'end': 3492.944, 'text': 'Alright Alright, so I do want this to Reversed.', 'start': 3481.687, 'duration': 11.257}, {'end': 3497.145, 'text': 'Hmm Contemplation, contemplation.', 'start': 3493.964, 'duration': 3.181}, {'end': 3498.805, 'text': "Okay I'm stupid.", 'start': 3497.165, 'duration': 1.64}, {'end': 3501.546, 'text': 'So this kind of just gives you back the value.', 'start': 3499.286, 'duration': 2.26}, {'end': 3502.046, 'text': 'All right.', 'start': 3501.566, 'duration': 0.48}, {'end': 3506.527, 'text': 'Is it reversed, false or true? I called reversed here again.', 'start': 3502.166, 'duration': 4.361}, {'end': 3508.047, 'text': 'What you need to do is call reverse.', 'start': 3506.627, 'duration': 1.42}, {'end': 3510.148, 'text': 'This actually reverses the animation.', 'start': 3508.208, 'duration': 1.94}, {'end': 3512.688, 'text': 'Oh, Jesus.', 'start': 3512.148, 'duration': 0.54}, {'end': 3513.549, 'text': 'Hit save.', 'start': 3513.029, 'duration': 0.52}, {'end': 3514.809, 'text': 'Pray for the gods.', 'start': 3514.029, 'duration': 0.78}, {'end': 3516.953, 'text': "Let's see.", 'start': 3516.533, 'duration': 0.42}, {'end': 3519.115, 'text': "Boom Let's go.", 'start': 3517.374, 'duration': 1.741}, {'end': 3521.196, 'text': 'Boom All right.', 'start': 3519.135, 'duration': 2.061}, {'end': 3523.738, 'text': 'Congratulations, young gentlemen.', 'start': 3521.516, 'duration': 2.222}, {'end': 3526.86, 'text': 'Hope you enjoy this one.', 'start': 3525.519, 'duration': 1.341}, {'end': 3533.245, 'text': "And yeah, I'm going to add a few changes, do some bug fixes, and I'm just going to upload the code now.", 'start': 3527.661, 'duration': 5.584}, {'end': 3536.667, 'text': 'If you want to contribute to it, feel free to do it.', 'start': 3533.305, 'duration': 3.362}, {'end': 3542.831, 'text': 'And yeah, put it in your projects, put it anywhere you want.', 'start': 3538.869, 'duration': 3.962}, {'end': 3545.233, 'text': "And I'm proud of you for real.", 'start': 3543.572, 'duration': 1.661}, {'end': 3546.67, 'text': 'All right everybody.', 'start': 3546.01, 'duration': 0.66}, {'end': 3552.813, 'text': 'thank you again so much for watching these episodes and hopefully this kind of fulfills your web development needs.', 'start': 3546.67, 'duration': 6.143}, {'end': 3557.155, 'text': "okay?. Building out a larger project, which we haven't done on this channel so far.", 'start': 3552.813, 'duration': 4.342}, {'end': 3563.338, 'text': "We've done like bits and pieces of different techniques and tricks, and maybe a simple landing page,", 'start': 3557.235, 'duration': 6.103}, {'end': 3567.219, 'text': 'but definitely not the full website from beginning to scratch.', 'start': 3563.338, 'duration': 3.881}, {'end': 3570.441, 'text': 'I did this the first part too, from scratch to finish.', 'start': 3567.539, 'duration': 2.902}, {'end': 3572.642, 'text': 'okay, all right.', 'start': 3571.221, 'duration': 1.421}, {'end': 3576.485, 'text': "so i learned a lot and i'm gonna apply it to my future projects.", 'start': 3572.642, 'duration': 3.843}, {'end': 3581.069, 'text': 'so everything is hopefully gonna be better looking and everything.', 'start': 3576.485, 'duration': 4.584}], 'summary': 'Developer completes animation reversal, encourages contribution to project, and plans future improvements.', 'duration': 47.764, 'max_score': 3481.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE3481687.jpg'}], 'start': 3007.133, 'title': 'Javascript functions and animations', 'summary': 'Discusses creating javascript functions for selecting elements and implementing animations using timeline max, focusing on event listeners and query selectors with specific time durations and paused states. it also covers animating a navigation menu with javascript, including adding click events, toggling animations, and troubleshooting issues, aiming to fulfill web development needs by providing techniques and tricks for building a larger project from scratch.', 'chapters': [{'end': 3188.596, 'start': 3007.133, 'title': 'Javascript functions and animations', 'summary': 'Discusses creating javascript functions for selecting elements and implementing animations using timeline max, with a focus on adding event listeners and utilizing query selectors with specific time durations and paused states.', 'duration': 181.463, 'highlights': ['Implementing JavaScript functions for selecting elements and using timeline max for animations The transcript provides a demonstration of implementing JavaScript functions to select elements and initialize timeline max for animations.', 'Utilizing query selectors and event listeners The speaker discusses the use of query selectors to select specific elements and the implementation of event listeners for interactivity.', 'Adding specific time durations and paused states to animations The chapter includes a discussion on adding specific time durations and paused states to animations using timeline max, with a focus on controlling the animation flow.']}, {'end': 3591.458, 'start': 3188.796, 'title': 'Animating navigation with javascript', 'summary': 'Covers animating a navigation menu with javascript, including adding click events, toggling animations, and troubleshooting issues, aiming to fulfill web development needs by providing techniques and tricks for building a larger project from scratch.', 'duration': 402.662, 'highlights': ['The chapter covers animating a navigation menu with JavaScript, including adding click events, toggling animations, and troubleshooting issues.', 'The speaker congratulates the audience for following along and encourages them to contribute to the code, expressing pride in their progress.', 'The speaker mentions the intention to apply the learned techniques to future projects and hints at the possibility of building a full website from scratch in the future.']}], 'duration': 584.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-elJSImGPAE/pics/-elJSImGPAE3007133.jpg', 'highlights': ['Implementing JavaScript functions for selecting elements and using timeline max for animations', 'Utilizing query selectors and event listeners for interactivity', 'Adding specific time durations and paused states to animations using timeline max', 'Animating a navigation menu with JavaScript, including click events and troubleshooting', 'Encouraging audience contribution and expressing pride in progress', 'Applying learned techniques to future projects and hinting at building a full website from scratch']}], 'highlights': ["The tutorial series has reached its final part, with two previous parts available on the creator's channel.", 'The finished product and updated files for the web development tutorial are available for free on Patreon.', "The chapter covers setting up animations in JavaScript using 'timeline from 2' to animate elements on a webpage, encountering and debugging issues, and making adjustments to the animation timing.", 'The chapter covers animating background images, transitioning between pages, and fading text elements, using GSAP to manipulate opacity, pointer events, and delays.', 'The chapter details the process of combining separate HTML pages into one to create a single-page application, simplifying the navigation process for the user.', 'Adding a navigation bar with JavaScript animations allows for interactive elements and improved user experience.', 'The tutorial emphasizes minimal changes made from the previous version, primarily involving copying and pasting elements with only alterations to title, names, and pictures.', 'CSS updates to position elements, such as using position absolute and display grid, and the use of GSAP library for animations, enhance the visual and interactive aspects of the web page.', 'Looping over slides and adding event listeners The process involves looping over slides and adding event listeners to each individual button, demonstrating the practical application of event handling in the development process.', 'The method includes the selection and animation of images for both left and right sides of the slides. The method involves selecting and animating the next and current images for both the left and right sides of the slides, ensuring that the proper images are animated in and out for each slide transition.', "The chapter explains the process of creating a function to navigate between slides. It details how to create a function called 'next slide' and pass in the page number to dynamically select the page number for navigation.", 'Removing and adding classes to achieve the desired effect The speaker explains the process of removing and adding classes to the slides to achieve the desired visual effect, emphasizing the simplicity of the chosen approach.', "The process involves dynamically selecting page numbers and animating images based on the page tracking. It involves using a tracker variable called 'current page' set to zero and updating it to track the current page. Additionally, it explains the selection and animation of images for both left and right sides of the slides.", 'Adding a grayish color with code 4E4342 The speaker mentions adding a grayish color with the specific code 4E4342 to the slides, providing a visual reference for the implementation.', 'Creating a scroll tracking function for accurate slide transitions based on scroll direction and limits', 'Implementing a wheel event listener to detect scroll in a full page app without traditional scroll bars', 'Implementing a throttle function to limit scrolling animation frequency to once every 1.5 seconds', "Creating a function 'switch dots' for seamless navigation to a specific slide", 'Using conditional checks to ensure accurate slide transition tracking within defined limits', 'Demonstrating practical implementation of throttle function with an easily accessible example', 'Utilizing GSAP functions to enhance user experience by disabling slide clicking during animation', 'Implementing JavaScript functions for selecting elements and using timeline max for animations', 'Utilizing query selectors and event listeners for interactivity', 'Adding specific time durations and paused states to animations using timeline max', 'Animating a navigation menu with JavaScript, including click events and troubleshooting', 'Encouraging audience contribution and expressing pride in progress', 'Applying learned techniques to future projects and hinting at building a full website from scratch']}