title
Getting Started with GSAP TweenMax (Tutorial) - Animating a Landing Page

description
Check out Bookmark.com - https://goo.gl/mup5Av Today's Question: Outside of GSAP, do you use any other animation libraries? https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, I'm excited to start covering GSAP (GreenSock Animation Platform). Going forward, we will cover a lot more GSAP content, but today we're going to start off with GSAP TweenMax. TweenMax allows you to easily define animations in a robust and flexible manner. In the next video for this series, we'll take a look at integrating GSAP TimelineMax! GitHub Repo for this project: https://github.com/designcourse/gsap-tweenmax-tutorial-project - - - - - - - - - - - - - - - - - - - - - - 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': 'Getting Started with GSAP TweenMax (Tutorial) - Animating a Landing Page', 'heatmap': [{'end': 573.751, 'start': 549.672, 'weight': 1}, {'end': 935.515, 'start': 915.342, 'weight': 0.783}], 'summary': 'Learn gsap for ui animation, design with adobe tools, and create web layouts with html/css for 1920 resolution. explore setting up web animation, applying click events, and utilizing easing effects in web development with tweenmax.', 'chapters': [{'end': 87.397, 'segs': [{'end': 25.783, 'src': 'embed', 'start': 0.269, 'weight': 0, 'content': [{'end': 5.672, 'text': "Today, you're going to learn how to use GSAP to create this awesome UI animation sequence.", 'start': 0.269, 'duration': 5.403}, {'end': 10.155, 'text': 'Before we begin this video.', 'start': 8.754, 'duration': 1.401}, {'end': 17.318, 'text': 'sponsor is bookmark.com, which is a free website builder that uses artificial intelligence to create websites right in front of your eyes.', 'start': 10.155, 'duration': 7.163}, {'end': 22.381, 'text': 'The entire process is less than two minutes and it only consists of answering seven simple questions.', 'start': 17.559, 'duration': 4.822}, {'end': 25.783, 'text': 'And if you need to sell stuff, you can create an online store very easily.', 'start': 22.701, 'duration': 3.082}], 'summary': 'Learn to use gsap for ui animation. bookmark.com creates websites in <2 mins by answering 7 questions.', 'duration': 25.514, 'max_score': 0.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ269.jpg'}, {'end': 87.397, 'src': 'embed', 'start': 43.148, 'weight': 1, 'content': [{'end': 53.11, 'text': "and I'm excited because this is a very powerful animation platform and it's called GSAP or Green Sock, which is the company animation platform,", 'start': 43.148, 'duration': 9.962}, {'end': 58.235, 'text': "and it's collection of different products, and a lot are free.", 'start': 53.11, 'duration': 5.125}, {'end': 66.944, 'text': "there are some plugins that are paid, that you have to become a member of their their service, but the one I'm covering today is completely free.", 'start': 58.235, 'duration': 8.709}, {'end': 71.93, 'text': "you can get it from a CDN and I'm gonna show you how to use that, and that's called tween max.", 'start': 66.944, 'duration': 4.986}, {'end': 79.735, 'text': "alright, so, going forward, I'm planning on covering a lot of different Green Sock products and showing you how to do a lot of really cool stuff.", 'start': 71.93, 'duration': 7.805}, {'end': 86.497, 'text': "So for today, I'm going to show you how to do this simple animation using what's called Tween Max.", 'start': 80.295, 'duration': 6.202}, {'end': 87.397, 'text': 'All right.', 'start': 87.077, 'duration': 0.32}], 'summary': 'Gsap is a powerful animation platform with free products like tween max.', 'duration': 44.249, 'max_score': 43.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ43148.jpg'}], 'start': 0.269, 'title': 'Gsap ui animation', 'summary': 'Introduces gsap, a powerful animation platform, and demonstrates how to use tween max for creating a simple ui animation. it also promotes bookmark.com for website building with ai in under two minutes.', 'chapters': [{'end': 87.397, 'start': 0.269, 'title': 'Gsap ui animation tutorial', 'summary': 'Introduces gsap, a powerful animation platform, and demonstrates how to use tween max for creating a simple ui animation, while also promoting bookmark.com for website building with ai in under two minutes.', 'duration': 87.128, 'highlights': ['GSAP is a powerful animation platform and a collection of different products, some of which are free. GSAP, or Green Sock, is a powerful animation platform with a collection of products, including some free ones.', 'Introduction of bookmark.com, a free website builder using artificial intelligence to create websites in less than two minutes by answering seven simple questions. bookmark.com is a free website builder using AI to create websites in under two minutes by answering seven simple questions.', 'The tutorial focuses on using Tween Max for creating a simple animation. The tutorial focuses on using Tween Max, a part of GSAP, to create a simple animation.']}], 'duration': 87.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ269.jpg', 'highlights': ['Introduction of bookmark.com, a free website builder using artificial intelligence to create websites in under two minutes by answering seven simple questions.', 'The tutorial focuses on using Tween Max for creating a simple animation.', 'GSAP is a powerful animation platform and a collection of different products, some of which are free.']}, {'end': 475.242, 'segs': [{'end': 132.376, 'src': 'embed', 'start': 108.321, 'weight': 0, 'content': [{'end': 114.865, 'text': "so the very first step here and it should always be your first step is, when you're starting a new UI project,", 'start': 108.321, 'duration': 6.544}, {'end': 128.273, 'text': 'get in something like Adobe Experience Design or even Photoshop I mean nobody uses it anymore or Sketch anything Illustrator to get a very solid idea of what you want your UI to be.', 'start': 114.865, 'duration': 13.408}, {'end': 131.035, 'text': "I'm not going to sit here doing this from scratch.", 'start': 129.273, 'duration': 1.762}, {'end': 132.376, 'text': 'This is what I created.', 'start': 131.135, 'duration': 1.241}], 'summary': 'Start new ui project by using adobe xd or sketch to solidify ui design.', 'duration': 24.055, 'max_score': 108.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ108321.jpg'}, {'end': 181.53, 'src': 'embed', 'start': 157.358, 'weight': 2, 'content': [{'end': 163.5, 'text': "we're not doing any frameworks or libraries like javascript, or i mean like react or angular, and review.", 'start': 157.358, 'duration': 6.142}, {'end': 164.5, 'text': 'that will come down the line.', 'start': 163.5, 'duration': 1}, {'end': 166.801, 'text': 'i just want to keep this pure vanilla javascript for now.', 'start': 164.5, 'duration': 2.301}, {'end': 171.764, 'text': "so I'm going to do an exclamation point enter to get some boilerplate.", 'start': 166.801, 'duration': 4.963}, {'end': 177.128, 'text': "I'm going to put in a link to our CSS.", 'start': 171.784, 'duration': 5.344}, {'end': 181.53, 'text': "So CSS main.css, we're going to put that there.", 'start': 178.168, 'duration': 3.362}], 'summary': 'Using pure vanilla javascript, adding boilerplate and linking css main.css.', 'duration': 24.172, 'max_score': 157.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ157358.jpg'}, {'end': 243.31, 'src': 'embed', 'start': 214, 'weight': 4, 'content': [{'end': 216.461, 'text': "Um, and we don't have much HTML.", 'start': 214, 'duration': 2.461}, {'end': 217.601, 'text': "Fortunately, it's very simple.", 'start': 216.501, 'duration': 1.1}, {'end': 219.762, 'text': 'So this will be very quick.', 'start': 217.921, 'duration': 1.841}, {'end': 224.003, 'text': "So, um, we'll put in an H1 element and engineering.", 'start': 219.862, 'duration': 4.141}, {'end': 229.065, 'text': 'If I could type, uh, for tomorrow.', 'start': 224.624, 'duration': 4.441}, {'end': 230.345, 'text': 'All right.', 'start': 229.945, 'duration': 0.4}, {'end': 232.926, 'text': 'Some cheesy headline.', 'start': 230.685, 'duration': 2.241}, {'end': 239.629, 'text': "And then, uh, we're going to put a button, uh, With an ID of we'll say CTA for call to action.", 'start': 233.066, 'duration': 6.563}, {'end': 241.389, 'text': 'Watch here.', 'start': 240.649, 'duration': 0.74}, {'end': 243.31, 'text': 'All right.', 'start': 241.409, 'duration': 1.901}], 'summary': 'Simple html implementation with h1 element and cta button for engineering content.', 'duration': 29.31, 'max_score': 214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ214000.jpg'}, {'end': 309.147, 'src': 'embed', 'start': 276.957, 'weight': 5, 'content': [{'end': 280.178, 'text': 'Some great line about engineering and how we did something everyone will love.', 'start': 276.957, 'duration': 3.221}, {'end': 280.858, 'text': 'Okay, great.', 'start': 280.298, 'duration': 0.56}, {'end': 287.376, 'text': 'Now for the next part for this box, This right here.', 'start': 282.058, 'duration': 5.318}, {'end': 289.857, 'text': 'originally I did have that set up so that it was just.', 'start': 287.376, 'duration': 2.481}, {'end': 292.659, 'text': "we don't need an extra HTML element for that.", 'start': 289.857, 'duration': 2.802}, {'end': 300.923, 'text': 'I was just gonna use the after selector for the paragraph right here and then just style it in the CSS.', 'start': 292.679, 'duration': 8.244}, {'end': 309.147, 'text': 'But I found that when it came to animating it, I wanted to have a separate HTML element for that.', 'start': 301.383, 'duration': 7.764}], 'summary': 'Discussion on engineering and design, preferring separate html element for animation.', 'duration': 32.19, 'max_score': 276.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ276957.jpg'}, {'end': 379.695, 'src': 'embed', 'start': 350.69, 'weight': 3, 'content': [{'end': 353.412, 'text': "It's not relevant to the purpose of this tutorial.", 'start': 350.69, 'duration': 2.722}, {'end': 355.934, 'text': "So I'm just adding 9em on the body itself.", 'start': 353.633, 'duration': 2.301}, {'end': 359.477, 'text': 'So this is meant to be seen on like a desktop resolution around 1920 or 2K res.', 'start': 356.575, 'duration': 2.902}, {'end': 364.061, 'text': 'Um, also we have our H1 element.', 'start': 361.558, 'duration': 2.503}, {'end': 365.002, 'text': 'All right.', 'start': 364.761, 'duration': 0.241}, {'end': 367.304, 'text': 'So this is our red text headline.', 'start': 365.042, 'duration': 2.262}, {'end': 376.412, 'text': 'Also after that we have a button and this is the black button, which is in reference to this or the black outline button rather.', 'start': 368.144, 'duration': 8.268}, {'end': 377.893, 'text': 'All right.', 'start': 376.432, 'duration': 1.461}, {'end': 379.695, 'text': 'Nothing special happening here.', 'start': 378.073, 'duration': 1.622}], 'summary': 'Tutorial adds 9em to body, designed for desktop 1920 or 2k res.', 'duration': 29.005, 'max_score': 350.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ350690.jpg'}, {'end': 432.084, 'src': 'embed', 'start': 402.369, 'weight': 1, 'content': [{'end': 404.57, 'text': "We'll bring those back momentarily.", 'start': 402.369, 'duration': 2.201}, {'end': 408.352, 'text': "And all that's happened here is we have a position absolute.", 'start': 405.83, 'duration': 2.522}, {'end': 411.033, 'text': "We're taking the width to 55% of the browser.", 'start': 408.592, 'duration': 2.441}, {'end': 414.695, 'text': "You know, we're situating it here from bottom.", 'start': 412.134, 'duration': 2.561}, {'end': 416.656, 'text': 'So we want it to grow from the bottom and up.', 'start': 414.735, 'duration': 1.921}, {'end': 418.517, 'text': "So that's why I have bottom zero.", 'start': 416.716, 'duration': 1.801}, {'end': 421.819, 'text': "The background and padding and that's about it.", 'start': 419.758, 'duration': 2.061}, {'end': 429.083, 'text': 'Next inside of here, nested is going to be our image, which is that SVG graphic that we still have to, I have to import that still.', 'start': 422.719, 'duration': 6.364}, {'end': 432.084, 'text': 'Inside of here.', 'start': 430.704, 'duration': 1.38}], 'summary': 'Positioning element at 55% width, growing from bottom with svg graphic to be imported.', 'duration': 29.715, 'max_score': 402.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ402369.jpg'}], 'start': 87.537, 'title': 'Ui design and web page layout creation', 'summary': 'Covers designing ui with gsap, using design tools like adobe experience design or illustrator, and pure vanilla javascript, as well as creating web page layout with html and css for desktop resolution around 1920 or 2k res, including specific design elements like font family, red text headline, black outline button, panel with svg graphic, and a paragraph element.', 'chapters': [{'end': 331.16, 'start': 87.537, 'title': 'Designing ui with gsap', 'summary': 'Emphasizes the initial steps to start a new ui project, such as using design tools like adobe experience design or illustrator, and the use of pure vanilla javascript for the project.', 'duration': 243.623, 'highlights': ['The first step in starting a new UI project is to use design tools like Adobe Experience Design or Illustrator to get a solid idea of the UI (User Interface) design.', 'The project focuses on using pure vanilla JavaScript without frameworks or libraries like React or Angular for now.', 'The transcript also highlights the use of a simple HTML structure, including an H1 element, a button with an ID for call to action, and a div with a class for a panel and a box.']}, {'end': 475.242, 'start': 331.32, 'title': 'Creating web page layout with html and css', 'summary': 'Covers creating a web page layout with html and css, including setting the font family, adding a red text headline, a black outline button, a panel with an svg graphic, and a paragraph element, all designed for desktop resolution around 1920 or 2k res.', 'duration': 143.922, 'highlights': ['Creating a panel with a width of 55% of the browser and a bottom positioning, designed for desktop resolution around 1920 or 2K res.', 'Adding a red text headline and a black outline button to the web page layout.', 'Including a paragraph element and a box in the web page layout.']}], 'duration': 387.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ87537.jpg', 'highlights': ['The first step in starting a new UI project is to use design tools like Adobe Experience Design or Illustrator to get a solid idea of the UI (User Interface) design.', 'Creating a panel with a width of 55% of the browser and a bottom positioning, designed for desktop resolution around 1920 or 2K res.', 'The project focuses on using pure vanilla JavaScript without frameworks or libraries like React or Angular for now.', 'Adding a red text headline and a black outline button to the web page layout.', 'The transcript also highlights the use of a simple HTML structure, including an H1 element, a button with an ID for call to action, and a div with a class for a panel and a box.', 'Including a paragraph element and a box in the web page layout.']}, {'end': 914.522, 'segs': [{'end': 502.404, 'src': 'embed', 'start': 475.262, 'weight': 4, 'content': [{'end': 483.487, 'text': "We just have a border with a height, a position of absolute, and we're just positioning it based on what I did in the Adobe XD mockup.", 'start': 475.262, 'duration': 8.225}, {'end': 490.111, 'text': "All right, so now I'm going to hit control B, right click and open with live server.", 'start': 484.068, 'duration': 6.043}, {'end': 493.854, 'text': "This is an extension that you'd have to install for Visual Studio Code.", 'start': 490.171, 'duration': 3.683}, {'end': 495.921, 'text': 'And there you go.', 'start': 494.941, 'duration': 0.98}, {'end': 496.762, 'text': "It's not working.", 'start': 496.061, 'duration': 0.701}, {'end': 498.962, 'text': 'What the hell? All right.', 'start': 497.522, 'duration': 1.44}, {'end': 501.263, 'text': 'So I need to get this.', 'start': 499.002, 'duration': 2.261}, {'end': 502.404, 'text': 'Oh, I know why.', 'start': 501.583, 'duration': 0.821}], 'summary': 'Troubleshooting web design using adobe xd mockup and visual studio code.', 'duration': 27.142, 'max_score': 475.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ475262.jpg'}, {'end': 579.555, 'src': 'heatmap', 'start': 549.672, 'weight': 1, 'content': [{'end': 554.796, 'text': 'But this is basically what we want the final state after the animation has taken place.', 'start': 549.672, 'duration': 5.124}, {'end': 561.501, 'text': "So make sure you have all that in order before you start to do your animation when you're trying to do something like this.", 'start': 554.856, 'duration': 6.645}, {'end': 561.922, 'text': 'All right.', 'start': 561.702, 'duration': 0.22}, {'end': 564.063, 'text': "So I'm going to add that back.", 'start': 562.022, 'duration': 2.041}, {'end': 565.064, 'text': 'All right.', 'start': 564.804, 'duration': 0.26}, {'end': 573.751, 'text': "So now let's go ahead and hit control B and we're going to import our tween max.", 'start': 565.124, 'duration': 8.627}, {'end': 574.291, 'text': 'All right.', 'start': 574.011, 'duration': 0.28}, {'end': 579.555, 'text': "So there's a CDN that where you can find all this stuff.", 'start': 574.371, 'duration': 5.184}], 'summary': 'Preparing for animation with tween max and cdn import.', 'duration': 29.883, 'max_score': 549.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ549672.jpg'}, {'end': 607.066, 'src': 'embed', 'start': 574.371, 'weight': 0, 'content': [{'end': 579.555, 'text': "So there's a CDN that where you can find all this stuff.", 'start': 574.371, 'duration': 5.184}, {'end': 589.183, 'text': "So if you just go to Google and type in, let's see here, green socks, tween max CDN.", 'start': 580.536, 'duration': 8.647}, {'end': 595.723, 'text': "Click on here and you're gonna find all the plugins that you have available to you.", 'start': 590.902, 'duration': 4.821}, {'end': 600.364, 'text': 'So we have Tween Lite, Tween Line, just a bunch of them.', 'start': 595.803, 'duration': 4.561}, {'end': 607.066, 'text': 'So the one that we wanna use is right here, tweenmax.min.js.', 'start': 600.424, 'duration': 6.642}], 'summary': 'A cdn offers various plugins, including tween lite and tween max, accessible by searching for green socks, tween max cdn on google.', 'duration': 32.695, 'max_score': 574.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ574371.jpg'}, {'end': 675.701, 'src': 'embed', 'start': 648.715, 'weight': 2, 'content': [{'end': 655.442, 'text': 'So we have to remedy this stuff and we have to i hide it and make adjustments based on how we want it to animate.', 'start': 648.715, 'duration': 6.727}, {'end': 664.19, 'text': 'so, for the first thing that i want to do is, we remember we had our panel, we had a couple properties down here that we wanted to adjust.', 'start': 655.442, 'duration': 8.748}, {'end': 669.455, 'text': 'uh, so what i decided to do was, instead of just taking the opacity to zero or something,', 'start': 664.19, 'duration': 5.265}, {'end': 675.701, 'text': "i decided to do a transform And we're going to scale on the Y axis, which is vertical, to zero.", 'start': 669.455, 'duration': 6.246}], 'summary': 'Adjusting panel properties for animation by scaling on the y axis to zero.', 'duration': 26.986, 'max_score': 648.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ648715.jpg'}, {'end': 786.751, 'src': 'embed', 'start': 759.673, 'weight': 1, 'content': [{'end': 766.636, 'text': "So now what we'll do is we'll go ahead and we have to create a click event based on this button.", 'start': 759.673, 'duration': 6.963}, {'end': 766.936, 'text': 'all right?', 'start': 766.636, 'duration': 0.3}, {'end': 772.199, 'text': 'So everything happens when a person clicks on this button with the ID of CTA for call to action.', 'start': 767.136, 'duration': 5.063}, {'end': 773.8, 'text': "So we're gonna put document.", 'start': 772.639, 'duration': 1.161}, {'end': 778.404, 'text': "And then we're going to need to put in a get element by ID.", 'start': 774.64, 'duration': 3.764}, {'end': 786.751, 'text': 'The element happens to be CTA, the ID, and then also add event listener.', 'start': 779.344, 'duration': 7.407}], 'summary': 'Create a click event for button id cta.', 'duration': 27.078, 'max_score': 759.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ759673.jpg'}, {'end': 861.167, 'src': 'embed', 'start': 813.311, 'weight': 3, 'content': [{'end': 816.812, 'text': 'In our case, it happens to be the panel element.', 'start': 813.311, 'duration': 3.501}, {'end': 818.093, 'text': 'So we want that panel.', 'start': 817.152, 'duration': 0.941}, {'end': 822.674, 'text': "It's the first thing we want to start animating, and it's a class of panel.", 'start': 818.133, 'duration': 4.541}, {'end': 825.516, 'text': 'So we put in panel here.', 'start': 823.515, 'duration': 2.001}, {'end': 833.47, 'text': 'And if there were multiple elements with the panel class here in our HTML, those would animate as well.', 'start': 826.676, 'duration': 6.794}, {'end': 839.622, 'text': 'All right, next we comma separate it and the next argument is the animation duration.', 'start': 834.721, 'duration': 4.901}, {'end': 842.423, 'text': "All right, so for this, I'll just put one.", 'start': 839.642, 'duration': 2.781}, {'end': 849.884, 'text': "And then next, it's going to accept the different parameters from which you want to animate their properties.", 'start': 843.683, 'duration': 6.201}, {'end': 855.486, 'text': 'And these are based on CSS property names.', 'start': 850.765, 'duration': 4.721}, {'end': 861.167, 'text': "And when it comes to some of the property names, they're structured differently in camel case.", 'start': 855.706, 'duration': 5.461}], 'summary': 'Animating the panel element with a class of panel, using comma-separated arguments and css property names for animation.', 'duration': 47.856, 'max_score': 813.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ813311.jpg'}], 'start': 475.262, 'title': 'Setting up web animation and applying click event with tweenmax', 'summary': 'Covers the process of setting up web animations using tweenmax, including installation steps and initial properties setup. it also explains creating a click event for a button with id cta and applying a tween animation to the panel element, setting scale y to 1 and height to 100 viewport heights with a duration of 1.', 'chapters': [{'end': 758.852, 'start': 475.262, 'title': 'Web animation setup with tweenmax', 'summary': 'Covers the setup process for creating web animations using tweenmax, including the installation of live server extension, importing tweenmax via cdn, and setting initial elements properties for animation.', 'duration': 283.59, 'highlights': ['Setting up live server extension for Visual Studio Code The speaker mentions the need to install the live server extension for Visual Studio Code to open the web page.', 'Importing TweenMax via CDN The tutorial includes instructions for importing TweenMax via CDN by finding the appropriate plugin and using the provided script tag.', 'Adjusting initial element properties for animation The speaker explains the process of setting initial element properties, such as hiding elements and making adjustments for animation, including changing opacity and applying transform properties.']}, {'end': 914.522, 'start': 759.673, 'title': 'Click event and tween animation', 'summary': 'Explains how to create a click event for a button with the id of cta and apply a tween animation to the panel element, setting its scale y to 1 and height to 100 viewport heights with a duration of 1.', 'duration': 154.849, 'highlights': ['The chapter explains how to create a click event for a button with the ID of CTA, using document.getElementById and addEventListener.', 'It details the process of applying a tween animation to the panel element, setting its scale y to 1 and height to 100 viewport Heights with a duration of 1.', 'The method accepts the target element for animation and its parameters, based on CSS property names, with the scale y set to 1 for 100% height.']}], 'duration': 439.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ475262.jpg', 'highlights': ['Importing TweenMax via CDN The tutorial includes instructions for importing TweenMax via CDN by finding the appropriate plugin and using the provided script tag.', 'The chapter explains how to create a click event for a button with the ID of CTA, using document.getElementById and addEventListener.', 'Adjusting initial element properties for animation The speaker explains the process of setting initial element properties, such as hiding elements and making adjustments for animation, including changing opacity and applying transform properties.', 'The method accepts the target element for animation and its parameters, based on CSS property names, with the scale y set to 1 for 100% height.', 'Setting up live server extension for Visual Studio Code The speaker mentions the need to install the live server extension for Visual Studio Code to open the web page.', 'It details the process of applying a tween animation to the panel element, setting its scale y to 1 and height to 100 viewport Heights with a duration of 1.']}, {'end': 1433.07, 'segs': [{'end': 943.365, 'src': 'heatmap', 'start': 915.342, 'weight': 0, 'content': [{'end': 922.644, 'text': "And then also, well, for now we're going to leave that right there and just give it a shot as is, and that's all it's going to take.", 'start': 915.342, 'duration': 7.302}, {'end': 927.405, 'text': 'So now look at that awesome stuff.', 'start': 923.204, 'duration': 4.201}, {'end': 930.566, 'text': "And of course the other stuff isn't shown because we have opacity zero.", 'start': 927.425, 'duration': 3.141}, {'end': 935.515, 'text': 'All right, so it is a duration of one second.', 'start': 933.592, 'duration': 1.923}, {'end': 943.365, 'text': "It does have some default, I think it's like a default ease in that you'll see.", 'start': 936.115, 'duration': 7.25}], 'summary': 'Transcript discusses a one-second duration with default ease-in and opacity zero.', 'duration': 28.023, 'max_score': 915.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ915342.jpg'}, {'end': 992.2, 'src': 'embed', 'start': 961.826, 'weight': 1, 'content': [{'end': 970.895, 'text': "So what do you know which values you can use? We'll go to the docs, greenstock.com forward slash docs, and we'll put in, we'll go to easing.", 'start': 961.826, 'duration': 9.069}, {'end': 975.692, 'text': 'And this has a great little, uh, ease visualizer here.', 'start': 972.15, 'duration': 3.542}, {'end': 986.717, 'text': 'And these are all the different types of easing that they, they offer, uh, in along with, based on what you chose the ease property.', 'start': 976.472, 'duration': 10.245}, {'end': 987.858, 'text': 'All right.', 'start': 986.737, 'duration': 1.121}, {'end': 990.359, 'text': 'So go through all of these.', 'start': 987.918, 'duration': 2.441}, {'end': 992.2, 'text': "They're really cool.", 'start': 990.879, 'duration': 1.321}], 'summary': 'Learn about different easing options at greenstock.com/docs/easing.', 'duration': 30.374, 'max_score': 961.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ961826.jpg'}, {'end': 1433.07, 'src': 'embed', 'start': 1384.436, 'weight': 2, 'content': [{'end': 1396.806, 'text': 'you can also use their timeline and to really add an extra level of flexibility and also ease of use without having to deal with all of these delays.', 'start': 1384.436, 'duration': 12.37}, {'end': 1404.472, 'text': "And that's going to be something that I cover in either the next tutorial or in a day or two coming down the road.", 'start': 1397.506, 'duration': 6.966}, {'end': 1406.812, 'text': 'All right, hopefully you found that useful.', 'start': 1405.131, 'duration': 1.681}, {'end': 1411.055, 'text': "Again, I'm really excited to start covering more of this.", 'start': 1408.293, 'duration': 2.762}, {'end': 1416.118, 'text': 'So expect more tutorials here in the next week and two and going forward,', 'start': 1411.115, 'duration': 5.003}, {'end': 1424.064, 'text': "because we've only just scratched the surface of what this company and their products are capable of allowing you to do as a UI designer.", 'start': 1416.118, 'duration': 7.946}, {'end': 1428.006, 'text': "So again, make sure to answer today's question, which is outside of GSAP.", 'start': 1424.364, 'duration': 3.642}, {'end': 1430.568, 'text': 'do you use any other animation libraries??', 'start': 1428.006, 'duration': 2.562}, {'end': 1432.77, 'text': "All right, make sure to subscribe and I'll see you soon.", 'start': 1430.588, 'duration': 2.182}, {'end': 1433.07, 'text': 'Goodbye.', 'start': 1432.79, 'duration': 0.28}], 'summary': "Expect more tutorials in the next week, as we've only scratched the surface of what this company's products can do for ui designers.", 'duration': 48.634, 'max_score': 1384.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ1384436.jpg'}], 'start': 915.342, 'title': 'Animation effects and easing in web development', 'summary': 'Explores creating animations in web development with default and custom easing effects, specific examples, durations, and the impact of opacity and delays. it also showcases the availability of different easing options and a visualizer tool for reference.', 'chapters': [{'end': 1148.107, 'start': 915.342, 'title': 'Animation effects and easing in web development', 'summary': 'Explains the process of creating animations in web development, showcasing the use of default and custom easing effects, with specific examples and durations, and the impact of opacity and delays on the animation. it also highlights the availability of different easing options and the visualizer tool for reference.', 'duration': 232.765, 'highlights': ['The chapter demonstrates the process of creating animations, including the use of default ease and specifying custom easing, with examples of durations and the impact on animation speed and appearance.', 'The transcript highlights the impact of opacity in animations, showcasing the change from opacity zero to one and its effect on the visibility of the animation.', 'It also mentions the use of delays in animations and the impact of delays on the start timing of the animation, with a specific example of the falling and down animation effect created by setting a Y value to zero.', 'The availability of different easing options and the reference to the ease visualizer tool for web developers are also highlighted in the transcript, emphasizing the flexibility and powerful features for creating animations in web development.']}, {'end': 1433.07, 'start': 1148.167, 'title': 'Animating with gsap', 'summary': 'Demonstrates how to use gsap to create complex animation sequences, including adding delays, experimenting with easing options, and utilizing the timeline for flexibility, with the potential for further tutorials and exploration of the capabilities of gsap.', 'duration': 284.903, 'highlights': ['GSAP allows for the creation of complex animation sequences with features like delays, easing options, and utilizing timelines for flexibility The tutorial covers adding delays, experimenting with easing options, and utilizing the timeline for flexibility, showcasing the potential for creating complex animation sequences.', "Use of GSAP's timeline provides an extra level of flexibility and ease of use for animation sequences The use of GSAP's timeline is highlighted for its ability to add an extra level of flexibility and ease of use to create animation sequences, compared to using straight up tween max.", 'The tutorial hints at the potential for further tutorials and exploration of the capabilities of GSAP The tutorial suggests the potential for further tutorials and exploration of the capabilities of GSAP, indicating the possibility of more tutorials and in-depth exploration in the future.']}], 'duration': 517.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eY4sXczY5AQ/pics/eY4sXczY5AQ915342.jpg', 'highlights': ['The chapter demonstrates creating animations with default and custom easing, durations, and opacity impact.', 'The tutorial emphasizes the availability of different easing options and a visualizer tool for reference.', 'GSAP allows for creating complex animation sequences with delays, easing options, and timelines.', "The use of GSAP's timeline provides an extra level of flexibility and ease of use for animation sequences.", 'The tutorial hints at the potential for further exploration of the capabilities of GSAP.']}], 'highlights': ['The tutorial emphasizes the availability of different easing options and a visualizer tool for reference.', 'GSAP allows for creating complex animation sequences with delays, easing options, and timelines.', "The use of GSAP's timeline provides an extra level of flexibility and ease of use for animation sequences.", 'The tutorial hints at the potential for further exploration of the capabilities of GSAP.', 'The chapter demonstrates creating animations with default and custom easing, durations, and opacity impact.', 'The method accepts the target element for animation and its parameters, based on CSS property names, with the scale y set to 1 for 100% height.', 'The chapter explains how to create a click event for a button with the ID of CTA, using document.getElementById and addEventListener.', 'The tutorial includes instructions for importing TweenMax via CDN by finding the appropriate plugin and using the provided script tag.', 'The first step in starting a new UI project is to use design tools like Adobe Experience Design or Illustrator to get a solid idea of the UI (User Interface) design.', 'Creating a panel with a width of 55% of the browser and a bottom positioning, designed for desktop resolution around 1920 or 2K res.', 'The project focuses on using pure vanilla JavaScript without frameworks or libraries like React or Angular for now.', 'Adding a red text headline and a black outline button to the web page layout.', 'The transcript also highlights the use of a simple HTML structure, including an H1 element, a button with an ID for call to action, and a div with a class for a panel and a box.', 'Including a paragraph element and a box in the web page layout.', 'Introduction of bookmark.com, a free website builder using artificial intelligence to create websites in under two minutes by answering seven simple questions.', 'The tutorial focuses on using Tween Max for creating a simple animation.', 'GSAP is a powerful animation platform and a collection of different products, some of which are free.']}