title
GSAP 3.0 Crash Course - JavaScript Animation Library

description
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account! -- In part 1, we used Adobe XD to design a UI and prototype the animations (linked below). Today, we're going to hop into the world of HTML/CSS & GSAP to make the project a reality in the browser. GSAP 3 is a massive overhaul that brings about new features along with being half the size of the previous version. This is a beginner's tutorial, so we're going to cover all of the basics such as creating animations with and without the timeline. Part 1: https://www.youtube.com/watch?v=dnkWk_4UWOw http://greensock.com Codepen demo for this tutorial: https://codepen.io/designcourse/pen/bGGmvOe Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'GSAP 3.0 Crash Course - JavaScript Animation Library', 'heatmap': [{'end': 377.545, 'start': 344.553, 'weight': 0.812}, {'end': 709.684, 'start': 684.38, 'weight': 1}, {'end': 925.531, 'start': 909.68, 'weight': 0.78}, {'end': 1346.089, 'start': 1326.273, 'weight': 0.704}], 'summary': 'Provides a comprehensive overview of gsap 3.0, showcasing its 50+ new features, roughly half file size compared to the old version, ease of animation manipulation using timeline, and sponsorship by linode. it includes tutorials on using gsap in adobe xd, demonstrates gsap for complex sequenced animations, and discusses the benefits of using gsap timeline for animations, along with the importance of animation order in creating css animations using a timeline.', 'chapters': [{'end': 127.618, 'segs': [{'end': 66.632, 'src': 'embed', 'start': 41.262, 'weight': 0, 'content': [{'end': 51.287, 'text': "it's a very powerful javascript animation library that allows you to do really sweet animations of that go beyond just your regular old CSS animations.", 'start': 41.262, 'duration': 10.025}, {'end': 53.188, 'text': 'It gives you a lot of power.', 'start': 52.107, 'duration': 1.081}, {'end': 58.089, 'text': "So GSAP 3, there's a lot of new changes here.", 'start': 53.588, 'duration': 4.501}, {'end': 61.95, 'text': "If you go to this page, you'll find them, you know, 50 plus new features.", 'start': 58.429, 'duration': 3.521}, {'end': 66.632, 'text': "It's roughly half the file size of the old one, but has even more features.", 'start': 62.631, 'duration': 4.001}], 'summary': 'Gsap 3 is a powerful javascript animation library with 50+ new features, half the file size of the old one.', 'duration': 25.37, 'max_score': 41.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE41262.jpg'}, {'end': 133.58, 'src': 'embed', 'start': 107.836, 'weight': 1, 'content': [{'end': 112.962, 'text': 'A fully configurable DNS manager allows for you to easily switch your domain over to your new server,', 'start': 107.836, 'duration': 5.126}, {'end': 116.767, 'text': 'and SSL certificates can be installed for free using open source tools.', 'start': 112.962, 'duration': 3.805}, {'end': 121.712, 'text': 'So sign up using the link below to get $20 in credit on your new Linode account.', 'start': 116.987, 'duration': 4.725}, {'end': 123.134, 'text': 'All right, so here we are.', 'start': 121.953, 'duration': 1.181}, {'end': 124.996, 'text': 'Just one I just want to mention.', 'start': 123.214, 'duration': 1.782}, {'end': 127.618, 'text': 'i just recorded this entire tutorial.', 'start': 125.917, 'duration': 1.701}, {'end': 133.58, 'text': "it was like 40 minutes long and then i realized the um the power adapter wasn't plugged into my camera.", 'start': 127.618, 'duration': 5.962}], 'summary': 'Linode offers $20 credit, dns manager for easy domain switching, and free ssl certificate installation using open source tools.', 'duration': 25.744, 'max_score': 107.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE107836.jpg'}], 'start': 0.109, 'title': 'Gsap 3.0 features', 'summary': 'Details the 50 plus new features of gsap 3.0, with roughly half file size compared to the old version. it also highlights the use of timeline for easy animation manipulation, and mentions linode as the sponsor.', 'chapters': [{'end': 127.618, 'start': 0.109, 'title': 'Gsap 3.0 tutorial part 2', 'summary': 'Details the features of gsap 3.0, highlighting its 50 plus new features, roughly half the file size of the old version, and the use of timeline to easily reverse and reveal animations, while also promoting linode as the sponsor.', 'duration': 127.509, 'highlights': ['GSAP 3.0 has 50 plus new features, roughly half the file size of the old version, and allows the use of timeline to easily reverse and reveal animations.', 'Linode is promoted as the sponsor, offering $20 in credit on a new Linode account, with features such as one-click apps, back-end access, configurable DNS manager, and free SSL certificates.']}], 'duration': 127.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE109.jpg', 'highlights': ['GSAP 3.0 has 50 plus new features, roughly half the file size of the old version, and allows the use of timeline to easily reverse and reveal animations.', 'Linode is promoted as the sponsor, offering $20 in credit on a new Linode account, with features such as one-click apps, back-end access, configurable DNS manager, and free SSL certificates.']}, {'end': 380.711, 'segs': [{'end': 187.352, 'src': 'embed', 'start': 141.262, 'weight': 1, 'content': [{'end': 149.265, 'text': 'but i just want to show you an adobe xd from part one of the tutorial, um, the prototype that we created, and this is kind of what we are going after,', 'start': 141.262, 'duration': 8.003}, {'end': 152.566, 'text': "but we're going to make the animation even better with the help of gsap, all right.", 'start': 149.265, 'duration': 3.301}, {'end': 158.03, 'text': "So the part that I'm going to speed up is the HTML and CSS and getting that stuff out of the way,", 'start': 153.386, 'duration': 4.644}, {'end': 161.333, 'text': 'because that takes up actually the bulk of the tutorial, the 40-minute tutorial that I had.', 'start': 158.03, 'duration': 3.303}, {'end': 166.357, 'text': "So all I'm going to do is to show you, very briefly describe the HTML.", 'start': 161.813, 'duration': 4.544}, {'end': 170.521, 'text': 'This is all the HTML that we have from line 21 to 11, essentially.', 'start': 166.377, 'duration': 4.144}, {'end': 179.369, 'text': 'We have 10 lines just to recreate what we had going in the XD prototype right here.', 'start': 170.541, 'duration': 8.828}, {'end': 187.352, 'text': 'All right, so just to show you in the browser, if I could find that, here we go.', 'start': 180.489, 'duration': 6.863}], 'summary': 'Adobe xd tutorial prototype with 40-minute html and css process.', 'duration': 46.09, 'max_score': 141.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE141262.jpg'}, {'end': 326.348, 'src': 'embed', 'start': 283.084, 'weight': 0, 'content': [{'end': 289.008, 'text': 'to just animate from opacity zero and then down just move it down on the Y axis.', 'start': 283.084, 'duration': 5.924}, {'end': 292.791, 'text': "Here's how we would do it with the new GSAP 3.0.", 'start': 289.529, 'duration': 3.262}, {'end': 294.752, 'text': "So we'll say GSAP from.", 'start': 292.791, 'duration': 1.961}, {'end': 303.758, 'text': 'And the great thing is is, if you use GSAP in the past, like the 2.0 versions, then you would have to consider yourself with using tween light.', 'start': 295.433, 'duration': 8.325}, {'end': 306.259, 'text': 'tween max timeline light timeline max.', 'start': 303.758, 'duration': 2.501}, {'end': 311.901, 'text': "It was all kind of confusing, but now everything's condensed into the single GSAP that we can use.", 'start': 306.379, 'duration': 5.522}, {'end': 316.143, 'text': "So we can use the from or the to method, and I'll show you what that means.", 'start': 311.981, 'duration': 4.162}, {'end': 317.744, 'text': "Just it's hard to explain.", 'start': 316.343, 'duration': 1.401}, {'end': 318.624, 'text': "I'm just going to show you.", 'start': 317.764, 'duration': 0.86}, {'end': 323.106, 'text': 'And the first argument is going to be the selector.', 'start': 319.865, 'duration': 3.241}, {'end': 326.348, 'text': "You know, what is it that we want to animate? Well, in our case, it's the content.", 'start': 323.366, 'duration': 2.982}], 'summary': 'Using gsap 3.0, animations are simpler with condensed methods, eliminating confusion from previous versions.', 'duration': 43.264, 'max_score': 283.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE283084.jpg'}, {'end': 377.545, 'src': 'heatmap', 'start': 344.553, 'weight': 0.812, 'content': [{'end': 354.121, 'text': "So we'll say opacity is going to be zero, duration is one, and we'll say y negative 50..", 'start': 344.553, 'duration': 9.568}, {'end': 354.401, 'text': "That's it.", 'start': 354.121, 'duration': 0.28}, {'end': 357.885, 'text': "Let's go ahead and see what that looks like.", 'start': 355.302, 'duration': 2.583}, {'end': 359.326, 'text': 'So refresh.', 'start': 358.726, 'duration': 0.6}, {'end': 360.648, 'text': 'There you go.', 'start': 360.287, 'duration': 0.361}, {'end': 366.674, 'text': "It's going from opacity zero, negative 50 pixels and coming down right here.", 'start': 360.708, 'duration': 5.966}, {'end': 368.816, 'text': "So it's saying it's going from those values.", 'start': 366.894, 'duration': 1.922}, {'end': 371.238, 'text': 'What if we change this to?', 'start': 368.856, 'duration': 2.382}, {'end': 377.545, 'text': "basically? it's going to need to hide, because reverse everything is going to go to opacity zero and move up 50 pixels instead of down.", 'start': 371.238, 'duration': 6.307}], 'summary': 'Demonstrating css animation with opacity and position changes.', 'duration': 32.992, 'max_score': 344.553, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE344553.jpg'}], 'start': 127.618, 'title': 'Gsap animations in adobe xd and gsap 3.0', 'summary': 'Covers a tutorial on creating an adobe xd prototype with gsap, a demonstration of setting up gsap, and discusses the simplification of animation methods in gsap 3.0, highlighting its condensed functionality and ease of use.', 'chapters': [{'end': 187.352, 'start': 127.618, 'title': 'Adobe xd prototype tutorial with gsap', 'summary': 'Covers a tutorial on creating an adobe xd prototype with gsap, including a 40-minute tutorial that primarily focuses on html and css, requiring a redo due to a missed power adapter for the camera.', 'duration': 59.734, 'highlights': ['The tutorial primarily focuses on HTML and CSS, taking up the bulk of the 40-minute session.', "The speaker missed that the power adapter wasn't plugged into the camera, necessitating a redo of the recording.", 'The tutorial aims to enhance the animation with GSAP based on the prototype created in Adobe XD.', 'The speaker plans to speed up the process due to time constraints.']}, {'end': 283.084, 'start': 187.892, 'title': 'Introduction to gsap animations', 'summary': 'Introduces gsap animations by demonstrating the process of setting up gsap and mentions the key parts of the getting started page, including demos and the cdn.', 'duration': 95.192, 'highlights': ['The chapter introduces GSAP animations and explains the process of setting up GSAP, including adding the GSAP core through CDN and starting with simple examples.', 'The getting started page for GSAP is mentioned, which includes key parts such as highlights, demos, and the CDN URL for the GSAP core.', 'The transcript emphasizes starting with simple examples and progressively enhancing the app using different features.']}, {'end': 380.711, 'start': 283.084, 'title': 'Gsap 3.0: animate with opacity and y-axis', 'summary': "Discusses the simplification of animation methods in gsap 3.0, where the 'from' or 'to' methods can be used to animate properties like opacity and y-axis, with an example of animating a div element from opacity zero and downwards by 50 pixels, showcasing the ease of use and the condensed functionality of the new gsap version.", 'duration': 97.627, 'highlights': ["The 'from' or 'to' methods in GSAP 3.0 allow animating properties like opacity and y-axis, simplifying the process and condensing the functionality previously scattered across different GSAP versions.", 'The example demonstrates animating a div element from opacity zero to 1, and moving it downwards by 50 pixels, showcasing the specific properties and values that can be targeted using GSAP 3.0.', 'In GSAP 3.0, the selector argument can use actual HTML elements or classes, offering flexibility in defining the elements to be animated, streamlining the animation process.']}], 'duration': 253.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE127618.jpg', 'highlights': ["The 'from' or 'to' methods in GSAP 3.0 simplify animating properties like opacity and y-axis.", 'The tutorial primarily focuses on HTML and CSS, taking up the bulk of the 40-minute session.', 'The tutorial aims to enhance the animation with GSAP based on the prototype created in Adobe XD.', 'The chapter introduces GSAP animations and explains the process of setting up GSAP.', 'In GSAP 3.0, the selector argument can use actual HTML elements or classes, offering flexibility in defining the elements to be animated.']}, {'end': 956.217, 'segs': [{'end': 424.663, 'src': 'embed', 'start': 380.751, 'weight': 0, 'content': [{'end': 381.691, 'text': 'So freaking easy.', 'start': 380.751, 'duration': 0.94}, {'end': 383.833, 'text': 'Now one thing I do want to mention.', 'start': 382.052, 'duration': 1.781}, {'end': 390.017, 'text': "if that's all the animation that you had on your site or just some really simple animations like that they're not complex sequenced animations.", 'start': 383.833, 'duration': 6.184}, {'end': 391.278, 'text': "you wouldn't want to use GSAP.", 'start': 390.017, 'duration': 1.261}, {'end': 393.78, 'text': 'You could just use regular CSS animations for that.', 'start': 391.298, 'duration': 2.482}, {'end': 398.148, 'text': "So next up, let's show easings.", 'start': 395.106, 'duration': 3.042}, {'end': 408.913, 'text': 'So what are easings? What we can do is we can add in another property called ease and we can specify a lot of different types of easing.', 'start': 398.528, 'duration': 10.385}, {'end': 412.715, 'text': 'So let me show you the documentation because they have a great example here.', 'start': 408.973, 'duration': 3.742}, {'end': 415.977, 'text': 'So GSAP easings, let me go here.', 'start': 412.815, 'duration': 3.162}, {'end': 419.219, 'text': "And it's going to show you all the different easings.", 'start': 416.718, 'duration': 2.501}, {'end': 422.842, 'text': "So this affects how you're going from point A to point B.", 'start': 419.279, 'duration': 3.563}, {'end': 424.663, 'text': 'So like elastic will make it bounce.', 'start': 422.842, 'duration': 1.821}], 'summary': 'Gsap can be used for complex sequenced animations, while css is suitable for simple animations. easings affect the transition from point a to point b.', 'duration': 43.912, 'max_score': 380.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE380751.jpg'}, {'end': 500.44, 'src': 'embed', 'start': 474.688, 'weight': 2, 'content': [{'end': 481.311, 'text': "After that, let's add in the animation for our little purple swirl graphic and also the building, um, the right column.", 'start': 474.688, 'duration': 6.623}, {'end': 481.991, 'text': 'All right.', 'start': 481.691, 'duration': 0.3}, {'end': 490.816, 'text': "So we can just add in another GSAP from we'll target the selector of image, which is a swirl graphic right here.", 'start': 482.051, 'duration': 8.765}, {'end': 492.816, 'text': 'All right.', 'start': 490.836, 'duration': 1.98}, {'end': 493.757, 'text': "That's the selector.", 'start': 492.856, 'duration': 0.901}, {'end': 500.44, 'text': "And we'll say duration is one Y is 30 and opacity is zero.", 'start': 494.657, 'duration': 5.783}], 'summary': 'Adding animation to the purple swirl graphic and building, with a duration of 1 second, y position of 30, and opacity of 0.', 'duration': 25.752, 'max_score': 474.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE474688.jpg'}, {'end': 643.779, 'src': 'embed', 'start': 607.387, 'weight': 3, 'content': [{'end': 612.769, 'text': 'Now, these are all animating at the same time and we can add delays to our properties.', 'start': 607.387, 'duration': 5.382}, {'end': 623.054, 'text': "So to our image property, which is right here, let's add a delay of like 1.4 and we'll add a delay of like 1.1 right here.", 'start': 613.43, 'duration': 9.624}, {'end': 625.195, 'text': "So that's 1.4 seconds and 1.1 seconds.", 'start': 623.114, 'duration': 2.081}, {'end': 629.837, 'text': "So let's refresh this.", 'start': 625.235, 'duration': 4.602}, {'end': 643.779, 'text': 'So notice this comes in a little bit after this stuff did, which is kind of how almost we planned it in our XD template.', 'start': 635.734, 'duration': 8.045}], 'summary': 'Animating multiple properties with delays of 1.4 and 1.1 seconds, creating a planned effect.', 'duration': 36.392, 'max_score': 607.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE607387.jpg'}, {'end': 709.684, 'src': 'heatmap', 'start': 684.38, 'weight': 1, 'content': [{'end': 690.792, 'text': "All right, and the only thing we're gonna change is we're gonna add a stagger property and this is a numeric value.", 'start': 684.38, 'duration': 6.412}, {'end': 692.635, 'text': 'So 0.6 seconds.', 'start': 691.292, 'duration': 1.343}, {'end': 694.999, 'text': "So let's save that.", 'start': 693.837, 'duration': 1.162}, {'end': 700.86, 'text': 'And now look how they automatically animate in sequentially and they stagger animate.', 'start': 696.198, 'duration': 4.662}, {'end': 702.121, 'text': "And that's all it takes.", 'start': 701.421, 'duration': 0.7}, {'end': 709.684, 'text': 'It will do that to every CSS element or HTML element that has that class applied to Anim1.', 'start': 702.161, 'duration': 7.523}], 'summary': 'Adding a stagger property of 0.6 seconds to automatically animate css or html elements in sequence.', 'duration': 25.304, 'max_score': 684.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE684380.jpg'}, {'end': 750.681, 'src': 'embed', 'start': 723.394, 'weight': 4, 'content': [{'end': 730.899, 'text': 'the last thing I wanted to show you, before we get to the timeline portion, is the text reveal animation, because, if you recall,', 'start': 723.394, 'duration': 7.505}, {'end': 732.76, 'text': 'we go back to our document.', 'start': 730.899, 'duration': 1.861}, {'end': 733.341, 'text': 'we hit play.', 'start': 732.76, 'duration': 0.581}, {'end': 739.219, 'text': 'we have a blinder effect or a text reveal, a vertical text reveal effect applying here or happening.', 'start': 734.758, 'duration': 4.461}, {'end': 740.679, 'text': 'So how would we do that?', 'start': 739.679, 'duration': 1}, {'end': 745.08, 'text': "Well, if you know anything about CSS text, reveal animations I've done a video in the past.", 'start': 740.859, 'duration': 4.221}, {'end': 750.681, 'text': 'you can use the after selector on the element in order to make that work.', 'start': 745.08, 'duration': 5.601}], 'summary': 'Demonstrated a vertical text reveal animation using css after selector.', 'duration': 27.287, 'max_score': 723.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE723394.jpg'}, {'end': 933.186, 'src': 'heatmap', 'start': 909.68, 'weight': 0.78, 'content': [{'end': 916.184, 'text': "So then after that, we can put in all the usual stuff, duration one, and that's about it right there.", 'start': 909.68, 'duration': 6.504}, {'end': 918.506, 'text': "So now let's give this a shot.", 'start': 916.845, 'duration': 1.661}, {'end': 925.531, 'text': 'And notice how it comes in and animates.', 'start': 922.829, 'duration': 2.702}, {'end': 931.105, 'text': 'awesome, awesome, awesome stuff.', 'start': 929.244, 'duration': 1.861}, {'end': 933.186, 'text': 'now, what also, what about if we wanted to?', 'start': 931.105, 'duration': 2.081}], 'summary': 'Animating the content with duration one, achieving an awesome result.', 'duration': 23.506, 'max_score': 909.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE909680.jpg'}], 'start': 380.751, 'title': 'Gsap easings and css animations', 'summary': 'Demonstrates the use of gsap for complex sequenced animations and regular css animations for simple animations. it also showcases different easings and covers adding animations to graphics, building columns, and text reveal animations.', 'chapters': [{'end': 474.648, 'start': 380.751, 'title': 'Gsap easings and animations', 'summary': 'Highlights the use of gsap for complex sequenced animations, the option to use regular css animations for simple animations, and the demonstration of different easings such as power and elastic, showcasing their impact on animation speed and behavior.', 'duration': 93.897, 'highlights': ['The chapter demonstrates the use of GSAP for complex sequenced animations, advising the use of regular CSS animations for simpler animations.', 'It explains the concept of easings and how they affect animation, showcasing various types such as power and elastic.', 'The demonstration includes adjusting easing properties to impact animation speed, with specific examples of power and elastic easings.']}, {'end': 956.217, 'start': 474.688, 'title': 'Css animation tutorial', 'summary': 'Covers adding animation to a swirl graphic and a building column using gsap, animating elements in opposite directions, adding delays for sequential animations, and creating a text reveal animation using css after selector and gsap css role plugin.', 'duration': 481.529, 'highlights': ['The chapter covers adding animation to a swirl graphic and a building column using GSAP. The tutorial discusses adding animation to a swirl graphic and a building column using GSAP, focusing on targeting selectors, specifying durations, and adjusting properties for animation effects.', 'Animating elements in opposite directions and adding delays for sequential animations. The tutorial explains how to animate elements in opposite directions and add delays for sequential animations, providing specific examples of using negative and positive values to achieve opposite directions and specifying delays for sequential animation effects.', 'Creating a text reveal animation using CSS after selector and GSAP CSS role plugin. The chapter demonstrates creating a text reveal animation using CSS after selector and GSAP CSS role plugin, including setting properties such as content, position, width, and using GSAP to animate the reveal effect with duration and delays.']}], 'duration': 575.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE380751.jpg', 'highlights': ['The chapter demonstrates the use of GSAP for complex sequenced animations, advising the use of regular CSS animations for simpler animations.', 'The demonstration includes adjusting easing properties to impact animation speed, with specific examples of power and elastic easings.', 'The chapter covers adding animation to a swirl graphic and a building column using GSAP, focusing on targeting selectors, specifying durations, and adjusting properties for animation effects.', 'Animating elements in opposite directions and adding delays for sequential animations, providing specific examples of using negative and positive values to achieve opposite directions and specifying delays for sequential animation effects.', 'The chapter demonstrates creating a text reveal animation using CSS after selector and GSAP CSS role plugin, including setting properties such as content, position, width, and using GSAP to animate the reveal effect with duration and delays.']}, {'end': 1380.702, 'segs': [{'end': 987.604, 'src': 'embed', 'start': 956.217, 'weight': 0, 'content': [{'end': 957.498, 'text': "because it's going to throw everything off.", 'start': 956.217, 'duration': 1.281}, {'end': 962.44, 'text': "When you're using what's called the GSAP timeline, however, you don't have to worry about that.", 'start': 958.038, 'duration': 4.402}, {'end': 968.783, 'text': "It's much easier to make adjustments to your specific animations in the sequence without having to worry about screwing up everything else.", 'start': 962.56, 'duration': 6.223}, {'end': 973.646, 'text': "So I'm going to show you how to do this the timeline way.", 'start': 969.384, 'duration': 4.262}, {'end': 977.828, 'text': "So we're going to, wrong way, Gary, comment this stuff out.", 'start': 973.846, 'duration': 3.982}, {'end': 979.769, 'text': 'All right.', 'start': 979.489, 'duration': 0.28}, {'end': 982.922, 'text': "and we're gonna do it the timeline way.", 'start': 981.582, 'duration': 1.34}, {'end': 987.604, 'text': 'All right, so for the timeline way, we have to create an instance of the timeline.', 'start': 983.363, 'duration': 4.241}], 'summary': 'Using gsap timeline allows easier adjustments to specific animations without disrupting the sequence or other elements.', 'duration': 31.387, 'max_score': 956.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE956217.jpg'}, {'end': 1044.093, 'src': 'embed', 'start': 1001.548, 'weight': 1, 'content': [{'end': 1010.902, 'text': 'So if any of them say share the same property like maybe the same duration, you can specify it here in a defaults property right here,', 'start': 1001.548, 'duration': 9.354}, {'end': 1012.743, 'text': 'like duration one.', 'start': 1010.902, 'duration': 1.841}, {'end': 1017.164, 'text': 'if they all have opacity zero, you can put opacity zero in the next comma.', 'start': 1012.743, 'duration': 4.421}, {'end': 1018.604, 'text': 'all right.', 'start': 1017.164, 'duration': 1.44}, {'end': 1024.445, 'text': 'so now what we can do is we could say tl.from and we can start recreating the animations up here.', 'start': 1018.604, 'duration': 5.841}, {'end': 1025.465, 'text': "but it's not straight.", 'start': 1024.445, 'duration': 1.02}, {'end': 1029.906, 'text': "it's not as straightforward as just taking it in in this order when you have.", 'start': 1025.465, 'duration': 4.441}, {'end': 1033.688, 'text': "uh, when you're creating animations without the timeline,", 'start': 1029.906, 'duration': 3.782}, {'end': 1041.472, 'text': "the order of these values don't really matter because you're dealing with them in terms of durations and delays to try to create the animation.", 'start': 1033.688, 'duration': 7.784}, {'end': 1044.093, 'text': "For here when you're using that timeline.", 'start': 1041.952, 'duration': 2.141}], 'summary': 'Explaining how to specify properties and recreate animations using timelines.', 'duration': 42.545, 'max_score': 1001.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE1001548.jpg'}, {'end': 1213.437, 'src': 'embed', 'start': 1178.18, 'weight': 3, 'content': [{'end': 1181.7, 'text': 'And this, All right.', 'start': 1178.18, 'duration': 3.52}, {'end': 1183.762, 'text': 'And the opacity is zero.', 'start': 1182.201, 'duration': 1.561}, {'end': 1188.927, 'text': "And we're going to also have a delay here, a negative delay offset.", 'start': 1184.743, 'duration': 4.184}, {'end': 1191.75, 'text': "I shouldn't say delay, it's an offset.", 'start': 1190.509, 'duration': 1.241}, {'end': 1196.255, 'text': 'Negative offset of 1.5.', 'start': 1192.231, 'duration': 4.024}, {'end': 1196.755, 'text': 'There we go.', 'start': 1196.255, 'duration': 0.5}, {'end': 1198.597, 'text': 'And then finally, the swirl graphic.', 'start': 1197.115, 'duration': 1.482}, {'end': 1203.822, 'text': "Let's just copy that or duplicate it rather.", 'start': 1201.44, 'duration': 2.382}, {'end': 1204.503, 'text': 'This will be image.', 'start': 1203.862, 'duration': 0.641}, {'end': 1211.455, 'text': "We'll say Y is 30 and actually 50 because that's what we were using before.", 'start': 1205.589, 'duration': 5.866}, {'end': 1213.437, 'text': 'The opacity is zero.', 'start': 1212.376, 'duration': 1.061}], 'summary': 'Setting opacity to zero, applying negative offset of 1.5, and duplicating image.', 'duration': 35.257, 'max_score': 1178.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE1178180.jpg'}, {'end': 1267.49, 'src': 'embed', 'start': 1240.575, 'weight': 4, 'content': [{'end': 1245.275, 'text': "Another awesome Advantage is the fact that it's a timeline.", 'start': 1240.575, 'duration': 4.7}, {'end': 1250.638, 'text': "So it's literally like a timeline that you can scrub through the animation.", 'start': 1245.335, 'duration': 5.303}, {'end': 1254.179, 'text': 'For instance, what if we wanted to reverse this animation doing it this way?', 'start': 1250.638, 'duration': 3.541}, {'end': 1261.063, 'text': "We'd have to like recreate these and just buy manually and then have you know four more lines where it reverses itself.", 'start': 1254.219, 'duration': 6.844}, {'end': 1262.884, 'text': 'That would be ridiculous, very verbose.', 'start': 1261.063, 'duration': 1.821}, {'end': 1265.769, 'text': 'Instead, we can do this.', 'start': 1263.789, 'duration': 1.98}, {'end': 1267.49, 'text': "So let's make this clickable.", 'start': 1265.99, 'duration': 1.5}], 'summary': 'Advantage: timeline feature allows easy animation scrubbing and reversibility.', 'duration': 26.915, 'max_score': 1240.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE1240575.jpg'}, {'end': 1357.374, 'src': 'heatmap', 'start': 1326.273, 'weight': 0.704, 'content': [{'end': 1326.534, 'text': 'All right.', 'start': 1326.273, 'duration': 0.261}, {'end': 1328.737, 'text': "So let's save that and it should work.", 'start': 1326.554, 'duration': 2.183}, {'end': 1330.36, 'text': "So it's going to come in.", 'start': 1329.719, 'duration': 0.641}, {'end': 1337.305, 'text': "we're going to click it and now it's going to automatically reverse through that timeline, through these steps.", 'start': 1331.343, 'duration': 5.962}, {'end': 1342.628, 'text': "How awesome is that? So now I know you can't see it right now, but we can click it.", 'start': 1338.246, 'duration': 4.382}, {'end': 1346.089, 'text': "If it's somewhere, where the hell is it? There it is.", 'start': 1343.468, 'duration': 2.621}, {'end': 1354.413, 'text': "Now, of course you wouldn't want to, you know, make this sort of thing live or whatever, use it live, but this is just to show you that it does work.", 'start': 1347.35, 'duration': 7.063}, {'end': 1357.374, 'text': 'Look how awesome that is.', 'start': 1356.313, 'duration': 1.061}], 'summary': 'Demonstrates automatic timeline reversal feature with enthusiasm.', 'duration': 31.101, 'max_score': 1326.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE1326273.jpg'}], 'start': 956.217, 'title': 'Gsap and css animations with timelines', 'summary': 'Discusses the benefits of using gsap timeline for animations, highlighting the ease of making adjustments and creation of a timeline instance with default properties. it also explains the importance of animation order in creating css animations using a timeline, demonstrating the use of staggered delays, offsets, and reversals.', 'chapters': [{'end': 1025.465, 'start': 956.217, 'title': 'Gsap timeline for animation', 'summary': 'Discusses the benefits of using gsap timeline for animations, highlighting the ease of making adjustments to specific animations and the creation of a timeline instance with default properties for animations.', 'duration': 69.248, 'highlights': ['Creating an instance of the GSAP timeline allows for easier adjustments to specific animations without affecting others.', 'The timeline instance can have default properties that all animations created from it would share, such as duration and opacity.']}, {'end': 1380.702, 'start': 1025.465, 'title': 'Css animation with timeline', 'summary': 'Discusses the importance of animation order in creating css animations using a timeline, demonstrating the use of staggered delays, offsets, and reversals to create synchronized and reversible animations.', 'duration': 355.237, 'highlights': ['The order of animations is crucial when using a timeline, as the next animation starts automatically after the previous one, unlike creating animations without a timeline. The order of animations is crucial when using a timeline, as the next animation starts automatically after the previous one, unlike creating animations without a timeline.', 'Demonstrated the use of staggered delays and offsets to synchronize and control the timing of animations, such as using a 0.6-second stagger for Anim1 and a 1.5-second negative offset for the swirl graphic. Demonstrated the use of staggered delays and offsets to synchronize and control the timing of animations, such as using a 0.6-second stagger for Anim1 and a 1.5-second negative offset for the swirl graphic.', 'Explained the process of reversing animations using JavaScript and the CSS timeline, allowing for synchronized reversible animations without the need for extensive manual adjustments and verbose code. Explained the process of reversing animations using JavaScript and the CSS timeline, allowing for synchronized reversible animations without the need for extensive manual adjustments and verbose code.']}], 'duration': 424.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YqOhQWbouCE/pics/YqOhQWbouCE956217.jpg', 'highlights': ['Creating an instance of the GSAP timeline allows for easier adjustments to specific animations without affecting others.', 'The timeline instance can have default properties that all animations created from it would share, such as duration and opacity.', 'The order of animations is crucial when using a timeline, as the next animation starts automatically after the previous one, unlike creating animations without a timeline.', 'Demonstrated the use of staggered delays and offsets to synchronize and control the timing of animations, such as using a 0.6-second stagger for Anim1 and a 1.5-second negative offset for the swirl graphic.', 'Explained the process of reversing animations using JavaScript and the CSS timeline, allowing for synchronized reversible animations without the need for extensive manual adjustments and verbose code.']}], 'highlights': ['GSAP 3.0 has 50 plus new features, roughly half the file size of the old version, and allows the use of timeline to easily reverse and reveal animations.', 'Linode is promoted as the sponsor, offering $20 in credit on a new Linode account, with features such as one-click apps, back-end access, configurable DNS manager, and free SSL certificates.', "The 'from' or 'to' methods in GSAP 3.0 simplify animating properties like opacity and y-axis.", 'The tutorial primarily focuses on HTML and CSS, taking up the bulk of the 40-minute session.', 'The tutorial aims to enhance the animation with GSAP based on the prototype created in Adobe XD.', 'In GSAP 3.0, the selector argument can use actual HTML elements or classes, offering flexibility in defining the elements to be animated.', 'The chapter demonstrates the use of GSAP for complex sequenced animations, advising the use of regular CSS animations for simpler animations.', 'The demonstration includes adjusting easing properties to impact animation speed, with specific examples of power and elastic easings.', 'The chapter covers adding animation to a swirl graphic and a building column using GSAP, focusing on targeting selectors, specifying durations, and adjusting properties for animation effects.', 'Animating elements in opposite directions and adding delays for sequential animations, providing specific examples of using negative and positive values to achieve opposite directions and specifying delays for sequential animation effects.', 'The chapter demonstrates creating a text reveal animation using CSS after selector and GSAP CSS role plugin, including setting properties such as content, position, width, and using GSAP to animate the reveal effect with duration and delays.', 'Creating an instance of the GSAP timeline allows for easier adjustments to specific animations without affecting others.', 'The timeline instance can have default properties that all animations created from it would share, such as duration and opacity.', 'The order of animations is crucial when using a timeline, as the next animation starts automatically after the previous one, unlike creating animations without a timeline.', 'Demonstrated the use of staggered delays and offsets to synchronize and control the timing of animations, such as using a 0.6-second stagger for Anim1 and a 1.5-second negative offset for the swirl graphic.', 'Explained the process of reversing animations using JavaScript and the CSS timeline, allowing for synchronized reversible animations without the need for extensive manual adjustments and verbose code.']}