title
Notifications, Alerts, Menus — CSS Animations

description
Today we look at some different ideas for animating alerts and notifications. Get the Code: http://codepen.io/devtips/pen/mEjOLg Watch the Disney video about animation I mentioned: https://www.youtube.com/watch?v=jn5OB12u8Pw - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'Notifications, Alerts, Menus — CSS Animations', 'heatmap': [{'end': 778.197, 'start': 754.298, 'weight': 0.982}, {'end': 1673.411, 'start': 1622.081, 'weight': 0.725}, {'end': 1859.722, 'start': 1835.166, 'weight': 0.707}, {'end': 2001.24, 'start': 1968.699, 'weight': 0.77}, {'end': 2213.4, 'start': 2184.563, 'weight': 1}], 'summary': 'Covers various css animation techniques, including creating notifications and alerts with quantifiable data such as nine views, four comments, and six new followers, utilizing transitions and transforms with specific durations and delays, and emphasizing the importance of animation speed for user experience.', 'chapters': [{'end': 154.251, 'segs': [{'end': 91.388, 'src': 'embed', 'start': 44.085, 'weight': 2, 'content': [{'end': 50.449, 'text': "And similar to the other videos, how we've been doing, I've set up the CodePen to work with Jade here.", 'start': 44.085, 'duration': 6.364}, {'end': 56.192, 'text': "If you're not comfortable with Jade, you can click this little dropdown and view compiled and see some old school HTML.", 'start': 50.809, 'duration': 5.383}, {'end': 57.313, 'text': "And that's just fine.", 'start': 56.432, 'duration': 0.881}, {'end': 60.275, 'text': "Also, I'm working with SAS for the CSS.", 'start': 57.853, 'duration': 2.422}, {'end': 62.436, 'text': 'And you can, again, view compiled CSS.', 'start': 60.315, 'duration': 2.121}, {'end': 69.459, 'text': 'And then I have just some JavaScript triggering mechanisms going on.', 'start': 62.996, 'duration': 6.463}, {'end': 71.12, 'text': 'Not a big deal.', 'start': 70.439, 'duration': 0.681}, {'end': 73, 'text': 'So where should we start??', 'start': 71.96, 'duration': 1.04}, {'end': 73.961, 'text': 'OK, how about this?', 'start': 73.161, 'duration': 0.8}, {'end': 80.644, 'text': "If you haven't seen the first three videos of this series these ones here then you should probably go check them out.", 'start': 74.121, 'duration': 6.523}, {'end': 83.085, 'text': "They talk about what we're doing syntactically.", 'start': 80.684, 'duration': 2.401}, {'end': 87.087, 'text': 'How do you accomplish an animation with HTML and CSS?', 'start': 83.165, 'duration': 3.922}, {'end': 91.388, 'text': 'And then the third one talks about from the point of view of the user,', 'start': 88.007, 'duration': 3.381}], 'summary': 'Transcript covers setup of codepen with jade, sas for css, and javascript triggering mechanisms.', 'duration': 47.303, 'max_score': 44.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG444085.jpg'}, {'end': 154.251, 'src': 'embed', 'start': 111.858, 'weight': 0, 'content': [{'end': 114.18, 'text': "Let me show you the three things that we're going to be doing today.", 'start': 111.858, 'duration': 2.322}, {'end': 118.043, 'text': "We're going to be talking about notifications, alerts, and modals.", 'start': 114.2, 'duration': 3.843}, {'end': 122.666, 'text': 'So this first one here, these all work, by the way, currently with CSS.', 'start': 118.243, 'duration': 4.423}, {'end': 125.248, 'text': 'This first one here is kind of like a..', 'start': 123.467, 'duration': 1.781}, {'end': 133.335, 'text': 'like an Instagram kind of a bottom bar there, and if you click on the like the Notifications button,', 'start': 126.589, 'duration': 6.746}, {'end': 137.858, 'text': 'you get a summary of what type of notifications are waiting for you.', 'start': 133.335, 'duration': 4.523}, {'end': 145.464, 'text': 'so in this case you have nine views, four comments and six new followers, and What we want to do in a few short minutes.', 'start': 137.858, 'duration': 7.606}, {'end': 147.005, 'text': "We're going to look at this and say okay.", 'start': 145.484, 'duration': 1.521}, {'end': 154.251, 'text': 'How can we bring delight and? interest of the user into this action?', 'start': 147.045, 'duration': 7.206}], 'summary': 'Discussion on notifications, alerts, and modals, including a specific example with 9 views, 4 comments, and 6 new followers.', 'duration': 42.393, 'max_score': 111.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4111858.jpg'}], 'start': 0.109, 'title': 'Animating notifications and alerts', 'summary': 'Discusses using animations to introduce new items to the page, including notifications, alerts, and modals, which currently work with css, and demonstrates an instagram-like bottom bar with notifications showing nine views, four comments, and six new followers.', 'chapters': [{'end': 154.251, 'start': 0.109, 'title': 'Animating notifications and alerts', 'summary': 'Discusses using animations to introduce new items to the page, including notifications, alerts, and modals, which currently work with css, and demonstrates an instagram-like bottom bar with notifications showing nine views, four comments, and six new followers.', 'duration': 154.142, 'highlights': ['The chapter discusses using animations to introduce new items to the page, including notifications, alerts, and modals The chapter covers introducing new items to the page using animations, specifically focusing on notifications, alerts, and modals.', 'Demonstrates an Instagram-like bottom bar with notifications showing nine views, four comments, and six new followers An Instagram-like bottom bar with notifications is demonstrated, showing nine views, four comments, and six new followers to bring delight and interest to the user.', 'The code for the video is going to take place in CodePen The code for the video will be available in CodePen, allowing viewers to access and review the code live.', "Recommendation to watch the first three videos of the series for understanding the syntactical aspects and usability of animations Viewers are encouraged to watch the first three videos of the series to understand the syntactical aspects and usability of animations, covering how to accomplish an animation with HTML and CSS and when to use animations from the user's perspective."]}], 'duration': 154.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4109.jpg', 'highlights': ['The chapter covers introducing new items to the page using animations, specifically focusing on notifications, alerts, and modals.', 'An Instagram-like bottom bar with notifications is demonstrated, showing nine views, four comments, and six new followers to bring delight and interest to the user.', 'The code for the video will be available in CodePen, allowing viewers to access and review the code live.', "Viewers are encouraged to watch the first three videos of the series to understand the syntactical aspects and usability of animations, covering how to accomplish an animation with HTML and CSS and when to use animations from the user's perspective."]}, {'end': 558.143, 'segs': [{'end': 180.294, 'src': 'embed', 'start': 154.251, 'weight': 0, 'content': [{'end': 159.46, 'text': "by using animation, and Let's scroll a little bit down there to get a preview of what else we got in store.", 'start': 154.251, 'duration': 5.209}, {'end': 164.003, 'text': 'We have this mock website called the Many Faces of Murray.', 'start': 159.52, 'duration': 4.483}, {'end': 168.826, 'text': 'And if you click a Bill Murray face, you get notified that you clicked a Bill Murray face.', 'start': 164.484, 'duration': 4.342}, {'end': 180.294, 'text': "So this is going to be talking about alerts, like something happened on the page, or there's an error maybe, or you can go undo something.", 'start': 169.287, 'duration': 11.007}], 'summary': 'Demonstrated mock website with animation and alerts for bill murray faces.', 'duration': 26.043, 'max_score': 154.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4154251.jpg'}, {'end': 250.387, 'src': 'embed', 'start': 218.006, 'weight': 1, 'content': [{'end': 226.187, 'text': "So I'm not gonna get too deep into the HTML and CSS of it, but suffice it to say that there's.", 'start': 218.006, 'duration': 8.181}, {'end': 233.429, 'text': 'when you click on each of these, they have a class added to the list element called isActive.', 'start': 226.187, 'duration': 7.242}, {'end': 242.796, 'text': 'And isActive will add this little, This bar here is done with a box shadow inset with this color.', 'start': 234.189, 'duration': 8.607}, {'end': 250.387, 'text': "And it'll make the color white, pure white, instead of see-through, transparent white.", 'start': 243.617, 'duration': 6.77}], 'summary': 'Clicking on elements adds class isactive, changing color to white.', 'duration': 32.381, 'max_score': 218.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4218006.jpg'}, {'end': 300.888, 'src': 'embed', 'start': 273.116, 'weight': 2, 'content': [{'end': 278.177, 'text': "actually i'm going to scroll up here and it's the nav li, then the, the,", 'start': 273.116, 'duration': 5.061}, {'end': 285.1, 'text': "the list item that's directly in the nav and it's getting this box shadow and the different colors here.", 'start': 278.177, 'duration': 6.923}, {'end': 292.884, 'text': 'So if we put a simple transition on it, we should be able to take care of most of all of that here.', 'start': 285.14, 'duration': 7.744}, {'end': 300.888, 'text': 'if we use the keyword all and then just use like 200 milliseconds, good old fashioned ease in out.', 'start': 292.884, 'duration': 8.004}], 'summary': 'Adding a simple transition of 200 milliseconds to the nav list item can resolve the box shadow and color issues.', 'duration': 27.772, 'max_score': 273.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4273116.jpg'}], 'start': 154.251, 'title': 'Web animation and styling', 'summary': 'Covers using animation for user alerts and modals to enhance interaction, as well as styling components with css classes and applying transitions for dynamic effects like fading, scaling, and rotating.', 'chapters': [{'end': 217.265, 'start': 154.251, 'title': 'Web animation for user interaction', 'summary': 'Discusses the use of animation for user alerts and modals, showcasing a mock website with examples of alert notifications and modal introduction, aiming to enhance user understanding and interaction.', 'duration': 63.014, 'highlights': ['The chapter covers the use of animation for alerts and modals on a mock website called the Many Faces of Murray, providing examples of alert notifications and modal introduction.', 'It demonstrates the functionality of alert notifications when clicking on a Bill Murray face, aiming to notify users of specific actions on the page.', 'The chapter also explores the introduction of a modal through animation, focusing on helping users understand its origin, purpose, and dismissal process.']}, {'end': 558.143, 'start': 218.006, 'title': 'Styling and animating components', 'summary': 'Discusses adding css classes for styling components, using transitions for smooth animations, and applying animations like fading, scaling, and rotating to create dynamic effects.', 'duration': 340.137, 'highlights': ['Adding CSS classes for styling components The speaker discusses adding a class called isActive to list elements and using box shadow and background color to style the components.', "Using transitions for smooth animations The speaker demonstrates using a transition with 'all' keyword and 200 milliseconds duration to create smooth property changes, which results in a quick fade into properties.", "Applying animations like fading, scaling, and rotating The speaker explains using animation properties like 'opacity', 'scale', and 'rotate' in CSS to create dynamic effects such as fading in, scaling up, and spinning components."]}], 'duration': 403.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4154251.jpg', 'highlights': ['The chapter covers the use of animation for alerts and modals on a mock website called the Many Faces of Murray, providing examples of alert notifications and modal introduction.', 'Adding CSS classes for styling components The speaker discusses adding a class called isActive to list elements and using box shadow and background color to style the components.', "Using transitions for smooth animations The speaker demonstrates using a transition with 'all' keyword and 200 milliseconds duration to create smooth property changes, which results in a quick fade into properties."]}, {'end': 817.145, 'segs': [{'end': 638.441, 'src': 'embed', 'start': 575.648, 'weight': 0, 'content': [{'end': 591.695, 'text': "the laws of animation and how things move in real life and how we should emulate the properties of the physics in real life when we're simulating things like this digitally or,", 'start': 575.648, 'duration': 16.047}, {'end': 595.136, 'text': "in their case, when we're creating a movie or an animation.", 'start': 591.695, 'duration': 3.441}, {'end': 597.797, 'text': 'So what am I referring to??', 'start': 596.177, 'duration': 1.62}, {'end': 603.619, 'text': 'What if we did something that was a little bit more bouncy?', 'start': 598.217, 'duration': 5.402}, {'end': 606.98, 'text': 'So this is like a linear kind of thing, right?', 'start': 603.739, 'duration': 3.241}, {'end': 609.241, 'text': 'It has a hard start and a hard end.', 'start': 607.34, 'duration': 1.901}, {'end': 612.803, 'text': "But things don't do that in real life.", 'start': 610.621, 'duration': 2.182}, {'end': 619.988, 'text': "If you're going to run at somebody and then stop quickly, you're going to have to slow down first and then kind of catch yourself.", 'start': 612.843, 'duration': 7.145}, {'end': 625.331, 'text': 'And we want to emulate that using the CSS code here.', 'start': 620.628, 'duration': 4.703}, {'end': 626.172, 'text': "So let's do it.", 'start': 625.351, 'duration': 0.821}, {'end': 633.077, 'text': "At 50%, why don't we say, again, let's go up and grab this code here.", 'start': 626.312, 'duration': 6.765}, {'end': 636.98, 'text': 'Transform a rotate.', 'start': 635.58, 'duration': 1.4}, {'end': 638.441, 'text': "Let's go past zero.", 'start': 637.02, 'duration': 1.421}], 'summary': 'Emulate real-life physics in digital animation, incorporating realistic movement and behavior to enhance visual effects.', 'duration': 62.793, 'max_score': 575.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4575648.jpg'}, {'end': 748.375, 'src': 'embed', 'start': 716.041, 'weight': 2, 'content': [{'end': 726.1, 'text': "Cool Another thing I thought of, instead of having the opacity land at 100%, let's do the opacity at like 50.", 'start': 716.041, 'duration': 10.059}, {'end': 729.987, 'text': "That way it's coming in quicker visibly, but we still have all the motion.", 'start': 726.1, 'duration': 3.887}, {'end': 735.808, 'text': 'Yeah, I like it.', 'start': 734.867, 'duration': 0.941}, {'end': 739.67, 'text': 'And one other thing we can do is do another kind of rotate.', 'start': 736.328, 'duration': 3.342}, {'end': 748.375, 'text': "Rotate, rotate what? Rotate X? Rotate X is interesting because you're not doing a rotate like this.", 'start': 740.33, 'duration': 8.045}], 'summary': 'Adjust opacity to 50% for quicker visibility while maintaining motion, and consider implementing a different type of rotation.', 'duration': 32.334, 'max_score': 716.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4716041.jpg'}, {'end': 780.298, 'src': 'heatmap', 'start': 754.298, 'weight': 0.982, 'content': [{'end': 759.041, 'text': "So let's say 90 degrees here on rotateX.", 'start': 754.298, 'duration': 4.743}, {'end': 763.885, 'text': "And if we slow this animation down, let's slow it down to like five seconds.", 'start': 759.462, 'duration': 4.423}, {'end': 765.106, 'text': 'That might be a really long time.', 'start': 764.105, 'duration': 1.001}, {'end': 769.733, 'text': 'You see how that Rotate X kind of made it come like this?', 'start': 766.792, 'duration': 2.941}, {'end': 778.197, 'text': "Whoa!. Looks like somebody's releasing a Jack in the Box puppet, like they're doing the crank thing.", 'start': 770.554, 'duration': 7.643}, {'end': 780.298, 'text': 'I like that.', 'start': 779.778, 'duration': 0.52}], 'summary': 'Rotatex at 90 degrees, slowed to 5 seconds, creating a jack in the box effect.', 'duration': 26, 'max_score': 754.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4754298.jpg'}, {'end': 817.145, 'src': 'embed', 'start': 780.878, 'weight': 3, 'content': [{'end': 783.76, 'text': 'We can do the Rotate X a little bit more exaggerated too.', 'start': 780.878, 'duration': 2.882}, {'end': 787.081, 'text': "We're using this kind of Disney ethic.", 'start': 784.6, 'duration': 2.481}, {'end': 793.124, 'text': "Let's say Rotate X to be negative two degrees.", 'start': 787.801, 'duration': 5.323}, {'end': 794.865, 'text': 'So it kind of like..', 'start': 793.624, 'duration': 1.241}, {'end': 797.348, 'text': 'Bounces at you.', 'start': 796.186, 'duration': 1.162}, {'end': 798.53, 'text': 'It comes back.', 'start': 797.368, 'duration': 1.162}, {'end': 800.353, 'text': "I think that's good.", 'start': 799.712, 'duration': 0.641}, {'end': 804.962, 'text': "It doesn't need to be, we can make it up like 800 milliseconds.", 'start': 800.514, 'duration': 4.448}, {'end': 814.223, 'text': 'Okay Does that sound fun? I like it.', 'start': 807.366, 'duration': 6.857}, {'end': 815.184, 'text': "Let's move on to the next one.", 'start': 814.263, 'duration': 0.921}, {'end': 817.145, 'text': 'So what do we have going on here?', 'start': 815.684, 'duration': 1.461}], 'summary': 'Exaggerate rotate x by -2 degrees for a disney-like effect, with a bounce animation lasting 800 milliseconds.', 'duration': 36.267, 'max_score': 780.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4780878.jpg'}], 'start': 559.639, 'title': 'Animation principles and css techniques', 'summary': "Covers disney's laws of animation, emphasizing real-life physics in digital simulations and recommending a video, and also explains css techniques to create realistic bounce effects using transforming, scaling, translating, and rotating elements, resulting in engaging animations.", 'chapters': [{'end': 606.98, 'start': 559.639, 'title': "Disney's laws of animation", 'summary': "Discusses disney's laws of animation and the importance of emulating real-life physics in digital simulations, with a recommendation to watch a relevant video.", 'duration': 47.341, 'highlights': ['The importance of emulating real-life physics in digital simulations for creating movies or animations.', 'Recommendation to watch a video from Disney discussing the laws of animation and how things move in real life.', 'Emphasizing the significance of understanding and applying the laws of animation for creating realistic and engaging digital content.']}, {'end': 817.145, 'start': 607.34, 'title': 'Css animation: emulating realistic motion', 'summary': 'Demonstrates how to use css code to create a realistic bounce effect, including transforming, scaling, translating, and rotating elements, resulting in a visually appealing and engaging animation.', 'duration': 209.805, 'highlights': ['The chapter demonstrates creating a realistic bounce effect using CSS code, including transforming, scaling, translating, and rotating elements.', 'The animation is fine-tuned by adjusting parameters such as degrees, pixels, and opacity to achieve a visually appealing and engaging effect.', "The use of 'Rotate X' in the animation adds an interesting dimension, with adjustments made to create an exaggerated bounce effect.", 'The demonstration emphasizes emulating natural motion, showcasing the step-by-step process of refining the animation to achieve a visually appealing result.']}], 'duration': 257.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4559639.jpg', 'highlights': ['Understanding and applying the laws of animation is crucial for creating realistic and engaging digital content.', 'The chapter demonstrates creating a realistic bounce effect using CSS code, including transforming, scaling, translating, and rotating elements.', 'The animation is fine-tuned by adjusting parameters such as degrees, pixels, and opacity to achieve a visually appealing and engaging effect.', "The use of 'Rotate X' in the animation adds an interesting dimension, with adjustments made to create an exaggerated bounce effect.", 'The demonstration emphasizes emulating natural motion, showcasing the step-by-step process of refining the animation to achieve a visually appealing result.', 'Recommendation to watch a video from Disney discussing the laws of animation and how things move in real life.', 'The importance of emulating real-life physics in digital simulations for creating movies or animations.']}, {'end': 1297.789, 'segs': [{'end': 888.814, 'src': 'embed', 'start': 819.706, 'weight': 0, 'content': [{'end': 828.29, 'text': "It's basically a toggle of this class which will make the opacity 1 or 0 if you click on any one of these Murray faces.", 'start': 819.706, 'duration': 8.584}, {'end': 833.513, 'text': "So let's look at this alert and see what would be a good candidate for the animation.", 'start': 828.55, 'duration': 4.963}, {'end': 839.317, 'text': 'When I built this thing, I did it so that there could be three main components.', 'start': 834.854, 'duration': 4.463}, {'end': 843.1, 'text': 'The first one would be the whole thing.', 'start': 840.198, 'duration': 2.902}, {'end': 852.506, 'text': 'What is it called? The alert element, which is the blue box and the black box all together.', 'start': 844.561, 'duration': 7.945}, {'end': 853.507, 'text': "It's this whole thing right here.", 'start': 852.526, 'duration': 0.981}, {'end': 854.448, 'text': "That's the alert element.", 'start': 853.547, 'duration': 0.901}, {'end': 857.71, 'text': "Then there's the icon, the HTML element, which is an eye.", 'start': 854.988, 'duration': 2.722}, {'end': 863.555, 'text': "And then the other one is this text box here, which is the black background, and that's right there.", 'start': 859.071, 'duration': 4.484}, {'end': 869.641, 'text': "And so I'm thinking we can use all of these things and animate them at different speeds.", 'start': 864.216, 'duration': 5.425}, {'end': 874.326, 'text': "so where they feel like they're kind of building themselves right?", 'start': 869.641, 'duration': 4.685}, {'end': 875.467, 'text': "Let's check that out.", 'start': 874.746, 'duration': 0.721}, {'end': 877.189, 'text': "Now, we're not going to use keyframes this time.", 'start': 875.627, 'duration': 1.562}, {'end': 880.232, 'text': "I'm just going to use transitions and transforms.", 'start': 877.209, 'duration': 3.023}, {'end': 886.874, 'text': "So let's go to the alert element and decide on the beginning state.", 'start': 880.912, 'duration': 5.962}, {'end': 888.814, 'text': 'So let me click it here.', 'start': 887.334, 'duration': 1.48}], 'summary': 'Using transitions and transforms to animate alert components for a dynamic effect.', 'duration': 69.108, 'max_score': 819.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4819706.jpg'}, {'end': 986.52, 'src': 'embed', 'start': 951.621, 'weight': 3, 'content': [{'end': 959.003, 'text': "And let's say for our transform, you want to have it rotated down and scale it down to not too far.", 'start': 951.621, 'duration': 7.382}, {'end': 962.524, 'text': 'Uh, just like, you know, 50% down.', 'start': 959.023, 'duration': 3.501}, {'end': 966.425, 'text': "So now when we get it back to normal, it'll be kind of growing and stuff.", 'start': 962.744, 'duration': 3.681}, {'end': 967.765, 'text': "So let's get that done right here.", 'start': 966.445, 'duration': 1.32}, {'end': 975.387, 'text': "Let's do a transition and we'll say, um, all of the things translate over 500 milliseconds ease.", 'start': 967.785, 'duration': 7.602}, {'end': 986.52, 'text': 'is in out, and that should be good for now.', 'start': 979.598, 'duration': 6.922}], 'summary': 'Transform: rotate and scale down by 50%, then transition over 500ms ease in/out.', 'duration': 34.899, 'max_score': 951.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4951621.jpg'}, {'end': 1171.221, 'src': 'embed', 'start': 1142.395, 'weight': 5, 'content': [{'end': 1147.636, 'text': "That's really, that's a really big bounce, but we don't need to go back into that, um, situation edit.", 'start': 1142.395, 'duration': 5.241}, {'end': 1150.637, 'text': 'I can edit the curves here.', 'start': 1147.797, 'duration': 2.84}, {'end': 1154.178, 'text': '2.15 is probably the problem that could be just be like 1.5.', 'start': 1150.957, 'duration': 3.221}, {'end': 1155.218, 'text': "It doesn't need to be two point.", 'start': 1154.178, 'duration': 1.04}, {'end': 1156.439, 'text': 'There we go.', 'start': 1155.878, 'duration': 0.561}, {'end': 1158.199, 'text': 'A little bit nicer, a little bit softer.', 'start': 1156.459, 'duration': 1.74}, {'end': 1160.96, 'text': "Maybe that's even big 1.2.", 'start': 1158.979, 'duration': 1.981}, {'end': 1163.68, 'text': "It basically, if you go past one, you're going to get the bounce.", 'start': 1160.96, 'duration': 2.72}, {'end': 1171.221, 'text': 'Hmm 1.5.', 'start': 1165.02, 'duration': 6.201}], 'summary': 'Adjusting the curves to fix a bounce issue, reducing 2.15 to 1.5, aiming for smoother output.', 'duration': 28.826, 'max_score': 1142.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41142395.jpg'}, {'end': 1304.571, 'src': 'embed', 'start': 1273.877, 'weight': 4, 'content': [{'end': 1274.478, 'text': "Here's the thing.", 'start': 1273.877, 'duration': 0.601}, {'end': 1280.544, 'text': "I don't want this bell to be moving in while the whole block is doing that.", 'start': 1274.578, 'duration': 5.966}, {'end': 1281.465, 'text': 'I want it to wait.', 'start': 1280.604, 'duration': 0.861}, {'end': 1285.528, 'text': 'So what was the amount of time this takes? This takes 600 milliseconds.', 'start': 1281.625, 'duration': 3.903}, {'end': 1286.85, 'text': "Let's use that as a delay.", 'start': 1285.548, 'duration': 1.302}, {'end': 1288.872, 'text': "I think that should be, let's try it out.", 'start': 1286.87, 'duration': 2.002}, {'end': 1297.789, 'text': 'Okay I can, this thing lands, I can see the bell is really small and it comes in.', 'start': 1290.814, 'duration': 6.975}, {'end': 1304.571, 'text': "Let's do the same Bezier curve, copy and remove ease in out.", 'start': 1298.649, 'duration': 5.922}], 'summary': 'Delay bell movement by 600 milliseconds.', 'duration': 30.694, 'max_score': 1273.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41273877.jpg'}], 'start': 819.706, 'title': 'Animation effects', 'summary': 'Covers creating toggle class opacity animation and using transitions and transforms to animate elements, with a focus on three main components for the toggle class animation and quantifiable data for transitions and transforms including duration and delay.', 'chapters': [{'end': 863.555, 'start': 819.706, 'title': 'Toggle class opacity animation', 'summary': 'Discusses creating a toggle class to change the opacity of elements when clicked, identifying three main components for the animation.', 'duration': 43.849, 'highlights': ['Identifying three main components for the animation: the alert element (blue and black box), the icon (eye), and the text box (black background).', 'Creating a toggle class to change the opacity of elements when clicked.']}, {'end': 1297.789, 'start': 864.216, 'title': 'Animating elements with transitions and transforms', 'summary': 'Demonstrates the use of transitions and transforms to create an animation effect, including rotating, scaling, and translating elements with quantifiable data such as duration and delay.', 'duration': 433.573, 'highlights': ['The chapter demonstrates using transitions and transforms to animate elements, including rotating and scaling effects. The speaker explains the use of transitions and transforms to animate elements, such as rotating the alert element by 90 degrees and scaling it down by 50%, with a transition duration of 500 milliseconds.', "The speaker shows how to apply a delay of 600 milliseconds to the bell's animation, ensuring it waits for the completion of the main block animation. The speaker demonstrates applying a delay of 600 milliseconds to the bell's animation, ensuring it waits for the completion of the main block animation, maintaining synchronization.", 'The speaker adjusts the cubic Bezier curve to soften the bounce effect, experimenting with different values and demonstrating the impact on the animation. The speaker adjusts the cubic Bezier curve to soften the bounce effect, experimenting with different values such as 1.5 and 1.2 to achieve a smoother animation.']}], 'duration': 478.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG4819706.jpg', 'highlights': ['Identifying three main components for the animation: the alert element (blue and black box), the icon (eye), and the text box (black background).', 'Creating a toggle class to change the opacity of elements when clicked.', 'The chapter demonstrates using transitions and transforms to animate elements, including rotating and scaling effects.', 'Rotating the alert element by 90 degrees and scaling it down by 50%, with a transition duration of 500 milliseconds.', "Applying a delay of 600 milliseconds to the bell's animation, ensuring it waits for the completion of the main block animation.", 'Adjusting the cubic Bezier curve to soften the bounce effect, experimenting with different values such as 1.5 and 1.2 to achieve a smoother animation.']}, {'end': 1622.081, 'segs': [{'end': 1456.45, 'src': 'embed', 'start': 1298.649, 'weight': 0, 'content': [{'end': 1304.571, 'text': "Let's do the same Bezier curve, copy and remove ease in out.", 'start': 1298.649, 'duration': 5.922}, {'end': 1314.914, 'text': 'And then also another thing I want to do is, uh, opacity, good old opacity.', 'start': 1305.611, 'duration': 9.303}, {'end': 1326.342, 'text': 'No, one, one right here and zero there.', 'start': 1324.241, 'duration': 2.101}, {'end': 1328.803, 'text': "Okay Let's try that.", 'start': 1326.362, 'duration': 2.441}, {'end': 1331.744, 'text': "That's nice.", 'start': 1328.823, 'duration': 2.921}, {'end': 1342.148, 'text': 'This should be not as, this should be like maybe 4.5.', 'start': 1334.865, 'duration': 7.283}, {'end': 1343.348, 'text': 'Coming along nicely.', 'start': 1342.148, 'duration': 1.2}, {'end': 1345.849, 'text': 'You clicked them already.', 'start': 1345.089, 'duration': 0.76}, {'end': 1349.09, 'text': 'The last thing I want to do is kind of control this black bar.', 'start': 1346.009, 'duration': 3.081}, {'end': 1354.402, 'text': "Should I have it slide out or fold out? Let's do like a flip out.", 'start': 1349.15, 'duration': 5.252}, {'end': 1357.703, 'text': "Okay, so what are you called? You're called text.", 'start': 1354.942, 'duration': 2.761}, {'end': 1368.407, 'text': "Let's set the before, and it'd be something similar to these, right? Not scale, not translate either.", 'start': 1358.463, 'duration': 9.944}, {'end': 1369.268, 'text': 'Okay, nothing here.', 'start': 1368.488, 'duration': 0.78}, {'end': 1377.371, 'text': 'We want rotate Y, which is flip out this way, and just say 90 degrees, so it should be coming right at you.', 'start': 1369.888, 'duration': 7.483}, {'end': 1381.453, 'text': 'Transform 90 degrees, rotate Y, yes.', 'start': 1378.472, 'duration': 2.981}, {'end': 1388.739, 'text': "And then in active, we'll make a text right here.", 'start': 1382.233, 'duration': 6.506}, {'end': 1392.982, 'text': "We'll say rotate y 0 degrees.", 'start': 1389.6, 'duration': 3.382}, {'end': 1395.425, 'text': "Let's see what that looks like.", 'start': 1394.424, 'duration': 1.001}, {'end': 1398.988, 'text': "Something didn't happen.", 'start': 1398.187, 'duration': 0.801}, {'end': 1407.195, 'text': 'Oh, probably the transition was not there at all.', 'start': 1402.19, 'duration': 5.005}, {'end': 1412.275, 'text': 'Okay, so what we want to do is all pretty much the same thing.', 'start': 1408.874, 'duration': 3.401}, {'end': 1417.537, 'text': "You could say transform, because there's only one thing happening.", 'start': 1412.615, 'duration': 4.922}, {'end': 1420.858, 'text': '400 is fine, cubic bezier.', 'start': 1418.397, 'duration': 2.461}, {'end': 1432.663, 'text': 'And then the weight should be the, what is it, 4.5 plus 4 seconds, so 8.5.', 'start': 1422.179, 'duration': 10.484}, {'end': 1436.286, 'text': "Let's just say, let's just say eight, 800 milliseconds.", 'start': 1432.663, 'duration': 3.623}, {'end': 1438.368, 'text': 'All right, now it should delay.', 'start': 1436.866, 'duration': 1.502}, {'end': 1440.549, 'text': 'After the bell comes in, it should come in.', 'start': 1438.508, 'duration': 2.041}, {'end': 1442.411, 'text': 'The black text should swing out.', 'start': 1440.869, 'duration': 1.542}, {'end': 1451.738, 'text': "Okay, so what we're seeing here is it is rotated towards us in z space.", 'start': 1445.013, 'duration': 6.725}, {'end': 1455.448, 'text': 'But it was delayed a little bit.', 'start': 1452.523, 'duration': 2.925}, {'end': 1456.45, 'text': "We'll say nine.", 'start': 1455.769, 'duration': 0.681}], 'summary': 'Adjusting bezier curve, opacity, and rotation for visual effects with a delay of 800 milliseconds.', 'duration': 157.801, 'max_score': 1298.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41298649.jpg'}, {'end': 1622.081, 'src': 'embed', 'start': 1527.436, 'weight': 4, 'content': [{'end': 1533.362, 'text': "do the old opacity trick to get rid of this thing and then, when it's ready, bring it in.", 'start': 1527.436, 'duration': 5.926}, {'end': 1542.132, 'text': "oh that, that's not what i wanted, guys.", 'start': 1533.362, 'duration': 8.77}, {'end': 1549.807, 'text': 'Why is that not working? Is active.', 'start': 1548.106, 'duration': 1.701}, {'end': 1554.351, 'text': 'Opacity Oh, because I did the transition on transform only.', 'start': 1550.308, 'duration': 4.043}, {'end': 1558.554, 'text': "So if you do it on all, it'll have to all of the elements doing the same kind of weight.", 'start': 1554.611, 'duration': 3.943}, {'end': 1562.137, 'text': 'So now it should be like, there we go.', 'start': 1559.415, 'duration': 2.722}, {'end': 1566.24, 'text': "Let's wait a little bit longer, a whole second.", 'start': 1562.177, 'duration': 4.063}, {'end': 1571.965, 'text': 'And transition should take a little bit longer too, five milliseconds.', 'start': 1567.581, 'duration': 4.384}, {'end': 1576.128, 'text': "Let's click on Bill's face.", 'start': 1574.507, 'duration': 1.621}, {'end': 1578.786, 'text': 'All right.', 'start': 1578.286, 'duration': 0.5}, {'end': 1581.367, 'text': 'Maybe that Bezier is a little bit too aggressive.', 'start': 1579.407, 'duration': 1.96}, {'end': 1585.209, 'text': "Let's just do a quick old ease, just a little linear.", 'start': 1581.388, 'duration': 3.821}, {'end': 1603.538, 'text': 'Nice You clicked a Murray.', 'start': 1590.492, 'duration': 13.046}, {'end': 1605.439, 'text': 'You did it.', 'start': 1604.778, 'duration': 0.661}, {'end': 1607.24, 'text': 'You clicked a Murray, guys.', 'start': 1605.539, 'duration': 1.701}, {'end': 1607.94, 'text': "I'm going to click a Murray.", 'start': 1607.26, 'duration': 0.68}, {'end': 1615.557, 'text': "Okay, so there's a lot that you could do right here to dial in the speed a little bit more, but we're running out of time,", 'start': 1610.313, 'duration': 5.244}, {'end': 1616.717, 'text': "so we're just gonna continue on.", 'start': 1615.557, 'duration': 1.16}, {'end': 1618.078, 'text': 'So this is the last one.', 'start': 1616.978, 'duration': 1.1}, {'end': 1620.04, 'text': "We got it, we're gonna do this, let's do this.", 'start': 1618.098, 'duration': 1.942}, {'end': 1621.221, 'text': 'I hope you guys are still with me.', 'start': 1620.12, 'duration': 1.101}, {'end': 1622.081, 'text': 'All right.', 'start': 1621.801, 'duration': 0.28}], 'summary': 'Adjusting transition settings for elements, testing click interactions, and addressing time constraints in web development.', 'duration': 94.645, 'max_score': 1527.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41527436.jpg'}], 'start': 1298.649, 'title': 'Animation techniques', 'summary': 'Covers animating text, controlling a black bar, and using css transform origin to address challenges, with transition durations of 800 milliseconds and 5 milliseconds, and a focus on speed adjustment, encouraging continued engagement.', 'chapters': [{'end': 1456.45, 'start': 1298.649, 'title': 'Animating text and black bar', 'summary': 'Explores the process of animating text and controlling a black bar, including adjusting opacity and applying a flip-out effect, with a transition duration of 800 milliseconds and a delay of 9 seconds.', 'duration': 157.801, 'highlights': ['Applying a flip-out effect to the text using a 90-degree rotation on the Y-axis The text is animated by applying a flip-out effect through a 90-degree rotation on the Y-axis.', 'Setting the transition duration to 800 milliseconds and adding a delay of 9 seconds The transition duration is set to 800 milliseconds, and a delay of 9 seconds is added for the animated black bar.', 'Adjusting the opacity of the text from 1 to 0 The opacity of the text is adjusted from 1 to 0, contributing to the visual animation.']}, {'end': 1562.137, 'start': 1457.652, 'title': 'Css transform origin practice', 'summary': 'Demonstrates using css transform origin to control the position of an element, encountering challenges and correcting the issues, while also applying opacity transitions, all while explaining the process to the audience.', 'duration': 104.485, 'highlights': ["The speaker demonstrates using CSS transform origin to position an element, such as 'center right', in real-time, providing a practical example of the concept.", 'The speaker encounters and corrects issues with the positioning of the element, such as attaching it to the wrong object and addressing the timing of its appearance, showcasing problem-solving skills in real-time.', "The speaker explains the need to apply the 'opacity trick' to manage the appearance of the element, followed by correcting the transition issue by applying it to all elements, demonstrating an understanding of CSS transitions and their application."]}, {'end': 1622.081, 'start': 1562.177, 'title': 'Animation speed adjustment', 'summary': 'Discusses adjusting transition and click speed in animations, with a transition duration of 5 milliseconds and a focus on speed adjustment. the speaker acknowledges time constraints and encourages continued engagement.', 'duration': 59.904, 'highlights': ['The transition should take a little bit longer too, five milliseconds. (Transition duration: 5 milliseconds)', "There's a lot that you could do right here to dial in the speed a little bit more. (Encouraging further speed adjustment)", 'The speaker acknowledges time constraints and encourages continued engagement. (Acknowledgment of time constraints and encouragement)']}], 'duration': 323.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41298649.jpg', 'highlights': ['Applying a flip-out effect to the text using a 90-degree rotation on the Y-axis', 'Setting the transition duration to 800 milliseconds and adding a delay of 9 seconds', 'The opacity of the text is adjusted from 1 to 0, contributing to the visual animation', "The speaker demonstrates using CSS transform origin to position an element, such as 'center right', in real-time", "The speaker explains the need to apply the 'opacity trick' to manage the appearance of the element", 'The transition should take a little bit longer too, five milliseconds', "There's a lot that you could do right here to dial in the speed a little bit more", 'The speaker acknowledges time constraints and encourages continued engagement']}, {'end': 1960.431, 'segs': [{'end': 1673.411, 'src': 'heatmap', 'start': 1622.081, 'weight': 0.725, 'content': [{'end': 1633.349, 'text': "what happens here is when I click on Bill Murray's head, like a thank you notice or a modal, pops up and it says thanks for clicking on this.", 'start': 1622.081, 'duration': 11.268}, {'end': 1635.51, 'text': 'Bill Murray loves you too, and keep on hacking.', 'start': 1633.429, 'duration': 2.081}, {'end': 1639.773, 'text': 'um and the way that this kind of works is.', 'start': 1636.571, 'duration': 3.202}, {'end': 1645.435, 'text': 'the javascript says okay, when you click on this thing, you know, add an is active to the overlay,', 'start': 1639.773, 'duration': 5.662}, {'end': 1651.298, 'text': "which is the black like dark screen around it and which contains the what's in it.", 'start': 1645.435, 'duration': 5.863}, {'end': 1656.561, 'text': "so obviously it would show up too if you hook what's in it to the active class of the overlay.", 'start': 1651.298, 'duration': 5.263}, {'end': 1658.502, 'text': 'And then wait for a bit.', 'start': 1657.161, 'duration': 1.341}, {'end': 1663.946, 'text': 'We set a timeout function for five seconds and then say, take that overlay and remove the class is active.', 'start': 1658.542, 'duration': 5.404}, {'end': 1668.048, 'text': 'So the reason it goes away is a timer in JavaScript.', 'start': 1664.006, 'duration': 4.042}, {'end': 1669.849, 'text': "It's not with CSS or anything else.", 'start': 1668.088, 'duration': 1.761}, {'end': 1673.411, 'text': 'And the reason I did that is so you can quickly just try it again and again.', 'start': 1669.869, 'duration': 3.542}], 'summary': "Clicking on bill murray's head triggers a thank you notice, with a 5-second delay before it disappears.", 'duration': 51.33, 'max_score': 1622.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41622081.jpg'}, {'end': 1783.064, 'src': 'embed', 'start': 1717.121, 'weight': 0, 'content': [{'end': 1724.565, 'text': "And, you know, because we have our JavaScript timer for five seconds, we'll just say the whole thing lasts five seconds.", 'start': 1717.121, 'duration': 7.444}, {'end': 1735.331, 'text': "And it's gonna use an ease in out timing function, and it's gonna be forwards.", 'start': 1725.506, 'duration': 9.825}, {'end': 1742.733, 'text': "I don't think that necessarily matters if the JavaScript is removing it, but we're going to do that anyway.", 'start': 1737.651, 'duration': 5.082}, {'end': 1743.893, 'text': 'Four words.', 'start': 1743.393, 'duration': 0.5}, {'end': 1747.874, 'text': 'Okay, and that should be good.', 'start': 1744.113, 'duration': 3.761}, {'end': 1749.815, 'text': "Let's write the keyframes.", 'start': 1748.895, 'duration': 0.92}, {'end': 1758.978, 'text': 'At keyframes, what do I call it? Overlay, capital Anim.', 'start': 1750.795, 'duration': 8.183}, {'end': 1759.998, 'text': 'There we are.', 'start': 1759.578, 'duration': 0.42}, {'end': 1764.38, 'text': 'And in these keyframes, this is going to be pretty simple.', 'start': 1760.939, 'duration': 3.441}, {'end': 1766.755, 'text': 'We need to do two things.', 'start': 1765.734, 'duration': 1.021}, {'end': 1770.037, 'text': 'We need to fade in the dark background, which is the overlay.', 'start': 1766.795, 'duration': 3.242}, {'end': 1773.018, 'text': 'And we also need to fade it out again.', 'start': 1770.457, 'duration': 2.561}, {'end': 1776.56, 'text': "So it's really simple.", 'start': 1774.939, 'duration': 1.621}, {'end': 1780.763, 'text': 'We want to fade in at 0% and out at 100%.', 'start': 1776.741, 'duration': 4.022}, {'end': 1783.064, 'text': 'This is going to be basically the same thing.', 'start': 1780.763, 'duration': 2.301}], 'summary': 'Creating a javascript animation lasting 5 seconds with ease in out timing function and forwards motion.', 'duration': 65.943, 'max_score': 1717.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41717121.jpg'}, {'end': 1859.722, 'src': 'heatmap', 'start': 1835.166, 'weight': 0.707, 'content': [{'end': 1844.252, 'text': 'If I do 50% and I click it and you see how this fade in happens over the course of five seconds.', 'start': 1835.166, 'duration': 9.086}, {'end': 1849.375, 'text': 'but the the high point when it reaches that three percent is at that three.', 'start': 1844.252, 'duration': 5.123}, {'end': 1852.897, 'text': 'that thirty percent of opacity is at fifty percent.', 'start': 1849.375, 'duration': 3.522}, {'end': 1853.698, 'text': "but that's not what i want.", 'start': 1852.897, 'duration': 0.801}, {'end': 1858.641, 'text': 'i want to have it at like fifteen percent and the other side of fifteen percent, close to 100, is 85.', 'start': 1853.698, 'duration': 4.943}, {'end': 1859.722, 'text': 'so we have 15 away from 185 percent.', 'start': 1858.641, 'duration': 1.081}], 'summary': 'Adjust opacity from 15% to 85% over 5 seconds', 'duration': 24.556, 'max_score': 1835.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41835166.jpg'}], 'start': 1622.081, 'title': 'Javascript animation', 'summary': 'Explains creating animations using javascript, including adding classes, setting timeouts, and using keyframes to create fading effects, with a focus on a 5-second duration.', 'chapters': [{'end': 1960.431, 'start': 1622.081, 'title': 'Javascript animation tutorial', 'summary': 'Explains creating animations using javascript, including adding classes, setting timeouts, and using keyframes to create fading effects, with a focus on a 5-second duration.', 'duration': 338.35, 'highlights': ['Creating a JavaScript animation with a 5-second duration The tutorial emphasizes creating animations with a 5-second duration, utilizing JavaScript to add classes, set timeouts, and use keyframes for fading effects.', 'Explanation of adding classes and setting timeouts in JavaScript The chapter details the process of adding classes using JavaScript and setting a timeout function for five seconds to remove the class, enabling repeated animation.', 'Utilizing keyframes to create fading effects Keyframes are used to create fading effects in the animation, with a focus on fading in and out the dark background and the modal, both lasting for five seconds.']}], 'duration': 338.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41622081.jpg', 'highlights': ['Creating a JavaScript animation with a 5-second duration The tutorial emphasizes creating animations with a 5-second duration, utilizing JavaScript to add classes, set timeouts, and use keyframes for fading effects.', 'Utilizing keyframes to create fading effects Keyframes are used to create fading effects in the animation, with a focus on fading in and out the dark background and the modal, both lasting for five seconds.', 'Explanation of adding classes and setting timeouts in JavaScript The chapter details the process of adding classes using JavaScript and setting a timeout function for five seconds to remove the class, enabling repeated animation.']}, {'end': 2349.041, 'segs': [{'end': 2001.24, 'src': 'heatmap', 'start': 1968.699, 'weight': 0.77, 'content': [{'end': 1980.575, 'text': 'Yeah, and then here in the 15 to 85%, it should be at 0%.', 'start': 1968.699, 'duration': 11.876}, {'end': 1980.975, 'text': "Let's do that.", 'start': 1980.575, 'duration': 0.4}, {'end': 1982.456, 'text': 'So basically, it should scoot in.', 'start': 1981.235, 'duration': 1.221}, {'end': 1984.056, 'text': 'There we are, scooting in.', 'start': 1983.076, 'duration': 0.98}, {'end': 1985.076, 'text': 'Hey, Bill.', 'start': 1984.616, 'duration': 0.46}, {'end': 1987.517, 'text': "What's up? See you, Bill.", 'start': 1985.716, 'duration': 1.801}, {'end': 1988.557, 'text': 'Scoots out.', 'start': 1988.037, 'duration': 0.52}, {'end': 1991.218, 'text': "Perfect That's exactly what I thought would happen.", 'start': 1989.117, 'duration': 2.101}, {'end': 1994.699, 'text': 'We can also do a rotate.', 'start': 1993.098, 'duration': 1.601}, {'end': 1997.259, 'text': "So he's going to flip in.", 'start': 1995.939, 'duration': 1.32}, {'end': 2001.24, 'text': 'How about that? 90 degrees.', 'start': 1997.8, 'duration': 3.44}], 'summary': 'Transcript involves adjustments in percentages and rotations, including 90 degrees.', 'duration': 32.541, 'max_score': 1968.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41968699.jpg'}, {'end': 2218.685, 'src': 'heatmap', 'start': 2184.563, 'weight': 1, 'content': [{'end': 2199.867, 'text': "so come in with a bounce, settle, wind up and leave, and That's brilliant.", 'start': 2184.563, 'duration': 15.304}, {'end': 2201.789, 'text': 'That is brilliant.', 'start': 2200.768, 'duration': 1.021}, {'end': 2202.329, 'text': 'I love it.', 'start': 2201.849, 'duration': 0.48}, {'end': 2203.11, 'text': "Let's review.", 'start': 2202.369, 'duration': 0.741}, {'end': 2203.791, 'text': "Let's review.", 'start': 2203.27, 'duration': 0.521}, {'end': 2209.016, 'text': "Let's go up to the top and make these things display so we can check out our work.", 'start': 2203.831, 'duration': 5.185}, {'end': 2213.4, 'text': "OK The first thing was that we're going to make this notification bar bounce in.", 'start': 2209.156, 'duration': 4.244}, {'end': 2214.621, 'text': 'I like it.', 'start': 2213.42, 'duration': 1.201}, {'end': 2215.522, 'text': 'It could be a little faster.', 'start': 2214.641, 'duration': 0.881}, {'end': 2218.685, 'text': "So the thing with animation is you don't want to make things too fast.", 'start': 2216.263, 'duration': 2.422}], 'summary': 'Reviewing animation adjustments for notification bar bounce-in speed.', 'duration': 14.854, 'max_score': 2184.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG42184563.jpg'}, {'end': 2273.118, 'src': 'embed', 'start': 2243.175, 'weight': 0, 'content': [{'end': 2248.199, 'text': "But that's going to come down to you and figuring it out what's the best for your application.", 'start': 2243.175, 'duration': 5.024}, {'end': 2251.14, 'text': 'But there is a lot of studies done.', 'start': 2248.719, 'duration': 2.421}, {'end': 2259.085, 'text': "And the prime time for things to happen where people don't get impatient but they're still interested is in 250 milliseconds to 400 milliseconds.", 'start': 2251.461, 'duration': 7.624}, {'end': 2265.531, 'text': "So I usually just go for a 300 millisecond animation and that's usually good.", 'start': 2261.847, 'duration': 3.684}, {'end': 2273.118, 'text': "But like things where, you know, like here where they're like folding out in front of us, there's like some complexity, there's like steps to it.", 'start': 2265.951, 'duration': 7.167}], 'summary': 'Optimal animation time is 250-400 milliseconds; 300ms usually works well.', 'duration': 29.943, 'max_score': 2243.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG42243175.jpg'}, {'end': 2336.557, 'src': 'embed', 'start': 2315.646, 'weight': 2, 'content': [{'end': 2329.934, 'text': 'who have seen enough value from it and believe that this channel brings enough benefit to everyone who watches it in this community that they elected to offer an amount of money of their choosing to each episode that i produce.', 'start': 2315.646, 'duration': 14.288}, {'end': 2333.336, 'text': 'now. the most common amount is just four dollars per episode.', 'start': 2329.934, 'duration': 3.402}, {'end': 2334.756, 'text': 'Patrons get early videos.', 'start': 2333.476, 'duration': 1.28}, {'end': 2336.557, 'text': "There's a patrons Slack channel.", 'start': 2334.776, 'duration': 1.781}], 'summary': 'Viewers contribute an average of $4 per episode, gaining early access and access to a slack channel.', 'duration': 20.911, 'max_score': 2315.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG42315646.jpg'}], 'start': 1961.112, 'title': 'Enhancing user experience with animation', 'summary': 'Discusses animating elements using translate, rotate, and opacity, emphasizing the importance of animation speed for user experience, recommending a prime time of 250-400 milliseconds, and the use of animation to improve user experience on websites with the support of patrons averaging four dollars per episode.', 'chapters': [{'end': 2203.791, 'start': 1961.112, 'title': 'Animating elements with transforms and opacity', 'summary': 'Demonstrates how to animate elements using translate, rotate, and opacity, with specific percentages and degrees, resulting in a visually appealing bounce effect and journey for the elements.', 'duration': 242.679, 'highlights': ['The elements are animated using translate, rotate, and opacity, with specific percentages and degrees, resulting in a visually appealing bounce effect and journey for the elements.', 'The translate X is set to -200% and then moves to 0%, resulting in the element scooting in and out.', 'Rotation of the elements is demonstrated with a 90-degree flip and a -90 rotation, creating a visual flip in and out effect for the elements.', 'The opacity of the elements transitions from 0 to 1 at 15% and from 1 to 0 at 85%, creating a smooth fade in and out effect.', 'The elements are manipulated to come in from the left and leave from the right, creating a journey effect for the elements.', 'A bouncy inertia effect is achieved by overcompensating the translate and rotate by 5% and 4 degrees, resulting in a visually appealing bounce in and out effect for the elements.']}, {'end': 2285.396, 'start': 2203.831, 'title': 'Animation speed and user experience', 'summary': 'Discusses the importance of animation speed for user experience, recommending a prime time of 250-400 milliseconds and emphasizing the balance between speed and visibility.', 'duration': 81.565, 'highlights': ["The prime time for things to happen where people don't get impatient but they're still interested is in 250 milliseconds to 400 milliseconds, making a 300 millisecond animation usually effective.", 'The chapter emphasizes the balance between animation speed and visibility, cautioning against making animations too fast or too slow to ensure a positive user experience.', 'The speaker recommends a 300 millisecond animation duration for optimal user experience, considering the balance between speed and visibility in animations.']}, {'end': 2349.041, 'start': 2285.396, 'title': 'Enhancing user experience with animation', 'summary': 'Discusses the use of animation to improve user experience on websites, including timers, loaders, spinners, and the concept of patrons supporting the channel with an average of four dollars per episode.', 'duration': 63.645, 'highlights': ['Patrons support the channel with an average of four dollars per episode, receiving early videos, access to a Slack channel, community hangouts, and podcasts.', 'The chapter explores using animation such as timers, loaders, spinners to indicate website activity and improve user experience.', "Patrons are individuals who find value in the channel's content and contribute to its production, creating a supportive community for everyone."]}], 'duration': 387.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evaN55xnXG4/pics/evaN55xnXG41961112.jpg', 'highlights': ["The prime time for things to happen where people don't get impatient but they're still interested is in 250 milliseconds to 400 milliseconds, making a 300 millisecond animation usually effective.", 'The elements are animated using translate, rotate, and opacity, with specific percentages and degrees, resulting in a visually appealing bounce effect and journey for the elements.', 'Patrons support the channel with an average of four dollars per episode, receiving early videos, access to a Slack channel, community hangouts, and podcasts.']}], 'highlights': ['The chapter covers introducing new items to the page using animations, specifically focusing on notifications, alerts, and modals.', 'An Instagram-like bottom bar with notifications is demonstrated, showing nine views, four comments, and six new followers to bring delight and interest to the user.', 'The code for the video will be available in CodePen, allowing viewers to access and review the code live.', 'Understanding and applying the laws of animation is crucial for creating realistic and engaging digital content.', 'The chapter demonstrates creating a realistic bounce effect using CSS code, including transforming, scaling, translating, and rotating elements.', 'Identifying three main components for the animation: the alert element (blue and black box), the icon (eye), and the text box (black background).', 'Creating a toggle class to change the opacity of elements when clicked.', 'Applying a flip-out effect to the text using a 90-degree rotation on the Y-axis', 'Creating a JavaScript animation with a 5-second duration The tutorial emphasizes creating animations with a 5-second duration, utilizing JavaScript to add classes, set timeouts, and use keyframes for fading effects.', "The prime time for things to happen where people don't get impatient but they're still interested is in 250 milliseconds to 400 milliseconds, making a 300 millisecond animation usually effective.", 'Patrons support the channel with an average of four dollars per episode, receiving early videos, access to a Slack channel, community hangouts, and podcasts.']}