title
Fullpage Animations With Javascript Tutorial

description
Check out my courses! https://developedbyed.com/ In this episode we are going to learn some javascript and animations! We are going to take a look at gsap and fullpage js to create some fluid transitions between different sections in our websites. If you are a beginner in javascript or you want to learn some javascript animations I highly recommend you to follow along! 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. 🎁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': 'Fullpage Animations With Javascript Tutorial', 'heatmap': [{'end': 693.032, 'start': 672.512, 'weight': 1}, {'end': 1244.348, 'start': 1217.378, 'weight': 0.702}], 'summary': 'This tutorial covers using javascript and gsap to create full page animations and auto-scrolling, applying css styling techniques, importing full page js for styling, integrating gsap library for animation, and implementing web animations for visually appealing effects.', 'chapters': [{'end': 67.504, 'segs': [{'end': 51.24, 'src': 'embed', 'start': 0.229, 'weight': 0, 'content': [{'end': 2.571, 'text': 'Hello there, my gorgeous friends on the internet.', 'start': 0.229, 'duration': 2.342}, {'end': 6.893, 'text': 'In this episode, we are gonna do JavaScript, yes.', 'start': 2.671, 'duration': 4.222}, {'end': 9.655, 'text': 'Animations, yes.', 'start': 8.254, 'duration': 1.401}, {'end': 14.078, 'text': 'Full page JS with GSAP and everything else.', 'start': 10.876, 'duration': 3.202}, {'end': 22.752, 'text': "Ooh, So, as you can see here, what we're gonna do is we're gonna scroll a bit and it's gonna auto scroll for us to the next section on the page,", 'start': 15.286, 'duration': 7.466}, {'end': 25.574, 'text': 'which is also gonna trigger some animations.', 'start': 22.752, 'duration': 2.822}, {'end': 31.758, 'text': 'So sit back, enjoy, relax, and the code will be posted on GitHub anyway.', 'start': 25.794, 'duration': 5.964}, {'end': 33.499, 'text': 'So you can be lazy.', 'start': 32.459, 'duration': 1.04}, {'end': 36.922, 'text': 'You can just sit there and eat your popcorn at 12 in the morning.', 'start': 33.679, 'duration': 3.243}, {'end': 39.737, 'text': "And let's get going.", 'start': 38.417, 'duration': 1.32}, {'end': 41.318, 'text': "Okay, let's get going.", 'start': 40.037, 'duration': 1.281}, {'end': 45.139, 'text': 'So we have an empty file here as always empty as our lives.', 'start': 41.458, 'duration': 3.681}, {'end': 51.24, 'text': "And the first thing we're going to do is just make an index.html for beginners out there.", 'start': 45.599, 'duration': 5.641}], 'summary': 'Javascript, animations, and full page js with gsap demonstrated in this episode. auto-scrolling and animations triggered on scroll. code available on github.', 'duration': 51.011, 'max_score': 0.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio229.jpg'}], 'start': 0.229, 'title': 'Full page js with gsap', 'summary': 'Demonstrates using javascript and gsap to create full page animations and auto-scrolling, with code available on github for accessibility and ease of implementation.', 'chapters': [{'end': 67.504, 'start': 0.229, 'title': 'Full page js with gsap', 'summary': 'Demonstrates using javascript and gsap to create full page animations and auto-scrolling, while also providing code on github for accessibility and ease of implementation.', 'duration': 67.275, 'highlights': ['The chapter demonstrates using JavaScript and GSAP to create full page animations and auto-scrolling.', 'The code will be posted on GitHub for accessibility and ease of implementation.', 'The tutorial emphasizes the use of JavaScript and GSAP to create full page animations and auto-scrolling.']}], 'duration': 67.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio229.jpg', 'highlights': ['The tutorial emphasizes the use of JavaScript and GSAP to create full page animations and auto-scrolling.', 'The chapter demonstrates using JavaScript and GSAP to create full page animations and auto-scrolling.', 'The code will be posted on GitHub for accessibility and ease of implementation.']}, {'end': 505.366, 'segs': [{'end': 117.52, 'src': 'embed', 'start': 90.572, 'weight': 0, 'content': [{'end': 97.156, 'text': "The way you do it is you're going to create a div like this, and then you're going to give it an ID of full page like this.", 'start': 90.572, 'duration': 6.584}, {'end': 98.797, 'text': "I'm going to do all lowercase.", 'start': 97.176, 'duration': 1.621}, {'end': 101.941, 'text': "Okay And in here, we're going to add some sections.", 'start': 98.877, 'duration': 3.064}, {'end': 104.584, 'text': 'And these are basically the scrollable parts.', 'start': 102.301, 'duration': 2.283}, {'end': 108.989, 'text': "So each section, if you scroll once, it's going to scroll all the way to the other section.", 'start': 104.664, 'duration': 4.325}, {'end': 111.412, 'text': "Okay, so we're going to create a few sections here.", 'start': 109.49, 'duration': 1.922}, {'end': 112.814, 'text': "I'm going to create a section.", 'start': 111.452, 'duration': 1.362}, {'end': 117.52, 'text': "And I'm also going to give it a class of section like this and S1.", 'start': 113.294, 'duration': 4.226}], 'summary': 'Creating a scrollable webpage with divs and sections, including s1 class.', 'duration': 26.948, 'max_score': 90.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio90572.jpg'}, {'end': 209.184, 'src': 'embed', 'start': 156.266, 'weight': 2, 'content': [{'end': 158.628, 'text': "So we're gonna create a div with a class of description.", 'start': 156.266, 'duration': 2.362}, {'end': 163.418, 'text': "like this, and here I'm just gonna drop in two paragraphs.", 'start': 160.077, 'duration': 3.341}, {'end': 171.18, 'text': "So p lorem 20 tab, and then we're gonna do another p tag with some random text.", 'start': 163.438, 'duration': 7.742}, {'end': 180.603, 'text': "So let's do another p tag with lorem 10, and then hit tab, and it's automatically gonna generate some filler text for us, okay?", 'start': 171.9, 'duration': 8.703}, {'end': 186.825, 'text': 'So we have the section two with h1 and a div with some paragraphs, okay.', 'start': 180.723, 'duration': 6.102}, {'end': 190.468, 'text': 'And finally, what I want to have down here is some images.', 'start': 187.345, 'duration': 3.123}, {'end': 195.172, 'text': 'Now, these images will be provided in the link in the description.', 'start': 190.608, 'duration': 4.564}, {'end': 199.395, 'text': 'So you can click on that and get the images, but you can use anything you want.', 'start': 195.332, 'duration': 4.063}, {'end': 204.099, 'text': 'But if you want to follow exactly what I did in this tutorial, then you can use this.', 'start': 199.475, 'duration': 4.624}, {'end': 207.342, 'text': "So I'm just going to copy paste it over again.", 'start': 204.82, 'duration': 2.522}, {'end': 208.243, 'text': "It's going to be there.", 'start': 207.362, 'duration': 0.881}, {'end': 209.184, 'text': "So don't worry.", 'start': 208.563, 'duration': 0.621}], 'summary': 'Creating html structure with classes and paragraphs, and inserting images using provided link.', 'duration': 52.918, 'max_score': 156.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio156266.jpg'}, {'end': 366.27, 'src': 'embed', 'start': 329.6, 'weight': 1, 'content': [{'end': 330.403, 'text': "We're going to link.", 'start': 329.6, 'duration': 0.803}, {'end': 338.052, 'text': "Our relationship, we're going to add the style.css, and we're going to leave it like that for now.", 'start': 331.627, 'duration': 6.425}, {'end': 347.599, 'text': "Actually, let's just remove some basic stylings by adding the star sign forever, margin zero, padding zero.", 'start': 338.672, 'duration': 8.927}, {'end': 355.305, 'text': "So basically, we're removing all the basic stylings on our headers, on our divs, and everything else.", 'start': 348.58, 'duration': 6.725}, {'end': 358.347, 'text': "And we're going to add a box sizing of both the box.", 'start': 355.825, 'duration': 2.522}, {'end': 366.27, 'text': "So all the margins and paddings that we add We want to make sure that they're constrained inside that box and it doesn't actually grow our box.", 'start': 358.827, 'duration': 7.443}], 'summary': 'Link relationship and update style.css to remove basic stylings and add box sizing.', 'duration': 36.67, 'max_score': 329.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio329600.jpg'}, {'end': 463.231, 'src': 'embed', 'start': 435.073, 'weight': 4, 'content': [{'end': 438.396, 'text': 'And we can perfectly position these with top 70%, left 50%.', 'start': 435.073, 'duration': 3.323}, {'end': 448.063, 'text': 'If we add a transform, translate of minus 50% and minus 70%.', 'start': 438.396, 'duration': 9.667}, {'end': 454.346, 'text': "So the reason again, if you don't not sure why we're doing this, is because we have the picture right here in the middle, right?", 'start': 448.063, 'duration': 6.283}, {'end': 458.788, 'text': "And if we want to move at 50%, it's going to move right in the middle,", 'start': 454.786, 'duration': 4.002}, {'end': 463.231, 'text': "but it's going to start from the middle and then the item is going to go this way, right?", 'start': 458.788, 'duration': 4.443}], 'summary': 'Using positioning and transforms to move an item to the middle and adjust its location.', 'duration': 28.158, 'max_score': 435.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio435073.jpg'}], 'start': 68.084, 'title': 'Creating full page animation and styling with css', 'summary': 'Demonstrates creating a full page animation using full page js and adding images to a web page while applying css styling techniques, with a focus on scrollable sections, unique content and styles, and visually appealing layout. it explains the rationale for each step.', 'chapters': [{'end': 186.825, 'start': 68.084, 'title': 'Creating full page animation with full page js', 'summary': 'Demonstrates creating a full page animation using full page js, involving the creation of scrollable sections with unique content and styles.', 'duration': 118.741, 'highlights': ['The chapter outlines the process of creating a full page animation using Full Page JS, involving the use of scrollable sections and unique content.', 'It explains the steps to create sections with different styles and content, including adding descriptions and paragraphs to each section.']}, {'end': 505.366, 'start': 187.345, 'title': 'Adding images and styling with css', 'summary': 'Demonstrates adding images to a web page and applying css styling techniques, including positioning and transformations, to create a visually appealing layout, all while explaining the rationale for each step.', 'duration': 318.021, 'highlights': ['Demonstrating the process of adding images and providing a link for accessing the images, along with the option to use different images. The tutorial explains how to add images to a web page and provides a link for accessing the images, offering the flexibility to use different images.', 'Explaining the process of positioning and styling the images using CSS, including details on size adjustments and absolute positioning. The chapter details the process of styling the images with CSS, including adjusting their size and using absolute positioning for visual layout.', 'Providing insights into using transformations and explaining the rationale behind using transform translate to position elements accurately. The tutorial provides insights into using transformations and explains the rationale behind utilizing transform translate to position elements accurately on the web page.']}], 'duration': 437.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio68084.jpg', 'highlights': ['The chapter outlines the process of creating a full page animation using Full Page JS, involving the use of scrollable sections and unique content.', 'Explaining the process of positioning and styling the images using CSS, including details on size adjustments and absolute positioning.', 'Demonstrating the process of adding images and providing a link for accessing the images, along with the option to use different images.', 'It explains the steps to create sections with different styles and content, including adding descriptions and paragraphs to each section.', 'Providing insights into using transformations and explaining the rationale behind using transform translate to position elements accurately.']}, {'end': 770.072, 'segs': [{'end': 606.501, 'src': 'embed', 'start': 505.466, 'weight': 0, 'content': [{'end': 506.086, 'text': "Let's do this.", 'start': 505.466, 'duration': 0.62}, {'end': 513.188, 'text': "Okay So before we actually style everything here, we're going to import this full page JS, which enables us to do this.", 'start': 506.426, 'duration': 6.762}, {'end': 514.45, 'text': 'Wow Fancy.', 'start': 513.369, 'duration': 1.081}, {'end': 515.85, 'text': 'So smooth.', 'start': 515.11, 'duration': 0.74}, {'end': 517.831, 'text': 'Amazing Okay.', 'start': 516.429, 'duration': 1.402}, {'end': 519.292, 'text': "Now, what's the problem with this?", 'start': 518.111, 'duration': 1.181}, {'end': 529.176, 'text': "The problem is that you can use it for free, but you cannot use it in a commercial if you're actually releasing this as a commercial product.", 'start': 519.312, 'duration': 9.864}, {'end': 531.037, 'text': 'you have to buy it.', 'start': 530.216, 'duration': 0.821}, {'end': 532.097, 'text': "It's not expensive.", 'start': 531.137, 'duration': 0.96}, {'end': 537.739, 'text': "it's nine bucks or nine pounds, if you wanna say that for one developer.", 'start': 532.097, 'duration': 5.642}, {'end': 543.081, 'text': 'but we can just try it out and see how it works and we can use it on our own projects.', 'start': 537.739, 'duration': 5.342}, {'end': 545.522, 'text': "if we're not, actually what does it say?", 'start': 543.081, 'duration': 2.441}, {'end': 546.262, 'text': "Let's see.", 'start': 545.922, 'duration': 0.34}, {'end': 554.435, 'text': 'Okay, so it requires you, blah, blah, blah, your project to be a public and licensed under GPL LV3.', 'start': 548.126, 'duration': 6.309}, {'end': 559.963, 'text': 'Okay, so if you wanna create a client website, then you need to buy it.', 'start': 554.936, 'duration': 5.027}, {'end': 564.949, 'text': "But hey, for us, just building out simple projects for fun, It's going to be just fine.", 'start': 560.064, 'duration': 4.885}, {'end': 568.61, 'text': 'So to get this, all you have to do is click download.', 'start': 565.529, 'duration': 3.081}, {'end': 575.971, 'text': "Okay, so after you hit download, what you want to do is open it up, go to this, and then we're going to get the full page JS.", 'start': 568.67, 'duration': 7.301}, {'end': 580.012, 'text': 'And you can do the min to save some space.', 'start': 576.911, 'duration': 3.101}, {'end': 583.393, 'text': 'And we can get the full page min dot CSS.', 'start': 580.932, 'duration': 2.461}, {'end': 584.713, 'text': 'So we need these two.', 'start': 583.513, 'duration': 1.2}, {'end': 589.594, 'text': 'Okay, so let me just drag them out here and then drag them into the project.', 'start': 584.733, 'duration': 4.861}, {'end': 596.161, 'text': "So let's go back to here and we're just going to drag it out into our project.", 'start': 589.694, 'duration': 6.467}, {'end': 597.342, 'text': 'Okay, perfect.', 'start': 596.421, 'duration': 0.921}, {'end': 602.026, 'text': "So now we're going to link everything up together and then you're already going to see some magic going on here.", 'start': 597.362, 'duration': 4.664}, {'end': 606.501, 'text': 'go to full page min.css.', 'start': 603.86, 'duration': 2.641}], 'summary': 'Discussion about importing and using full page js for projects, costing 9 bucks, and potential restrictions for commercial use.', 'duration': 101.035, 'max_score': 505.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio505466.jpg'}, {'end': 704.306, 'src': 'heatmap', 'start': 672.512, 'weight': 5, 'content': [{'end': 677.076, 'text': 'So you can add like auto scrolling and we can set this to true.', 'start': 672.512, 'duration': 4.564}, {'end': 683.262, 'text': 'And after we do that, make sure to also add your script tag here with your own script tag.', 'start': 677.416, 'duration': 5.846}, {'end': 688.362, 'text': "Make sure you want to add this because otherwise it's not going to work.", 'start': 684.253, 'duration': 4.109}, {'end': 691.409, 'text': 'And in theory, you should be able to do this.', 'start': 688.863, 'duration': 2.546}, {'end': 693.032, 'text': 'Just scroll a bit and boom.', 'start': 691.429, 'duration': 1.603}, {'end': 695.381, 'text': 'it goes to the next page.', 'start': 693.8, 'duration': 1.581}, {'end': 702.225, 'text': "now i don't like this, as some people are really upset about using your scroll navigation like this.", 'start': 695.381, 'duration': 6.844}, {'end': 704.306, 'text': "and, to be honest, i don't like it either.", 'start': 702.225, 'duration': 2.081}], 'summary': 'Auto-scrolling feature can be enabled, although some users and the speaker might not favor it.', 'duration': 46.368, 'max_score': 672.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio672512.jpg'}], 'start': 505.466, 'title': 'Full page js import and animation creation', 'summary': 'Covers the import of full page js for styling, its commercial use limitations, and cost, along with guidance on creating full page animation using simple projects, resulting in easier page navigation.', 'chapters': [{'end': 559.963, 'start': 505.466, 'title': 'Full page js import and commercial use', 'summary': 'Discusses the import of full page js for styling, the limitation on commercial use, and the cost of purchasing for commercial projects, which is nine bucks or nine pounds for one developer, and the requirement to buy it for client websites.', 'duration': 54.497, 'highlights': ['You can use the full page JS for free, but for a commercial product, you have to buy it for nine bucks or nine pounds for one developer.', 'The requirement to buy the full page JS for client websites if you want to use it in commercial projects.', 'The full page JS enables smooth and fancy styling for web pages.']}, {'end': 770.072, 'start': 560.064, 'title': 'Creating full page animation', 'summary': 'Outlines the process of creating a full page animation using simple projects, including downloading necessary files, linking them in the project, and customizing the animation properties, along with the addition of navigation buttons, resulting in easier page navigation.', 'duration': 210.008, 'highlights': ['The chapter goes through the steps of downloading the necessary full page JS and CSS files to create the animation.', 'It explains the process of linking the downloaded files into the project to enable the full page animation.', 'The chapter demonstrates customizing the full page animation properties, such as enabling auto-scrolling and adding navigation buttons for easier page navigation.', 'It emphasizes the importance of providing navigation buttons to facilitate smooth page navigation, addressing potential issues with scroll navigation and catering to user preferences.']}], 'duration': 264.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio505466.jpg', 'highlights': ['You can use the full page JS for free, but for a commercial product, you have to buy it for nine bucks or nine pounds for one developer.', 'The requirement to buy the full page JS for client websites if you want to use it in commercial projects.', 'The full page JS enables smooth and fancy styling for web pages.', 'The chapter goes through the steps of downloading the necessary full page JS and CSS files to create the animation.', 'It explains the process of linking the downloaded files into the project to enable the full page animation.', 'The chapter demonstrates customizing the full page animation properties, such as enabling auto-scrolling and adding navigation buttons for easier page navigation.', 'It emphasizes the importance of providing navigation buttons to facilitate smooth page navigation, addressing potential issues with scroll navigation and catering to user preferences.']}, {'end': 1206.85, 'segs': [{'end': 849.943, 'src': 'embed', 'start': 795.406, 'weight': 0, 'content': [{'end': 799.607, 'text': "So let's pop open our VS Code again, go back to CSS.", 'start': 795.406, 'duration': 4.201}, {'end': 803.048, 'text': 'And here, what I wanna do is grab the first section.', 'start': 800.227, 'duration': 2.821}, {'end': 806.608, 'text': "We're only gonna grab the first section because I wanna add that background to it.", 'start': 803.188, 'duration': 3.42}, {'end': 810.569, 'text': "So we're gonna say background image like that.", 'start': 807.008, 'duration': 3.561}, {'end': 814.21, 'text': "We're going to say URL and we're going to navigate to image.", 'start': 811.129, 'duration': 3.081}, {'end': 817.711, 'text': "And I believe it's the couch.", 'start': 815.41, 'duration': 2.301}, {'end': 818.591, 'text': "Let's see.", 'start': 818.011, 'duration': 0.58}, {'end': 820.691, 'text': "Is it the couch? Yes, it's the couch.", 'start': 818.671, 'duration': 2.02}, {'end': 822.452, 'text': 'This looks terrible.', 'start': 821.091, 'duration': 1.361}, {'end': 823.652, 'text': "So let's fix it up.", 'start': 822.692, 'duration': 0.96}, {'end': 828.513, 'text': "We can just say background size and we're going to say cover like that.", 'start': 824.032, 'duration': 4.481}, {'end': 830.114, 'text': 'And that should fix it up nicely.', 'start': 828.593, 'duration': 1.521}, {'end': 835.675, 'text': "And now I'm going to show you a trick how you can add linear gradients to your text.", 'start': 830.534, 'duration': 5.141}, {'end': 838.095, 'text': 'So we can just grab the section H1.', 'start': 836.315, 'duration': 1.78}, {'end': 844.6, 'text': 'Okay which is this one right here.', 'start': 838.616, 'duration': 5.984}, {'end': 849.943, 'text': "Okay, so this one, we're also gonna add a font size of like 64 pixels.", 'start': 845.28, 'duration': 4.663}], 'summary': 'Adding background image to first section and applying linear gradient to text, with font size of 64 pixels.', 'duration': 54.537, 'max_score': 795.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio795406.jpg'}, {'end': 1039.747, 'src': 'embed', 'start': 968.193, 'weight': 2, 'content': [{'end': 971.414, 'text': "And we're gonna say to the text, hit save.", 'start': 968.193, 'duration': 3.221}, {'end': 973.695, 'text': 'And as you can see now, it clipped.', 'start': 971.874, 'duration': 1.821}, {'end': 979.998, 'text': 'Now we cannot see anything, but what it did is it basically clipped that background to the text.', 'start': 973.835, 'duration': 6.163}, {'end': 989.603, 'text': "but our text color is still black, right? You can imagine that we still have that gradient, but it's behind this text only.", 'start': 980.834, 'duration': 8.769}, {'end': 991.164, 'text': "It's not here anymore.", 'start': 989.843, 'duration': 1.321}, {'end': 993.446, 'text': "It's not covered by the box, it's behind the text.", 'start': 991.184, 'duration': 2.262}, {'end': 1001.734, 'text': "So how can we make that visible? Well, we kind of have to like reduce the opacity of this text, right? So there's a special way you can do that.", 'start': 993.807, 'duration': 7.927}, {'end': 1010.657, 'text': "And that's by saying WebKit, like this and say text fill color like that, and then you say transparent.", 'start': 1002.095, 'duration': 8.562}, {'end': 1016.919, 'text': 'So you make the actual fill of the text transparent, which means that the background is gonna show over.', 'start': 1010.697, 'duration': 6.222}, {'end': 1020.941, 'text': 'So that way you have this nice gradient over the text.', 'start': 1017.52, 'duration': 3.421}, {'end': 1025.762, 'text': 'Wow, we just wasted five minutes on a gradient on text.', 'start': 1021.341, 'duration': 4.421}, {'end': 1026.443, 'text': 'Good job, Ben.', 'start': 1025.883, 'duration': 0.56}, {'end': 1027.558, 'text': 'Clap your hands.', 'start': 1026.936, 'duration': 0.622}, {'end': 1028.779, 'text': 'Wow Amazing.', 'start': 1027.637, 'duration': 1.142}, {'end': 1031.941, 'text': "Okay So anyway, that's what we have.", 'start': 1029.219, 'duration': 2.722}, {'end': 1033.823, 'text': "Let's kind of style this a bit too.", 'start': 1032.241, 'duration': 1.582}, {'end': 1036.244, 'text': "We can grab, let's just grab S2 here.", 'start': 1034.123, 'duration': 2.121}, {'end': 1038.086, 'text': "I don't want to spend too much time on this.", 'start': 1036.265, 'duration': 1.821}, {'end': 1039.747, 'text': 'We can just say background.', 'start': 1038.126, 'duration': 1.621}], 'summary': 'Demonstrating how to clip background to text and make text transparent for gradient effect.', 'duration': 71.554, 'max_score': 968.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio968193.jpg'}], 'start': 770.733, 'title': 'Styling sections and text', 'summary': 'Covers styling sections with background colors and images, including adding linear gradients to text and setting font size. it also discusses the process of styling and positioning text, including centering, adding background gradients, clipping, and adjusting opacity for a visible gradient effect.', 'chapters': [{'end': 849.943, 'start': 770.733, 'title': 'Styling sections and adding backgrounds', 'summary': 'Covers styling sections with background colors and images, including adding linear gradients to text and setting font size.', 'duration': 79.21, 'highlights': ['The chapter demonstrates adding background colors and images to sections, such as using a background image of a couch and setting background size to cover.', 'It also includes a trick for adding linear gradients to text, with the example of setting a font size of 64 pixels.']}, {'end': 1206.85, 'start': 850.984, 'title': 'Styling and positioning text', 'summary': 'Discusses the process of styling text, including positioning it in the center, adding a background gradient, clipping the text to the background color, and adjusting text opacity for a visible gradient effect.', 'duration': 355.866, 'highlights': ['The process of styling text, including positioning it in the center and adding a background gradient. Positioning text in the center, adding a linear gradient background.', 'Clipping the text to the background color and adjusting text opacity for a visible gradient effect. Clipping text to background color, adjusting text opacity for visible gradient effect.', 'Modifying the font size and color of the text using WebKit and CSS. Modifying font size and color using WebKit and CSS.']}], 'duration': 436.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio770733.jpg', 'highlights': ['The chapter demonstrates adding background colors and images to sections, such as using a background image of a couch and setting background size to cover.', 'It also includes a trick for adding linear gradients to text, with the example of setting a font size of 64 pixels.', 'The process of styling text, including positioning it in the center and adding a background gradient. Positioning text in the center, adding a linear gradient background.', 'Clipping the text to the background color and adjusting text opacity for a visible gradient effect. Clipping text to background color, adjusting text opacity for visible gradient effect.', 'Modifying the font size and color of the text using WebKit and CSS. Modifying font size and color using WebKit and CSS.']}, {'end': 1501.101, 'segs': [{'end': 1293.888, 'src': 'heatmap', 'start': 1217.378, 'weight': 0, 'content': [{'end': 1219.4, 'text': 'We can search GSAP CDN.', 'start': 1217.378, 'duration': 2.022}, {'end': 1222.122, 'text': 'You can also download it if you want.', 'start': 1220.26, 'duration': 1.862}, {'end': 1225.524, 'text': "But two things we're going to need here is tween max.", 'start': 1222.562, 'duration': 2.962}, {'end': 1228.286, 'text': 'So you can go to copy, copy script tag.', 'start': 1225.924, 'duration': 2.362}, {'end': 1231.969, 'text': "And let's just add it to our index.html up here.", 'start': 1228.867, 'duration': 3.102}, {'end': 1233.029, 'text': 'Paste it.', 'start': 1232.569, 'duration': 0.46}, {'end': 1236.912, 'text': 'Okay So we got the tween max.', 'start': 1233.65, 'duration': 3.262}, {'end': 1244.348, 'text': 'And we also need What is it called? Timeline Max.', 'start': 1237.993, 'duration': 6.355}, {'end': 1247.771, 'text': 'With this, you can chain together multiple animations.', 'start': 1245.049, 'duration': 2.722}, {'end': 1255.436, 'text': 'So this is the animation and timeline max enables you to do multiple animations.', 'start': 1247.811, 'duration': 7.625}, {'end': 1257.857, 'text': 'Chained together, I should say.', 'start': 1256.556, 'duration': 1.301}, {'end': 1259.598, 'text': 'Okay, so we have those two.', 'start': 1258.417, 'duration': 1.181}, {'end': 1265.082, 'text': 'So now in full page, what you can do is they have a method here called onLeave.', 'start': 1260.198, 'duration': 4.884}, {'end': 1270.925, 'text': 'So whenever you leave the page and you arrive to another one, this event is going to trigger.', 'start': 1265.462, 'duration': 5.463}, {'end': 1272.727, 'text': 'So onLeave like this.', 'start': 1271.426, 'duration': 1.301}, {'end': 1278.33, 'text': 'And here, this one actually is an arrow function that has three parameters.', 'start': 1273.887, 'duration': 4.443}, {'end': 1282.773, 'text': 'You have an origin, which is the position where you leave from.', 'start': 1278.691, 'duration': 4.082}, {'end': 1292.448, 'text': 'So the origin here would be This is the page, this is the origin, and this is the destination.', 'start': 1283.394, 'duration': 9.054}, {'end': 1293.888, 'text': 'This is where we arrive.', 'start': 1292.788, 'duration': 1.1}], 'summary': 'Using gsap cdn to incorporate tweenmax and timelinemax for chaining multiple animations and triggering onleave event with three parameters.', 'duration': 86.798, 'max_score': 1217.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1217378.jpg'}, {'end': 1399.971, 'src': 'embed', 'start': 1371.725, 'weight': 3, 'content': [{'end': 1373.705, 'text': 'So now what we can do is create a timeline.', 'start': 1371.725, 'duration': 1.98}, {'end': 1380.148, 'text': 'So this is GSAP const TL equals new timeline max, like that.', 'start': 1373.765, 'duration': 6.383}, {'end': 1385.45, 'text': "And what we can also do is add a delay here, which I'm gonna show you why.", 'start': 1381.468, 'duration': 3.982}, {'end': 1390.145, 'text': 'Here, down here, we can just say TL from two.', 'start': 1386.21, 'duration': 3.935}, {'end': 1395.368, 'text': 'So from two gives us a position we want to start from and a position we want to end in.', 'start': 1390.626, 'duration': 4.742}, {'end': 1398.31, 'text': 'So here we can say we want to grab the title.', 'start': 1396.049, 'duration': 2.261}, {'end': 1399.971, 'text': "That's the first thing.", 'start': 1399.071, 'duration': 0.9}], 'summary': 'Create a timeline using gsap with a delay and define positions for title animation.', 'duration': 28.246, 'max_score': 1371.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1371725.jpg'}], 'start': 1207.09, 'title': 'Gsap animation integration', 'summary': 'Covers integrating gsap library into javascript, using tween max and timeline max for chaining multiple animations, implementing onleave method with arrow function and three parameters, and creating a timeline with gsap including delays and specific animations for different elements, with a 0.5-second delay to the scroll animation.', 'chapters': [{'end': 1371.024, 'start': 1207.09, 'title': 'Javascript animation with gsap', 'summary': 'Covers integrating gsap animation library into javascript, explaining the use of tween max and timeline max for chaining multiple animations, and implementing onleave method with arrow function and three parameters for triggering different animations based on the destination section, illustrated with console logs and query selectors.', 'duration': 163.934, 'highlights': ['Explaining the use of tween max and timeline max for chaining multiple animations GSAP provides the tween max and timeline max functionalities for chaining multiple animations.', 'Implementing onLeave method with arrow function and three parameters for triggering different animations based on the destination section, illustrated with console logs and query selectors The onLeave method with arrow function and three parameters is used to trigger different animations based on the destination section, demonstrated with console logs and query selectors.', 'Integrating GSAP animation library into JavaScript The chapter covers integrating GSAP animation library into JavaScript.']}, {'end': 1501.101, 'start': 1371.725, 'title': 'Creating timeline with gsap', 'summary': 'Explains how to create a timeline with gsap, including adding delays, defining starting and ending positions, and setting specific animations for different elements, with a delay of 0.5 seconds to the scroll animation.', 'duration': 129.376, 'highlights': ['The chapter explains how to create a timeline with GSAP, including adding delays, defining starting and ending positions, and setting specific animations for different elements, with a delay of 0.5 seconds to the scroll animation.', 'The timeline is created using GSAP with a new timeline max, and a delay of 0.5 seconds is added to the scroll animation.', 'The starting and ending positions for the animation are defined, with specific Y angles and opacities, and a duration of 0.5 seconds.']}], 'duration': 294.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1207090.jpg', 'highlights': ['Covers integrating GSAP animation library into JavaScript', 'Explaining the use of tween max and timeline max for chaining multiple animations', 'Implementing onLeave method with arrow function and three parameters for triggering different animations based on the destination section', 'Creating a timeline with GSAP, including adding delays, defining starting and ending positions, and setting specific animations for different elements, with a delay of 0.5 seconds to the scroll animation']}, {'end': 1813.196, 'segs': [{'end': 1599.468, 'src': 'embed', 'start': 1526.62, 'weight': 0, 'content': [{'end': 1529.242, 'text': 'The index starts at zero.', 'start': 1526.62, 'duration': 2.622}, {'end': 1530.323, 'text': 'So this would be the first page.', 'start': 1529.262, 'duration': 1.061}, {'end': 1531.984, 'text': 'This would be index one.', 'start': 1530.963, 'duration': 1.021}, {'end': 1535.746, 'text': 'So if I want specific animations for this page, then I would add one.', 'start': 1532.004, 'duration': 3.742}, {'end': 1538.308, 'text': 'And I would add the rest of the animations in here.', 'start': 1535.886, 'duration': 2.422}, {'end': 1545.253, 'text': 'Now, why did I add the title in here? Because I want this to happen on each section.', 'start': 1538.608, 'duration': 6.645}, {'end': 1551.817, 'text': 'So if you want general animations that happen on each section, then you can just add it up here without any if statement.', 'start': 1545.713, 'duration': 6.104}, {'end': 1559.481, 'text': 'Okay So in here we can select the chairs, set this equal to document dot query selector all.', 'start': 1552.337, 'duration': 7.144}, {'end': 1562.823, 'text': "I'm going to select all of them and say dot chair.", 'start': 1559.701, 'duration': 3.122}, {'end': 1567.385, 'text': 'Perfect And finally, we have the description.', 'start': 1564.484, 'duration': 2.901}, {'end': 1570.247, 'text': 'So we can select that as well.', 'start': 1568.886, 'duration': 1.361}, {'end': 1574.729, 'text': 'And we can say description.', 'start': 1573.248, 'duration': 1.481}, {'end': 1576.873, 'text': 'Like that.', 'start': 1576.533, 'duration': 0.34}, {'end': 1581.519, 'text': 'Okay So we have those two and we can just start animating everything.', 'start': 1577.654, 'duration': 3.865}, {'end': 1582.38, 'text': 'Very simple.', 'start': 1581.819, 'duration': 0.561}, {'end': 1584.743, 'text': 'You can just say TL again, from two.', 'start': 1582.6, 'duration': 2.143}, {'end': 1595.544, 'text': 'like that, and then we can grab the chairs like that, and we can add a time of 0.7 seconds.', 'start': 1586.977, 'duration': 8.567}, {'end': 1596.645, 'text': "That's the duration.", 'start': 1595.705, 'duration': 0.94}, {'end': 1599.468, 'text': "And the thing that we're gonna do here is we're gonna do some magic.", 'start': 1597.026, 'duration': 2.442}], 'summary': 'Using javascript to select and animate elements on a web page, with a focus on specific animations for each page section.', 'duration': 72.848, 'max_score': 1526.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1526620.jpg'}, {'end': 1759.854, 'src': 'embed', 'start': 1724.479, 'weight': 1, 'content': [{'end': 1728.54, 'text': 'Okay So the first year I want it to be visible from the starting position as well.', 'start': 1724.479, 'duration': 4.061}, {'end': 1734.122, 'text': 'So when we go down, it just comes in like this nicely and then starts changing the colors to see different styles.', 'start': 1729, 'duration': 5.122}, {'end': 1737.583, 'text': 'And at the end, we also get that nice shadow just popping in.', 'start': 1734.202, 'duration': 3.381}, {'end': 1739.564, 'text': 'There we go.', 'start': 1739.244, 'duration': 0.32}, {'end': 1743, 'text': "Very cool, so that's how you can chain together animations.", 'start': 1740.458, 'duration': 2.542}, {'end': 1745.182, 'text': 'You can also add the text if you want.', 'start': 1743.46, 'duration': 1.722}, {'end': 1746.503, 'text': "Let's say I wanna add it here.", 'start': 1745.202, 'duration': 1.301}, {'end': 1748.905, 'text': 'I can just say from two again.', 'start': 1746.523, 'duration': 2.382}, {'end': 1759.854, 'text': 'We can grab that description, maybe add a 0.75 to it, whatever you want, and just kind of copy whatever we have up here with the title,', 'start': 1749.826, 'duration': 10.028}], 'summary': 'Demonstrating chaining animations with text addition and duration modification.', 'duration': 35.375, 'max_score': 1724.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1724479.jpg'}, {'end': 1813.196, 'src': 'embed', 'start': 1792.062, 'weight': 4, 'content': [{'end': 1797.204, 'text': "It's hard to film just because I have these lights on me and it burns my retina.", 'start': 1792.062, 'duration': 5.142}, {'end': 1799.446, 'text': 'I cannot.', 'start': 1798.065, 'duration': 1.381}, {'end': 1800.546, 'text': "I can't see anymore.", 'start': 1799.446, 'duration': 1.1}, {'end': 1803.208, 'text': 'Okay, until next time.', 'start': 1801.507, 'duration': 1.701}, {'end': 1807.286, 'text': 'Make sure to give yourself a kiss at night.', 'start': 1804.301, 'duration': 2.985}, {'end': 1812.395, 'text': "What am I talking about? All right, I'll see you guys in the next one.", 'start': 1808.188, 'duration': 4.207}, {'end': 1813.196, 'text': 'Peace, peace, peace.', 'start': 1812.415, 'duration': 0.781}], 'summary': 'Struggling with bright lights while filming, ends with a playful sign-off.', 'duration': 21.134, 'max_score': 1792.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1792062.jpg'}], 'start': 1501.861, 'title': 'Web animations', 'summary': 'Covers implementing javascript animations for web page sections, and chaining animations in css to create visually appealing effects. it includes guidance on selecting elements, setting animations, manipulating positions, and challenges faced during filming.', 'chapters': [{'end': 1654.345, 'start': 1501.861, 'title': 'Javascript page animations', 'summary': 'Provides guidance on implementing javascript animations for specific sections of a web page, including selecting elements, setting animations, and manipulating their positions, with a focus on animating chairs and descriptions.', 'duration': 152.484, 'highlights': ['The index starts at zero, with subsequent sections being indexed incrementally, allowing for specific animations to be added to each section, with the first section being index zero and subsequent sections being indexed accordingly.', 'The animations can be initiated by setting the duration and manipulating the positions of elements, such as chairs, with a time of 0.7 seconds, creating the illusion of color change by layering the chairs and animating their fade-in and fade-out effects.', 'The JavaScript code involves selecting elements using querySelectorAll, such as chairs and descriptions, and setting animations using TL, enabling the manipulation of their positions and effects for creating dynamic page animations.']}, {'end': 1813.196, 'start': 1654.465, 'title': 'Chaining animations in css', 'summary': 'Demonstrates how to chain together animations in css to create a visually appealing effect, using opacity transitions and shadows, and also mentions the challenges faced during filming due to weather conditions.', 'duration': 158.731, 'highlights': ['The chapter demonstrates how to chain together animations in CSS to create a visually appealing effect, using opacity transitions and shadows.', 'It mentions the challenges faced during filming due to gloomy weather conditions and the difficulty of filming with bright lights.', 'The chapter concludes with a lighthearted note, thanking the audience and expressing the challenges faced during filming.']}], 'duration': 311.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gE-Yuu2eEio/pics/gE-Yuu2eEio1501861.jpg', 'highlights': ['The JavaScript code involves selecting elements using querySelectorAll, such as chairs and descriptions, and setting animations using TL, enabling the manipulation of their positions and effects for creating dynamic page animations.', 'The chapter demonstrates how to chain together animations in CSS to create a visually appealing effect, using opacity transitions and shadows.', 'The animations can be initiated by setting the duration and manipulating the positions of elements, such as chairs, with a time of 0.7 seconds, creating the illusion of color change by layering the chairs and animating their fade-in and fade-out effects.', 'The index starts at zero, with subsequent sections being indexed incrementally, allowing for specific animations to be added to each section, with the first section being index zero and subsequent sections being indexed accordingly.', 'It mentions the challenges faced during filming due to gloomy weather conditions and the difficulty of filming with bright lights.', 'The chapter concludes with a lighthearted note, thanking the audience and expressing the challenges faced during filming.']}], 'highlights': ['The tutorial emphasizes the use of JavaScript and GSAP to create full page animations and auto-scrolling.', 'The chapter demonstrates using JavaScript and GSAP to create full page animations and auto-scrolling.', 'The code will be posted on GitHub for accessibility and ease of implementation.', 'The chapter outlines the process of creating a full page animation using Full Page JS, involving the use of scrollable sections and unique content.', 'Explaining the process of positioning and styling the images using CSS, including details on size adjustments and absolute positioning.', 'Demonstrating the process of adding images and providing a link for accessing the images, along with the option to use different images.', 'It explains the steps to create sections with different styles and content, including adding descriptions and paragraphs to each section.', 'Providing insights into using transformations and explaining the rationale behind using transform translate to position elements accurately.', 'You can use the full page JS for free, but for a commercial product, you have to buy it for nine bucks or nine pounds for one developer.', 'The requirement to buy the full page JS for client websites if you want to use it in commercial projects.', 'The full page JS enables smooth and fancy styling for web pages.', 'The chapter goes through the steps of downloading the necessary full page JS and CSS files to create the animation.', 'It explains the process of linking the downloaded files into the project to enable the full page animation.', 'The chapter demonstrates customizing the full page animation properties, such as enabling auto-scrolling and adding navigation buttons for easier page navigation.', 'It emphasizes the importance of providing navigation buttons to facilitate smooth page navigation, addressing potential issues with scroll navigation and catering to user preferences.', 'The chapter demonstrates adding background colors and images to sections, such as using a background image of a couch and setting background size to cover.', 'It also includes a trick for adding linear gradients to text, with the example of setting a font size of 64 pixels.', 'The process of styling text, including positioning it in the center and adding a background gradient. Positioning text in the center, adding a linear gradient background.', 'Clipping the text to the background color and adjusting text opacity for a visible gradient effect. Clipping text to background color, adjusting text opacity for visible gradient effect.', 'Modifying the font size and color of the text using WebKit and CSS. Modifying font size and color using WebKit and CSS.', 'Covers integrating GSAP animation library into JavaScript', 'Explaining the use of tween max and timeline max for chaining multiple animations', 'Implementing onLeave method with arrow function and three parameters for triggering different animations based on the destination section', 'Creating a timeline with GSAP, including adding delays, defining starting and ending positions, and setting specific animations for different elements, with a delay of 0.5 seconds to the scroll animation', 'The JavaScript code involves selecting elements using querySelectorAll, such as chairs and descriptions, and setting animations using TL, enabling the manipulation of their positions and effects for creating dynamic page animations.', 'The chapter demonstrates how to chain together animations in CSS to create a visually appealing effect, using opacity transitions and shadows.', 'The animations can be initiated by setting the duration and manipulating the positions of elements, such as chairs, with a time of 0.7 seconds, creating the illusion of color change by layering the chairs and animating their fade-in and fade-out effects.', 'The index starts at zero, with subsequent sections being indexed incrementally, allowing for specific animations to be added to each section, with the first section being index zero and subsequent sections being indexed accordingly.', 'It mentions the challenges faced during filming due to gloomy weather conditions and the difficulty of filming with bright lights.', 'The chapter concludes with a lighthearted note, thanking the audience and expressing the challenges faced during filming.']}