title
Javascript Animations For Beginners

description
AVAILABLE NOW, LIMITED PRICE! https://developedbyed.com/p/the-ultimate-javascript-animation-course?coupon_code=EARLYBIRD 🎁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/ #programming

detail
{'title': 'Javascript Animations For Beginners', 'heatmap': [{'end': 663.539, 'start': 613.2, 'weight': 1}, {'end': 2169.048, 'start': 2128.269, 'weight': 0.916}, {'end': 2277.969, 'start': 2239.656, 'weight': 0.761}], 'summary': "A javascript animation course offers a free first chapter with an 'early bird' discount code, includes creating web elements like a cookie pop-up with svg animations, preparing svgs, adding css styling techniques, and using gsap library for complex animations and sequences, including cookie animations with various easing options.", 'chapters': [{'end': 41.74, 'segs': [{'end': 41.74, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 1.769, 'text': 'hey there, my gorgeous friends on the internet.', 'start': 0.069, 'duration': 1.7}, {'end': 3.99, 'text': 'hope you guys are doing well in this episode.', 'start': 1.769, 'duration': 2.221}, {'end': 8.01, 'text': 'i want to give you the first chapter of the ultimate javascript animation course.', 'start': 3.99, 'duration': 4.02}, {'end': 9.451, 'text': 'i always do this as a tradition.', 'start': 8.01, 'duration': 1.441}, {'end': 13.072, 'text': 'whenever i release a new course, you get one chapter for free,', 'start': 9.451, 'duration': 3.621}, {'end': 21.454, 'text': "just to see if you like it and if you're interested in the full version which is still on the website with the discount code early bird.", 'start': 13.072, 'duration': 8.382}, {'end': 24.515, 'text': 'so use that before it expires.', 'start': 21.454, 'duration': 3.061}, {'end': 26.636, 'text': 'so here us at developed by ed.', 'start': 24.515, 'duration': 2.121}, {'end': 30.857, 'text': 'we want to wish you a Merry Christmas and a happy new year.', 'start': 26.636, 'duration': 4.221}, {'end': 36.86, 'text': "So have an awesome time and we'll see each other by the beginning of next year.", 'start': 30.877, 'duration': 5.983}, {'end': 37.841, 'text': 'Take care.', 'start': 36.88, 'duration': 0.961}, {'end': 41.74, 'text': 'Hello everybody and welcome to chapter two.', 'start': 39.059, 'duration': 2.681}], 'summary': 'Offering first chapter of javascript animation course for free, with discount code early bird. wishing merry christmas and happy new year.', 'duration': 41.671, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE69.jpg'}], 'start': 0.069, 'title': 'Javascript animation course intro', 'summary': "Introduces the first free chapter of the javascript animation course, with a 'early bird' discount code for the full version, and ends with holiday wishes. it also hints at the upcoming release of chapter two.", 'chapters': [{'end': 41.74, 'start': 0.069, 'title': 'Javascript animation course intro', 'summary': "Introduces the first free chapter of the javascript animation course, with a discount code 'early bird' available for the full version, and ends with holiday wishes. the chapter also hints at the upcoming release of chapter two.", 'duration': 41.671, 'highlights': ["The chapter introduces the first free chapter of the JavaScript animation course, with a discount code 'early bird' available for the full version.", 'The chapter ends with holiday wishes for Merry Christmas and a happy new year.', 'The chapter hints at the upcoming release of chapter two.']}], 'duration': 41.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE69.jpg', 'highlights': ["The chapter introduces the first free chapter of the JavaScript animation course, with a discount code 'early bird' available for the full version.", 'The chapter hints at the upcoming release of chapter two.', 'The chapter ends with holiday wishes for Merry Christmas and a happy new year.']}, {'end': 802.062, 'segs': [{'end': 91.545, 'src': 'embed', 'start': 41.78, 'weight': 0, 'content': [{'end': 51.703, 'text': "We're going to start building our first project, which is going to be a classic cookie pop-up that you get on every website and you're like ugh,", 'start': 41.78, 'duration': 9.923}, {'end': 52.343, 'text': 'stop it.', 'start': 51.703, 'duration': 0.64}, {'end': 55.824, 'text': 'Well, at least ours is going to be quite nice and fancy looking.', 'start': 52.623, 'duration': 3.201}, {'end': 58.505, 'text': "So let me refresh and show you what we're going to build.", 'start': 55.884, 'duration': 2.621}, {'end': 59.406, 'text': 'So there we go.', 'start': 58.785, 'duration': 0.621}, {'end': 65.049, 'text': 'We have this nice pop up, boom, and we have a nice cookie animation going there.', 'start': 59.446, 'duration': 5.603}, {'end': 66.99, 'text': 'So let me refresh that again for you to see.', 'start': 65.129, 'duration': 1.861}, {'end': 72.192, 'text': "Now, again, the video that you're currently seeing is running on 30 FPS.", 'start': 67.61, 'duration': 4.582}, {'end': 76.475, 'text': "So when you're going to build it out, it's going to look much, much nicer and much smoother.", 'start': 72.733, 'duration': 3.742}, {'end': 84.279, 'text': 'So I know this is going to be, unfortunately, all the videos are going to be 30 FPS.', 'start': 77.035, 'duration': 7.244}, {'end': 87.221, 'text': 'So always going to look nicer on your end.', 'start': 84.819, 'duration': 2.402}, {'end': 91.545, 'text': 'Okay, now the course files and everything.', 'start': 87.981, 'duration': 3.564}], 'summary': 'Building a fancy cookie pop-up with a nice animation, running at 30 fps.', 'duration': 49.765, 'max_score': 41.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE41780.jpg'}, {'end': 193.102, 'src': 'embed', 'start': 164.443, 'weight': 3, 'content': [{'end': 171.988, 'text': "All right, so shift one and tab is going to generate an empty file for us and we're going to name this cookie pop up.", 'start': 164.443, 'duration': 7.545}, {'end': 173.689, 'text': 'There we go.', 'start': 172.008, 'duration': 1.681}, {'end': 184.676, 'text': 'And now the other two that we need is style.css and click plus again there app.js for our JavaScript.', 'start': 174.529, 'duration': 10.147}, {'end': 187.197, 'text': "Okay, so let's link these two together.", 'start': 185.456, 'duration': 1.741}, {'end': 193.102, 'text': "We're going to say link and hit tab dot slash style.css.", 'start': 187.217, 'duration': 5.885}], 'summary': "Creating an empty file named 'cookie pop up', along with style.css and app.js for javascript.", 'duration': 28.659, 'max_score': 164.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE164443.jpg'}, {'end': 269.516, 'src': 'embed', 'start': 229.431, 'weight': 1, 'content': [{'end': 236.335, 'text': 'but I really want to show you how we need to set up an SVG to properly work with our animations,', 'start': 229.431, 'duration': 6.904}, {'end': 243.72, 'text': 'because a lot of times you are going to want to customize them and to break them apart into smaller pieces,', 'start': 236.335, 'duration': 7.385}, {'end': 246.982, 'text': 'because you might want to animate the crumbs separately from the cookie.', 'start': 243.72, 'duration': 3.262}, {'end': 256.868, 'text': 'You might have a character as an SVG and you want to animate maybe the bicycle and the scarf and his glasses or whatever, all independently.', 'start': 247.382, 'duration': 9.486}, {'end': 264.873, 'text': 'So you need to actually import it either in Illustrator or Figma, break them apart there and then import it in your code.', 'start': 257.327, 'duration': 7.546}, {'end': 269.516, 'text': 'So I just want to show you that whole process before we go into the second part.', 'start': 264.913, 'duration': 4.603}], 'summary': 'Setting up svg for customizable animations and independent parts.', 'duration': 40.085, 'max_score': 229.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE229431.jpg'}, {'end': 663.539, 'src': 'heatmap', 'start': 613.2, 'weight': 1, 'content': [{'end': 624.931, 'text': 'Now one important thing is you can go down here and actually you can just right click on this, copy paste as and you can copy as SVG.', 'start': 613.2, 'duration': 11.731}, {'end': 634.942, 'text': 'Click that and now you can just go directly back into your code and paste it in there and you are pretty much done.', 'start': 626.093, 'duration': 8.849}, {'end': 644.453, 'text': 'I know this is large, this looks scary, but VS Code has this ability of you just going here and just closing it up like that.', 'start': 635.582, 'duration': 8.871}, {'end': 647.577, 'text': "okay?. So don't really worry too much about it.", 'start': 644.453, 'duration': 3.124}, {'end': 650.876, 'text': "Okay, so let's start.", 'start': 648.675, 'duration': 2.201}, {'end': 652.076, 'text': 'So I have that copied over.', 'start': 650.896, 'duration': 1.18}, {'end': 653.416, 'text': "I'm not going to paste it in yet.", 'start': 652.096, 'duration': 1.32}, {'end': 661.038, 'text': 'I want to create a diff first called cookie container, cookie container and hit tab.', 'start': 654.356, 'duration': 6.682}, {'end': 663.539, 'text': "Okay, let's open this up.", 'start': 661.678, 'duration': 1.861}], 'summary': 'Demonstrating how to copy and paste svg in vs code for creating a cookie container.', 'duration': 50.339, 'max_score': 613.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE613200.jpg'}, {'end': 704.927, 'src': 'embed', 'start': 674.026, 'weight': 8, 'content': [{'end': 681.456, 'text': "So we're gonna need to explore in this whole path section where our crumb is and where our cookie is.", 'start': 674.026, 'duration': 7.43}, {'end': 691.464, 'text': 'Now another cool thing that Figma does is if you hit export here, and just scroll down, you can export this SVG.', 'start': 682.657, 'duration': 8.807}, {'end': 696.525, 'text': 'And what you can do here, if you open up, where was it? The three dots here.', 'start': 691.964, 'duration': 4.561}, {'end': 704.927, 'text': 'If you click that, you can do include ID attribute, which exports layers names using ID attributes.', 'start': 697.165, 'duration': 7.762}], 'summary': 'Explore path section for crumb and cookie, export svg with id attributes.', 'duration': 30.901, 'max_score': 674.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE674026.jpg'}], 'start': 41.78, 'title': 'Creating web elements', 'summary': 'Covers building a classic cookie pop-up with a nice cookie animation, setting up project folders and files, linking css and javascript, and importing an svg for custom animations. it also demonstrates the process of creating and customizing svg files in figma, including selecting resolutions, separating elements, grouping, exporting, and testing, to use in web development.', 'chapters': [{'end': 349.598, 'start': 41.78, 'title': 'Building a cookie pop-up', 'summary': 'Covers building a classic cookie pop-up with a nice cookie animation, setting up project folders and files, linking css and javascript, and importing an svg for custom animations.', 'duration': 307.818, 'highlights': ['The chapter covers building a classic cookie pop-up with a nice cookie animation, setting up project folders and files, linking CSS and JavaScript, and importing an SVG for custom animations.', 'The video running at 30 FPS will result in a much nicer and smoother output when built, and finished files and starter files will be linked for access.', 'The process of setting up an SVG for custom animations is explained, emphasizing the need to break apart SVGs in Illustrator or Figma for independent animation of components.', 'Instructions are provided for setting up project folders, creating necessary files like index.html, style.css, and app.js, and linking them together for the project.', 'The presenter demonstrates the process of obtaining an SVG for custom animations using SVG repo and Figma, offering guidance on using Figma to work with SVGs.', 'The presenter guides the audience through setting up a new folder for the project, creating necessary files such as index.html, style.css, and app.js, and linking them together for the project.']}, {'end': 802.062, 'start': 350.559, 'title': 'Creating and customizing svg in figma', 'summary': 'Demonstrates the process of creating and customizing svg files in figma, including selecting resolutions, separating elements, grouping, exporting, and testing, to use in web development.', 'duration': 451.503, 'highlights': ['The chapter explains the process of creating and customizing SVG files in Figma, including selecting resolutions, separating elements, grouping, exporting, and testing, to use in web development.', 'The speaker demonstrates how to select resolutions and scales down elements while creating and customizing SVG files.', 'The chapter covers the process of grouping and organizing elements in Figma to create and customize SVG files effectively.', 'The speaker emphasizes the importance of exporting the SVG file with included ID attributes for effective use in web development.']}], 'duration': 760.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE41780.jpg', 'highlights': ['The chapter covers building a classic cookie pop-up with a nice cookie animation, setting up project folders and files, linking CSS and JavaScript, and importing an SVG for custom animations.', 'The process of creating and customizing SVG files in Figma is explained, including selecting resolutions, separating elements, grouping, exporting, and testing, to use in web development.', 'The video running at 30 FPS will result in a much nicer and smoother output when built, and finished files and starter files will be linked for access.', 'Instructions are provided for setting up project folders, creating necessary files like index.html, style.css, and app.js, and linking them together for the project.', 'The presenter demonstrates the process of obtaining an SVG for custom animations using SVG repo and Figma, offering guidance on using Figma to work with SVGs.', 'The process of setting up an SVG for custom animations is explained, emphasizing the need to break apart SVGs in Illustrator or Figma for independent animation of components.', 'The speaker demonstrates how to select resolutions and scales down elements while creating and customizing SVG files.', 'The chapter covers the process of grouping and organizing elements in Figma to create and customize SVG files effectively.', 'The presenter emphasizes the importance of exporting the SVG file with included ID attributes for effective use in web development.']}, {'end': 1193.617, 'segs': [{'end': 878.65, 'src': 'embed', 'start': 849.192, 'weight': 0, 'content': [{'end': 849.912, 'text': 'You could do that.', 'start': 849.192, 'duration': 0.72}, {'end': 858.134, 'text': "The issue with this is that we cannot animate the pieces individually because we're going to do some selections on the cookie.", 'start': 850.072, 'duration': 8.062}, {'end': 860.51, 'text': "Okay, so that's it.", 'start': 858.928, 'duration': 1.582}, {'end': 863.673, 'text': "That's how you can prepare your SVGs ready to be animated.", 'start': 860.85, 'duration': 2.823}, {'end': 867.517, 'text': 'And you can apply this to pretty much anything out there on the internet.', 'start': 863.693, 'duration': 3.824}, {'end': 870.08, 'text': 'Okay, thank you so much for watching.', 'start': 868.238, 'duration': 1.842}, {'end': 871.822, 'text': "Let's take a little break here.", 'start': 870.32, 'duration': 1.502}, {'end': 878.65, 'text': "And I'm just trying to get on my second screen to stop the recording and just trying to disguise it.", 'start': 871.842, 'duration': 6.808}], 'summary': 'Prepare svgs for animation, applicable to various internet content.', 'duration': 29.458, 'max_score': 849.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE849192.jpg'}, {'end': 960.705, 'src': 'embed', 'start': 927.091, 'weight': 4, 'content': [{'end': 930.113, 'text': 'We have our cookie container all up and ready.', 'start': 927.091, 'duration': 3.022}, {'end': 933.645, 'text': "I'll add a little comment here for you to see.", 'start': 931.302, 'duration': 2.343}, {'end': 937.429, 'text': 'Well, that opened it up for some reason.', 'start': 933.665, 'duration': 3.764}, {'end': 939.492, 'text': 'Keep it closed.', 'start': 938.731, 'duration': 0.761}, {'end': 942.535, 'text': 'There we go.', 'start': 940.092, 'duration': 2.443}, {'end': 947.661, 'text': 'How weird is that? I just wanted to add a little comment here.', 'start': 943.036, 'duration': 4.625}, {'end': 953.258, 'text': 'This is our cookie just to keep everything nice and organized.', 'start': 948.553, 'duration': 4.705}, {'end': 954.098, 'text': 'Keep it closed.', 'start': 953.398, 'duration': 0.7}, {'end': 956.761, 'text': "Jeez Okay, that's our cookie.", 'start': 954.359, 'duration': 2.402}, {'end': 960.705, 'text': "And now we're going to add our text.", 'start': 958.002, 'duration': 2.703}], 'summary': 'Preparing cookie container for text addition.', 'duration': 33.614, 'max_score': 927.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE927091.jpg'}, {'end': 1124.81, 'src': 'embed', 'start': 1061.72, 'weight': 5, 'content': [{'end': 1063.861, 'text': 'Let me reset the zooming.', 'start': 1061.72, 'duration': 2.141}, {'end': 1066.841, 'text': 'Okay, that should be it.', 'start': 1063.881, 'duration': 2.96}, {'end': 1070.662, 'text': "Perfect And let's style this up a little bit.", 'start': 1067.141, 'duration': 3.521}, {'end': 1074.203, 'text': "So let's head back here, go to style.css.", 'start': 1071.282, 'duration': 2.921}, {'end': 1077.56, 'text': "I'm going to go over.", 'start': 1076.92, 'duration': 0.64}, {'end': 1081.681, 'text': "I'm going to do the basic removal of things.", 'start': 1077.58, 'duration': 4.101}, {'end': 1084.382, 'text': "I'm just removing all the margins and everything.", 'start': 1081.701, 'duration': 2.681}, {'end': 1090.364, 'text': 'Remove all the padding and do a little box sizing border box and hit save.', 'start': 1084.402, 'duration': 5.962}, {'end': 1091.485, 'text': 'There we go.', 'start': 1091.024, 'duration': 0.461}, {'end': 1094.646, 'text': 'So now everything is nice and stuck together there.', 'start': 1091.645, 'duration': 3.001}, {'end': 1097.907, 'text': "I'm just going to grab the body at a height of 100 VH.", 'start': 1095.586, 'duration': 2.321}, {'end': 1098.227, 'text': 'There we go.', 'start': 1097.927, 'duration': 0.3}, {'end': 1104.951, 'text': "Let's go down here.", 'start': 1104.127, 'duration': 0.824}, {'end': 1109.168, 'text': "We might not even need this actually, but I'll keep it.", 'start': 1104.971, 'duration': 4.197}, {'end': 1112.559, 'text': "Cookie, container, let's grab the container.", 'start': 1109.997, 'duration': 2.562}, {'end': 1114.581, 'text': "Let's get rid of it.", 'start': 1113.92, 'duration': 0.661}, {'end': 1116.262, 'text': "If we need it, we'll add it.", 'start': 1114.861, 'duration': 1.401}, {'end': 1121.287, 'text': "I'll add a nice little background to this.", 'start': 1118.184, 'duration': 3.103}, {'end': 1124.81, 'text': "So background, we'll do a nice linear gradient.", 'start': 1121.307, 'duration': 3.503}], 'summary': 'Styling adjustments made to the code, including removal of margins and padding, and addition of background gradient.', 'duration': 63.09, 'max_score': 1061.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1061720.jpg'}], 'start': 803.083, 'title': 'Preparing svgs for animation and adding cookie policy', 'summary': 'Covers preparing svgs for animation by removing unnecessary code, ensuring proper selection, and saving changes, as well as adding a cookie policy to an svg, including creating a cookie container, title, subtitle, and button, along with css styling.', 'chapters': [{'end': 896.601, 'start': 803.083, 'title': 'Preparing svgs for animation', 'summary': 'Demonstrates how to prepare svgs for animation by removing unnecessary code, ensuring proper selection, and saving the changes, providing a versatile approach applicable to various elements on the internet.', 'duration': 93.518, 'highlights': ['The process of preparing SVGs for animation involves removing unnecessary code, such as crumbs, and ensuring proper selection, ultimately allowing for individual piece animation, providing a versatile approach applicable to various elements on the internet.', 'Demonstrating the process of removing unnecessary code and ensuring proper selection results in successful animation preparation, ensuring the SVGs are ready for versatile application across various internet elements.', 'The demonstration showcases the process of preparing SVGs for animation, emphasizing the ability to apply the approach to a wide range of elements on the internet.', 'Importing an image and using a source of dot slash cookie SVG repo is discussed as a potential alternative for preparing SVGs for animation, highlighting the limitation of not being able to animate the pieces individually.']}, {'end': 1193.617, 'start': 897.902, 'title': 'Adding cookie policy to svg', 'summary': 'Involves adding a cookie policy to an svg, including creating a cookie container, cookie title, cookie subtitle, and a button, as well as styling the content with css.', 'duration': 295.715, 'highlights': ["Created a cookie container with a comment for organization, a title with 'cookie policy', a subtitle with 'we use analytical cookies', and an 'okay, got it' button.", 'Styled the content by setting the background with a linear gradient and adjusting the body height to 100 VH.', 'Removed margins and padding, and applied box-sizing border box to ensure everything is nicely stuck together.']}], 'duration': 390.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE803083.jpg', 'highlights': ['The process of preparing SVGs for animation involves removing unnecessary code and ensuring proper selection, ultimately allowing for individual piece animation, providing a versatile approach applicable to various elements on the internet.', 'Demonstrating the process of removing unnecessary code and ensuring proper selection results in successful animation preparation, ensuring the SVGs are ready for versatile application across various internet elements.', 'The demonstration showcases the process of preparing SVGs for animation, emphasizing the ability to apply the approach to a wide range of elements on the internet.', 'Importing an image and using a source of dot slash cookie SVG repo is discussed as a potential alternative for preparing SVGs for animation, highlighting the limitation of not being able to animate the pieces individually.', "Created a cookie container with a comment for organization, a title with 'cookie policy', a subtitle with 'we use analytical cookies', and an 'okay, got it' button.", 'Styled the content by setting the background with a linear gradient and adjusting the body height to 100 VH.', 'Removed margins and padding, and applied box-sizing border box to ensure everything is nicely stuck together.']}, {'end': 2015.634, 'segs': [{'end': 1261.077, 'src': 'embed', 'start': 1196.804, 'weight': 0, 'content': [{'end': 1200.746, 'text': '9B, 6C, 50.', 'start': 1196.804, 'duration': 3.942}, {'end': 1207.868, 'text': 'There we go.', 'start': 1200.746, 'duration': 7.122}, {'end': 1209.369, 'text': "So that's one.", 'start': 1208.828, 'duration': 0.541}, {'end': 1213.99, 'text': 'So you can also define the position.', 'start': 1212.009, 'duration': 1.981}, {'end': 1215.571, 'text': 'So I want it from 0%.', 'start': 1214.03, 'duration': 1.541}, {'end': 1217.571, 'text': "And then I'll add a comma.", 'start': 1215.571, 'duration': 2}, {'end': 1221.018, 'text': "And the other color is going to be Let's see.", 'start': 1217.811, 'duration': 3.207}, {'end': 1224.101, 'text': 'So there we go.', 'start': 1221.039, 'duration': 3.062}, {'end': 1225.943, 'text': 'Hashtag master now.', 'start': 1224.722, 'duration': 1.221}, {'end': 1232.928, 'text': '4F2626 I want this to go all the way to a hundred percent.', 'start': 1226.563, 'duration': 6.365}, {'end': 1233.849, 'text': 'All right.', 'start': 1233.669, 'duration': 0.18}, {'end': 1234.309, 'text': "And that's it.", 'start': 1233.869, 'duration': 0.44}, {'end': 1235.47, 'text': "So let's take a look.", 'start': 1234.65, 'duration': 0.82}, {'end': 1235.931, 'text': 'There we go.', 'start': 1235.51, 'duration': 0.421}, {'end': 1238.593, 'text': 'So as you can see, it goes from this side all the way there.', 'start': 1235.971, 'duration': 2.622}, {'end': 1242.377, 'text': "Perfect Let's go down here.", 'start': 1239.353, 'duration': 3.024}, {'end': 1245.72, 'text': 'And what I want to do is actually center it in the middle.', 'start': 1242.397, 'duration': 3.323}, {'end': 1253.048, 'text': 'So one way we can do that very, very easily is add a position absolute to this and just kind of move it around.', 'start': 1246.181, 'duration': 6.867}, {'end': 1254.99, 'text': 'Position absolute.', 'start': 1253.569, 'duration': 1.421}, {'end': 1261.077, 'text': "And now if I do top 50%, that's going to push it down 50% from the top of the screen.", 'start': 1255.791, 'duration': 5.286}], 'summary': 'The transcript pertains to defining color positions and percentages for a design.', 'duration': 64.273, 'max_score': 1196.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1196804.jpg'}, {'end': 1317.434, 'src': 'embed', 'start': 1287.706, 'weight': 1, 'content': [{'end': 1293.65, 'text': 'So what we want to do is take the size of this cookie pop up and move that back by 50%.', 'start': 1287.706, 'duration': 5.944}, {'end': 1294.37, 'text': 'All right.', 'start': 1293.65, 'duration': 0.72}, {'end': 1298.192, 'text': "So half of this, and then it's going to be perfectly centered.", 'start': 1295.091, 'duration': 3.101}, {'end': 1306.117, 'text': 'So the way you can do that is do a transform, translate and do minus 50% minus 50%.', 'start': 1298.573, 'duration': 7.544}, {'end': 1309.659, 'text': 'So both for the X and for the Y and hit save.', 'start': 1306.117, 'duration': 3.542}, {'end': 1310.82, 'text': 'So there we go.', 'start': 1309.679, 'duration': 1.141}, {'end': 1312.721, 'text': "Now it's perfectly centered.", 'start': 1311.1, 'duration': 1.621}, {'end': 1317.434, 'text': 'Cool So I want the color to be white in here.', 'start': 1314.571, 'duration': 2.863}], 'summary': 'Resize cookie pop up by 50% and center it, set color to white.', 'duration': 29.728, 'max_score': 1287.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1287706.jpg'}, {'end': 1480.545, 'src': 'embed', 'start': 1412.414, 'weight': 2, 'content': [{'end': 1416.537, 'text': "And we'll select a light one.", 'start': 1412.414, 'duration': 4.123}, {'end': 1421.78, 'text': "And we'll select a regular one.", 'start': 1418.198, 'duration': 3.582}, {'end': 1424.013, 'text': 'There we go.', 'start': 1423.533, 'duration': 0.48}, {'end': 1433.639, 'text': 'So what we need to do is just copy this over this link here copy, bring it back into our index.html.', 'start': 1424.313, 'duration': 9.326}, {'end': 1435.78, 'text': 'paste it here right below the title.', 'start': 1433.639, 'duration': 2.141}, {'end': 1443.345, 'text': "hit save, go back here and we'll just add it in this cookie container.", 'start': 1435.78, 'duration': 7.565}, {'end': 1448.128, 'text': "So font family, we'll do Poppins.", 'start': 1443.685, 'duration': 4.443}, {'end': 1451.429, 'text': 'comma sans-serif.', 'start': 1449.605, 'duration': 1.824}, {'end': 1456.138, 'text': "So this is kind of like a backup in case this doesn't load up, just default to sans-serif.", 'start': 1451.469, 'duration': 4.669}, {'end': 1458.102, 'text': "Let's hit save and take a look.", 'start': 1456.9, 'duration': 1.202}, {'end': 1460.247, 'text': 'Ooh, much nicer now.', 'start': 1458.744, 'duration': 1.503}, {'end': 1464.879, 'text': 'So what I wanna do is actually add a light one to this and a bold to this.', 'start': 1461.118, 'duration': 3.761}, {'end': 1474.263, 'text': "So we can do a, let's change the font size to 1.2 rem, make it much, actually not here.", 'start': 1465.96, 'duration': 8.303}, {'end': 1477.204, 'text': 'We wanna go over and grab the cookie title.', 'start': 1474.903, 'duration': 2.301}, {'end': 1480.545, 'text': "Let's just do cookie title.", 'start': 1477.224, 'duration': 3.321}], 'summary': 'Selecting and adding fonts, changing font size, and updating styles in index.html.', 'duration': 68.131, 'max_score': 1412.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1412414.jpg'}, {'end': 1629.613, 'src': 'embed', 'start': 1598.103, 'weight': 3, 'content': [{'end': 1600.723, 'text': 'And what else do we need? The button.', 'start': 1598.103, 'duration': 2.62}, {'end': 1602.904, 'text': "I don't think we added anything.", 'start': 1601.503, 'duration': 1.401}, {'end': 1604.364, 'text': "We'll just do button for this.", 'start': 1602.924, 'duration': 1.44}, {'end': 1606.945, 'text': "So let's get rid of the border style.", 'start': 1605.224, 'duration': 1.721}, {'end': 1610.175, 'text': "Let's say none.", 'start': 1609.434, 'duration': 0.741}, {'end': 1612.657, 'text': 'All right, just get rid of that.', 'start': 1610.195, 'duration': 2.462}, {'end': 1616.441, 'text': 'Add a little padding to it.', 'start': 1612.677, 'duration': 3.764}, {'end': 1618.944, 'text': '0.5 rem and 1 rem.', 'start': 1616.461, 'duration': 2.483}, {'end': 1624.91, 'text': 'So 0.5 is going to be the top and bottom, and left and right is going to be this 1 rem.', 'start': 1619.304, 'duration': 5.606}, {'end': 1626.011, 'text': 'So there we go.', 'start': 1625.49, 'duration': 0.521}, {'end': 1629.613, 'text': 'So just 0.5 there, 0.5 there, 1, 1.', 'start': 1626.031, 'duration': 3.582}], 'summary': 'Adjust button styling with 0.5 rem padding and 1 rem border', 'duration': 31.51, 'max_score': 1598.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1598103.jpg'}, {'end': 1755.432, 'src': 'embed', 'start': 1721.803, 'weight': 4, 'content': [{'end': 1725.465, 'text': 'So we added display flex.', 'start': 1721.803, 'duration': 3.662}, {'end': 1727.826, 'text': 'There we go.', 'start': 1727.386, 'duration': 0.44}, {'end': 1730.707, 'text': 'So that allows us to do align items.', 'start': 1728.246, 'duration': 2.461}, {'end': 1737.383, 'text': 'Center, hit save, and that drops everything in the center vertically.', 'start': 1732.341, 'duration': 5.042}, {'end': 1746.325, 'text': 'Cool And then we can just do a justify content space between and hit save.', 'start': 1738.583, 'duration': 7.742}, {'end': 1747.806, 'text': "Let's see how that looks.", 'start': 1746.885, 'duration': 0.921}, {'end': 1755.432, 'text': "well, it doesn't look that good, because we don't really have that much space going on here, so we actually don't even need it.", 'start': 1748.766, 'duration': 6.666}], 'summary': 'Added display flex, aligned items center, and justified content space between for layout.', 'duration': 33.629, 'max_score': 1721.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1721803.jpg'}], 'start': 1196.804, 'title': 'Css styling techniques', 'summary': 'Covers creating color gradients, centering elements, and styling a cookie popup using specific css commands and measurements for achieving desired design effects.', 'chapters': [{'end': 1286.946, 'start': 1196.804, 'title': 'Css positioning and color gradient', 'summary': 'Demonstrates creating a color gradient using css and positioning an element in the middle of the screen through an easy method, achieving horizontal and vertical centering.', 'duration': 90.142, 'highlights': ['The chapter demonstrates creating a color gradient using CSS, transitioning from 0% to 100%, with the color code #4F2626.', "It illustrates positioning an element in the middle of the screen using 'position: absolute', adjusting the top and left properties to achieve vertical and horizontal centering.", "The process involves defining the position, setting the color gradient from 0% to 100% using the color code #4F2626, and centering the element in the middle of the screen by applying 'position: absolute' and adjusting the top and left properties."]}, {'end': 2015.634, 'start': 1287.706, 'title': 'Styling cookie popup with css', 'summary': 'Details the process of styling a cookie popup by adjusting size, color, font, and layout using css, with specific commands and measurements provided throughout the process.', 'duration': 727.928, 'highlights': ['Adjusted size of cookie popup by using transform and translate commands to center it, with a fixed width of 20rem and height of 10rem.', 'Applied Poppins font family to the cookie container, with a fallback to sans-serif, resulting in a more visually appealing appearance.', 'Altered the font size and weight for the cookie title and subtitle to enhance the visual presentation.', 'Styled the button by removing border style, adding padding, setting color, adjusting font size, and applying border radius for a cohesive look.', 'Utilized CSS commands such as display flex, align items, and justify content to modify the layout and spacing of the elements within the popup.']}], 'duration': 818.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE1196804.jpg', 'highlights': ['Demonstrates creating a color gradient using CSS, transitioning from 0% to 100% with #4F2626.', 'Adjusted size of cookie popup using transform and translate commands to center it, with a fixed width of 20rem and height of 10rem.', 'Applied Poppins font family to the cookie container, with a fallback to sans-serif.', 'Styled the button by removing border style, adding padding, setting color, adjusting font size, and applying border radius.', 'Utilized CSS commands such as display flex, align items, and justify content to modify the layout and spacing of the elements within the popup.', 'Altered the font size and weight for the cookie title and subtitle to enhance the visual presentation.', "Illustrates positioning an element in the middle of the screen using 'position: absolute', adjusting the top and left properties."]}, {'end': 2752.798, 'segs': [{'end': 2111.557, 'src': 'embed', 'start': 2016.514, 'weight': 0, 'content': [{'end': 2017.455, 'text': 'Good There we go.', 'start': 2016.514, 'duration': 0.941}, {'end': 2019.176, 'text': "So there's our little pop up.", 'start': 2017.635, 'duration': 1.541}, {'end': 2023.639, 'text': 'Again, this course is not too much about design and styling.', 'start': 2019.937, 'duration': 3.702}, {'end': 2027.102, 'text': "It's more about animations, but I think that's quite good looking.", 'start': 2023.679, 'duration': 3.423}, {'end': 2033.587, 'text': "Okay, this went on for quite a bit now, so let's just stop and head into the JavaScript.", 'start': 2027.822, 'duration': 5.765}, {'end': 2034.368, 'text': "Let's go.", 'start': 2033.948, 'duration': 0.42}, {'end': 2044.918, 'text': "This is going to be a really fun and interesting episode, because I'm going to introduce you to one of the best, if not the best,", 'start': 2035.429, 'duration': 9.489}, {'end': 2048.741, 'text': 'JavaScript libraries out there for animations, called GSAP.', 'start': 2044.918, 'duration': 3.823}, {'end': 2058.23, 'text': 'Now, why would we use a library and not just add classes and stuff like that? Well, for once, GSAP has amazing browser support.', 'start': 2049.342, 'duration': 8.888}, {'end': 2070.199, 'text': "So you can do any type of animation here because there's some quirks using different properties when you want to animate different properties.", 'start': 2058.29, 'duration': 11.909}, {'end': 2075.643, 'text': 'They might behave differently depending which browser you are on.', 'start': 2070.458, 'duration': 5.185}, {'end': 2081.788, 'text': 'So Green Sock actually gives you a nice consistency across all of them.', 'start': 2076.003, 'duration': 5.785}, {'end': 2087.429, 'text': 'Now, another big thing is creating sequences and more complex animations.', 'start': 2082.068, 'duration': 5.361}, {'end': 2091.05, 'text': "It's really, really easy to do it with GSAP.", 'start': 2088.21, 'duration': 2.84}, {'end': 2093.291, 'text': 'Anything that you can think of.', 'start': 2091.491, 'duration': 1.8}, {'end': 2097.352, 'text': 'regarding SVG animations, it allows you to do scroll-based animations,', 'start': 2093.291, 'duration': 4.061}, {'end': 2102.494, 'text': "so it's going to calculate the percentage of how much you scroll and animate the opacity based on that.", 'start': 2097.352, 'duration': 5.142}, {'end': 2107.635, 'text': 'Just tons and tons of features, amazing easing functionality.', 'start': 2103.734, 'duration': 3.901}, {'end': 2109.376, 'text': 'Just go and check out their website.', 'start': 2108.075, 'duration': 1.301}, {'end': 2111.557, 'text': "I think you'll absolutely love it.", 'start': 2109.396, 'duration': 2.161}], 'summary': 'Introduction to gsap, a javascript library for animations with broad browser support and powerful features.', 'duration': 95.043, 'max_score': 2016.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2016514.jpg'}, {'end': 2169.048, 'src': 'heatmap', 'start': 2128.269, 'weight': 0.916, 'content': [{'end': 2130.69, 'text': "It's going to give you this link here in CDN.js.", 'start': 2128.269, 'duration': 2.421}, {'end': 2131.751, 'text': 'So click on that.', 'start': 2130.95, 'duration': 0.801}, {'end': 2133.972, 'text': "It's going to open up this page.", 'start': 2132.792, 'duration': 1.18}, {'end': 2137.675, 'text': 'And you can just go here and click on copy script tag.', 'start': 2134.353, 'duration': 3.322}, {'end': 2141.737, 'text': 'Once you copy it, you can head back over to the codes.', 'start': 2138.796, 'duration': 2.941}, {'end': 2144.579, 'text': "Where's the codes? Here it is.", 'start': 2142.998, 'duration': 1.581}, {'end': 2151.383, 'text': 'Go over here and just right above our app.js, hit paste and save.', 'start': 2146.58, 'duration': 4.803}, {'end': 2156.867, 'text': 'Okay Now let me show you the simplicity of this library.', 'start': 2152.104, 'duration': 4.763}, {'end': 2162.09, 'text': "Let's close everything up, open up our app.js and let's get going.", 'start': 2158.188, 'duration': 3.902}, {'end': 2169.048, 'text': "Okay, so let's say I want to animate, just as a small little example here.", 'start': 2162.765, 'duration': 6.283}], 'summary': 'Guide on integrating cdn.js link for library and using it for animations in app.js.', 'duration': 40.779, 'max_score': 2128.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2128269.jpg'}, {'end': 2277.969, 'src': 'heatmap', 'start': 2239.656, 'weight': 0.761, 'content': [{'end': 2242.116, 'text': "So I'm going to say do it for one second.", 'start': 2239.656, 'duration': 2.46}, {'end': 2243.137, 'text': "And that's it.", 'start': 2242.676, 'duration': 0.461}, {'end': 2244.337, 'text': "I'm going to hit save.", 'start': 2243.157, 'duration': 1.18}, {'end': 2247.998, 'text': "Let's head back, hit refresh, and take a look at that.", 'start': 2244.817, 'duration': 3.181}, {'end': 2249.839, 'text': "It's animating downwards.", 'start': 2248.518, 'duration': 1.321}, {'end': 2251.519, 'text': 'We can move it down a bit more.', 'start': 2250.359, 'duration': 1.16}, {'end': 2252.839, 'text': 'We can do 200.', 'start': 2252.259, 'duration': 0.58}, {'end': 2254, 'text': 'Hit save.', 'start': 2252.839, 'duration': 1.161}, {'end': 2255.18, 'text': 'And look at that.', 'start': 2254.6, 'duration': 0.58}, {'end': 2256.801, 'text': 'It goes down.', 'start': 2255.2, 'duration': 1.601}, {'end': 2264.563, 'text': "Now, one issue with this is that we're having is that we can still see it here.", 'start': 2257.241, 'duration': 7.322}, {'end': 2269.885, 'text': 'What I want to do is actually hide all the content if it overflows.', 'start': 2266.003, 'duration': 3.882}, {'end': 2276.889, 'text': 'I can head back here to style.css, go over to this cookie container, and just add an overflow hidden.', 'start': 2270.526, 'duration': 6.363}, {'end': 2277.969, 'text': "That's it.", 'start': 2277.609, 'duration': 0.36}], 'summary': "Animating content downwards for 200px and hiding overflow with 'overflow: hidden' in style.css", 'duration': 38.313, 'max_score': 2239.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2239656.jpg'}, {'end': 2441.646, 'src': 'embed', 'start': 2412.629, 'weight': 5, 'content': [{'end': 2415.15, 'text': "So we're going to actually build this whole thing out with timelines.", 'start': 2412.629, 'duration': 2.521}, {'end': 2420.193, 'text': "So I'm going to go and just get rid of everything here and hit save.", 'start': 2415.97, 'duration': 4.223}, {'end': 2431.64, 'text': 'So what a timeline allows you to do is to chain together multiple, multiple GSAP from twos or twos.', 'start': 2421.293, 'duration': 10.347}, {'end': 2438.644, 'text': "So I think the best way I can show you is to just write out the code and it's gonna all make sense.", 'start': 2431.64, 'duration': 7.004}, {'end': 2441.646, 'text': "So I'm gonna say const and we're gonna create a variable.", 'start': 2438.644, 'duration': 3.002}], 'summary': 'Creating a timeline to chain together multiple gsap from twos or twos.', 'duration': 29.017, 'max_score': 2412.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2412629.jpg'}], 'start': 2016.514, 'title': 'Gsap library for animations', 'summary': 'Introduces gsap, the best javascript library for animations with excellent browser support and the ability to create complex animations and sequences. it also demonstrates the ease of creating svg and scroll-based animations using gsap, showcasing features like opacity manipulation and easing functionality.', 'chapters': [{'end': 2087.429, 'start': 2016.514, 'title': 'Introduction to gsap library for animations', 'summary': 'Introduces gsap, the best javascript library for animations with excellent browser support and the ability to create complex animations and sequences.', 'duration': 70.915, 'highlights': ['GSAP is one of the best JavaScript libraries for animations with excellent browser support, ensuring consistency across different browsers.', 'The library allows for creating sequences and more complex animations, providing versatility and flexibility for different animation needs.', 'The course focuses more on animations rather than design and styling.']}, {'end': 2752.798, 'start': 2088.21, 'title': 'Gsap: animate svg and scroll-based animations', 'summary': "Introduces greensock animation platform (gsap) which enables easy creation of svg animations and scroll-based animations with features like opacity manipulation and easing functionality, and it demonstrates how to import and use gsap in a web project, showcasing the simplicity and intuitiveness of gsap's animation capabilities.", 'duration': 664.588, 'highlights': ['The chapter introduces GreenSock Animation Platform (GSAP) which enables easy creation of SVG animations and scroll-based animations with features like opacity manipulation and easing functionality.', "It demonstrates how to import and use GSAP in a web project, showcasing the simplicity and intuitiveness of GSAP's animation capabilities.", 'The chapter also explains the basics of GSAP, including animating elements using GSAP and demonstrating how to define multiple properties for animations, such as movement and opacity.', 'It further elaborates on the concept of timelines in GSAP, demonstrating how to chain multiple animations together to create more complex and synchronized effects, showcasing the efficiency and cleanliness of timeline-based animations.']}], 'duration': 736.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2016514.jpg', 'highlights': ['GSAP is one of the best JavaScript libraries for animations with excellent browser support, ensuring consistency across different browsers.', 'The library allows for creating sequences and more complex animations, providing versatility and flexibility for different animation needs.', 'The chapter introduces GreenSock Animation Platform (GSAP) which enables easy creation of SVG animations and scroll-based animations with features like opacity manipulation and easing functionality.', 'The course focuses more on animations rather than design and styling.', "It demonstrates how to import and use GSAP in a web project, showcasing the simplicity and intuitiveness of GSAP's animation capabilities.", 'It further elaborates on the concept of timelines in GSAP, demonstrating how to chain multiple animations together to create more complex and synchronized effects, showcasing the efficiency and cleanliness of timeline-based animations.', 'The chapter also explains the basics of GSAP, including animating elements using GSAP and demonstrating how to define multiple properties for animations, such as movement and opacity.']}, {'end': 3563.572, 'segs': [{'end': 2806.019, 'src': 'embed', 'start': 2753.178, 'weight': 0, 'content': [{'end': 2760.38, 'text': "And if you add the smaller than symbol, it's going to basically sync up with the previous animation and hit save.", 'start': 2753.178, 'duration': 7.202}, {'end': 2761.44, 'text': "Let's see.", 'start': 2761.08, 'duration': 0.36}, {'end': 2762.7, 'text': 'Look at that.', 'start': 2762.26, 'duration': 0.44}, {'end': 2766.001, 'text': 'How cool is that? Awesome.', 'start': 2763.48, 'duration': 2.521}, {'end': 2768.569, 'text': 'There we go.', 'start': 2768.069, 'duration': 0.5}, {'end': 2775.334, 'text': 'Now, another thing I want to do is add a little easing to this and make it look a bit more interesting.', 'start': 2769.69, 'duration': 5.644}, {'end': 2778.056, 'text': 'So I can actually define an easing.', 'start': 2775.794, 'duration': 2.262}, {'end': 2791.165, 'text': 'You can go over, if you search up GSAP ease on Google, you can view this easing visualizer here and check out all the different ones that they have.', 'start': 2778.876, 'duration': 12.289}, {'end': 2792.845, 'text': "I'm going to go for the first one here.", 'start': 2791.564, 'duration': 1.281}, {'end': 2797.67, 'text': 'So you can click on that and then you can just copy paste this over from down here.', 'start': 2792.865, 'duration': 4.805}, {'end': 2800.453, 'text': 'So copy it, bring it here.', 'start': 2798.391, 'duration': 2.062}, {'end': 2806.019, 'text': 'So here where I have the duration defined, I can add a comma and paste this power one out.', 'start': 2800.793, 'duration': 5.226}], 'summary': 'Using gsap ease for animation, adds easing for a more interesting look.', 'duration': 52.841, 'max_score': 2753.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2753178.jpg'}, {'end': 2861.994, 'src': 'embed', 'start': 2832.879, 'weight': 3, 'content': [{'end': 2838.34, 'text': 'Let me make this smaller, this font size title, and maybe this text as well, a little bit smaller.', 'start': 2832.879, 'duration': 5.461}, {'end': 2840.481, 'text': "See, I wasn't happy with 0.7.", 'start': 2838.9, 'duration': 1.581}, {'end': 2842.241, 'text': 'Hit save.', 'start': 2840.481, 'duration': 1.76}, {'end': 2843.761, 'text': 'There we go.', 'start': 2843.261, 'duration': 0.5}, {'end': 2847.702, 'text': "And let's do 0.6 here as well on the button and hit save.", 'start': 2843.982, 'duration': 3.72}, {'end': 2850.183, 'text': 'Okay, there we go.', 'start': 2848.983, 'duration': 1.2}, {'end': 2851.203, 'text': 'I like that much more.', 'start': 2850.443, 'duration': 0.76}, {'end': 2856.69, 'text': "And I guess I'll add a bit bigger border radius to the subtitle here.", 'start': 2851.966, 'duration': 4.724}, {'end': 2859.272, 'text': "I'll just add a bit more padding.", 'start': 2856.71, 'duration': 2.562}, {'end': 2861.994, 'text': '0.7 Hit save.', 'start': 2859.292, 'duration': 2.702}], 'summary': 'Adjust font size to 0.6, 0.7 and apply border radius and padding.', 'duration': 29.115, 'max_score': 2832.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2832879.jpg'}, {'end': 3168.337, 'src': 'embed', 'start': 3135.68, 'weight': 4, 'content': [{'end': 3136.2, 'text': 'Like that.', 'start': 3135.68, 'duration': 0.52}, {'end': 3140.522, 'text': 'And then we can do a button add event listener.', 'start': 3137.181, 'duration': 3.341}, {'end': 3145.643, 'text': "So when we click on this button, we're going to run a little function here.", 'start': 3141.102, 'duration': 4.541}, {'end': 3150.145, 'text': "So what we're going to do here is just do a GSAP dot from two.", 'start': 3146.584, 'duration': 3.561}, {'end': 3156.307, 'text': 'And what I want to do is grab the cookie container like that.', 'start': 3152.286, 'duration': 4.021}, {'end': 3161.749, 'text': 'And I wanted to do, actually, we can just do a two here.', 'start': 3157.708, 'duration': 4.041}, {'end': 3164.47, 'text': "We don't need to define a from position.", 'start': 3162.009, 'duration': 2.461}, {'end': 3168.337, 'text': 'I want it to fade out basically.', 'start': 3165.174, 'duration': 3.163}], 'summary': 'The script adds an event listener to a button to run a function using gsap to fade out the cookie container.', 'duration': 32.657, 'max_score': 3135.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE3135680.jpg'}, {'end': 3230.83, 'src': 'embed', 'start': 3200.566, 'weight': 2, 'content': [{'end': 3201.027, 'text': 'So there we go.', 'start': 3200.566, 'duration': 0.461}, {'end': 3203.408, 'text': "That's the cookie animation.", 'start': 3201.487, 'duration': 1.921}, {'end': 3204.389, 'text': 'Hope you enjoyed it.', 'start': 3203.528, 'duration': 0.861}, {'end': 3207.611, 'text': 'Hope I made you like GSAP.', 'start': 3204.949, 'duration': 2.662}, {'end': 3212.694, 'text': 'And hope you see the power of the timeline now.', 'start': 3208.392, 'duration': 4.302}, {'end': 3213.815, 'text': 'All right.', 'start': 3213.475, 'duration': 0.34}, {'end': 3215.436, 'text': "Let's create more fun stuff.", 'start': 3214.195, 'duration': 1.241}, {'end': 3217.358, 'text': "I'll see you in the next chapter.", 'start': 3215.917, 'duration': 1.441}, {'end': 3221.221, 'text': 'Hey, Ed, but your crumbs were animating.', 'start': 3218.118, 'duration': 3.103}, {'end': 3225.665, 'text': "Crumbs Why is ours not? That's because I forgot about it.", 'start': 3221.581, 'duration': 4.084}, {'end': 3226.686, 'text': "I'm not going to lie.", 'start': 3225.685, 'duration': 1.001}, {'end': 3229.889, 'text': "So let's put in the crumb animation.", 'start': 3226.706, 'duration': 3.183}, {'end': 3230.83, 'text': "Let's go here.", 'start': 3230.369, 'duration': 0.461}], 'summary': 'Introduction to cookie animation using gsap with a focus on timeline power and adding crumb animation.', 'duration': 30.264, 'max_score': 3200.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE3200566.jpg'}], 'start': 2753.178, 'title': 'Gsap animation and cookie animation', 'summary': 'Covers adding easing to gsap animations, syncing with previous animations, and creating a cookie animation using gsap. it also provides an overview of different easing options available and emphasizes the visually appealing and interactive nature of the animations.', 'chapters': [{'end': 2806.019, 'start': 2753.178, 'title': 'Gsap animation easing and syncing', 'summary': 'Highlights the process of adding easing to gsap animations and syncing with previous animations, while also demonstrating how to find and use easing visualizers from google, providing a comprehensive overview of different easing options available.', 'duration': 52.841, 'highlights': ['The chapter demonstrates how to add easing to GSAP animations and sync with previous animations, enhancing the visual appeal and user experience.', 'It provides guidance on using the Google search to find GSAP easing visualizers, allowing users to explore and choose from a variety of easing options.', 'The speaker specifically mentions using the first easing visualizer, reinforcing the importance and relevance of this particular tool.', 'The chapter explains the process of copying and pasting easing functions into the defined duration, ensuring a clear and practical demonstration of implementing easing in GSAP animations.']}, {'end': 3563.572, 'start': 2806.079, 'title': 'Cookie animation with gsap', 'summary': 'Demonstrates the process of creating a cookie animation using gsap, including customizing the design elements and adding interactive functionalities, resulting in a visually appealing and interactive animation.', 'duration': 757.493, 'highlights': ['The chapter demonstrates the process of creating a cookie animation using GSAP.', 'Customizing design elements including text size and border radius to enhance the visual appeal.', "Adding interactive functionalities such as the cookie container's elastic effect and adjusting animation duration.", 'Creating a button that triggers a fade-out animation for the cookie container upon click.', "Implementing a jumping animation for the cookie and crumbs using GSAP's 'from' method with yo-yo and repeat functionality."]}], 'duration': 810.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/r1iul4uRFuE/pics/r1iul4uRFuE2753178.jpg', 'highlights': ['The chapter demonstrates how to add easing to GSAP animations and sync with previous animations, enhancing the visual appeal and user experience.', 'The chapter explains the process of copying and pasting easing functions into the defined duration, ensuring a clear and practical demonstration of implementing easing in GSAP animations.', 'The chapter demonstrates the process of creating a cookie animation using GSAP.', 'Customizing design elements including text size and border radius to enhance the visual appeal.', "Adding interactive functionalities such as the cookie container's elastic effect and adjusting animation duration.", 'Creating a button that triggers a fade-out animation for the cookie container upon click.', "Implementing a jumping animation for the cookie and crumbs using GSAP's 'from' method with yo-yo and repeat functionality.", 'It provides guidance on using the Google search to find GSAP easing visualizers, allowing users to explore and choose from a variety of easing options.', 'The speaker specifically mentions using the first easing visualizer, reinforcing the importance and relevance of this particular tool.']}], 'highlights': ['GSAP library offers excellent browser support for animations and sequences', 'Chapter 6 demonstrates adding easing to GSAP animations and creating a cookie animation', 'Chapter 5 introduces GSAP for SVG animations and scroll-based animations', 'Chapter 2 covers setting up project folders, linking CSS and JavaScript, and customizing SVGs', 'Chapter 4 illustrates creating color gradients, adjusting element sizes, and styling with CSS', 'Chapter 3 explains preparing SVGs for animation and removing unnecessary code', 'Chapter 1 introduces the first free chapter of the JavaScript animation course with a discount code', 'Chapter 2 explains the process of creating and customizing SVG files in Figma', 'Chapter 5 focuses on animations and demonstrates importing and using GSAP in a web project', 'Chapter 6 provides guidance on finding and using GSAP easing visualizers']}