title
Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences

description
#adobexd #adobemax #ui Today's Question: For UI Animations in production, do you use just CSS or a CSS/JS library of sorts? https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free! -- With Adobe XD's massive update a couple days ago, we now have the ability to create simple and complex animations for our prototypes. In this Adobe XD tutorial, we're going to break down exactly how to use auto-animate along with delay to create impressive animations. Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences', 'heatmap': [{'end': 746.108, 'start': 684.073, 'weight': 0.834}, {'end': 1004.802, 'start': 960.052, 'weight': 0.862}], 'summary': "Learn to create complex sequence animations with adobe xd, covering auto-animate feature, css for ui animation, 'photo splash' plugin, graphic design setup, x shape design, animating menu items, and ui animation techniques. sponsored by skillshare.com, offering thousands of classes for $10 a month, with the first two months free for the first 200 students.", 'chapters': [{'end': 40.985, 'segs': [{'end': 40.985, 'src': 'embed', 'start': 0.45, 'weight': 0, 'content': [{'end': 5.044, 'text': "Today you're going to learn how to create complex sequence animations with Adobe Experience Design.", 'start': 0.45, 'duration': 4.594}, {'end': 16.024, 'text': "Oh and hey, I'd like to point out this video's awesome sponsor, Skillshare.com, which offers thousands of classes in design, coding,", 'start': 8.077, 'duration': 7.947}, {'end': 16.905, 'text': 'business and more.', 'start': 16.024, 'duration': 0.881}, {'end': 22.83, 'text': "For instance, you're about to watch this quick video on Adobe XD, but you could watch this full XD course at Skillshare.", 'start': 17.106, 'duration': 5.724}, {'end': 31.017, 'text': "Now Skillshare is just 10 bucks a month, but if you're the first 200 students to use my very exclusive link below in the description here on YouTube,", 'start': 23.111, 'duration': 7.906}, {'end': 32.679, 'text': 'then you get the first two months free.', 'start': 31.017, 'duration': 1.662}, {'end': 34.24, 'text': "All right, so let's get started.", 'start': 32.919, 'duration': 1.321}, {'end': 36.682, 'text': 'Hey everyone, Gary Simon of Corsetro.', 'start': 34.56, 'duration': 2.122}, {'end': 40.985, 'text': "So it's been a massive week for Adobe and Adobe experience design in particular.", 'start': 36.782, 'duration': 4.203}], 'summary': 'Learn complex sequence animations using adobe xd. skillshare offers xd course for $10/month. first 200 students get 2 months free.', 'duration': 40.535, 'max_score': 0.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0450.jpg'}], 'start': 0.45, 'title': 'Creating sequence animations with adobe xd', 'summary': 'Introduces creating complex sequence animations with adobe xd, highlighting adobe experience design as a key topic. sponsored by skillshare.com, offering thousands of classes for $10 a month, with the first two months free for the first 200 students.', 'chapters': [{'end': 40.985, 'start': 0.45, 'title': 'Creating sequence animations with adobe xd', 'summary': 'Introduces creating complex sequence animations with adobe xd, sponsored by skillshare.com, offering thousands of classes for $10 a month, with the first two months free for the first 200 students. adobe experience design is highlighted as a key topic.', 'duration': 40.535, 'highlights': ['Adobe Experience Design is highlighted as a key topic.', 'Skillshare.com offers thousands of classes for $10 a month.', 'The first two months are free for the first 200 students.']}], 'duration': 40.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0450.jpg', 'highlights': ['Adobe Experience Design is highlighted as a key topic.', 'Skillshare.com offers thousands of classes for $10 a month.', 'The first two months are free for the first 200 students.']}, {'end': 238.303, 'segs': [{'end': 64.444, 'src': 'embed', 'start': 41.426, 'weight': 0, 'content': [{'end': 49.372, 'text': "And I've had some time to really play around with the new features, specifically auto animate for animating your prototypes.", 'start': 41.426, 'duration': 7.946}, {'end': 54.276, 'text': "Initially, when I saw it and realized how simple it was, I thought that, well, it's kind of simple.", 'start': 50.293, 'duration': 3.983}, {'end': 62.723, 'text': "It's going to be You know, you're going to be confined to very simple animations and you know, you won't be able to do anything too cool with it.", 'start': 54.336, 'duration': 8.387}, {'end': 64.444, 'text': 'But then I realized you really can.', 'start': 62.763, 'duration': 1.681}], 'summary': 'New auto animate feature allows for complex animations in prototypes.', 'duration': 23.018, 'max_score': 41.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc041426.jpg'}, {'end': 175.816, 'src': 'embed', 'start': 135.396, 'weight': 3, 'content': [{'end': 138.519, 'text': "And so I'm going to show you exactly how we create this right here.", 'start': 135.396, 'duration': 3.123}, {'end': 139.399, 'text': 'All right.', 'start': 139.079, 'duration': 0.32}, {'end': 143.822, 'text': "so for today's question what do you use for animating your UIs??", 'start': 139.399, 'duration': 4.423}, {'end': 145.343, 'text': 'Straight up CSS.', 'start': 144.082, 'duration': 1.261}, {'end': 150.187, 'text': 'or perhaps you use some sort of CSS or a JavaScript based animation library?', 'start': 145.343, 'duration': 4.844}, {'end': 152.628, 'text': "Let me know in the comments and let's get started.", 'start': 150.227, 'duration': 2.401}, {'end': 156.491, 'text': 'All right, so I have a brand new artboard open here.', 'start': 153.389, 'duration': 3.102}, {'end': 161.534, 'text': 'I just click on the default iPhone 678 sort of artboard.', 'start': 156.511, 'duration': 5.023}, {'end': 168.079, 'text': "I'm just going to make it a little bit larger and also copy the height so that we can have the viewport height equal the same.", 'start': 161.554, 'duration': 6.525}, {'end': 168.872, 'text': 'All right.', 'start': 168.632, 'duration': 0.24}, {'end': 175.816, 'text': "So I'm not going to really spend a lot of time on the actual UI itself because I want to demonstrate and show how to use the features themselves.", 'start': 169.192, 'duration': 6.624}], 'summary': 'Demonstrating ui animation using css, no time for ui design.', 'duration': 40.42, 'max_score': 135.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0135396.jpg'}, {'end': 238.303, 'src': 'embed', 'start': 197.248, 'weight': 4, 'content': [{'end': 201.15, 'text': "we'll see that we have plugins here and we have one called photo splash.", 'start': 197.248, 'duration': 3.902}, {'end': 203.311, 'text': "so if you don't currently have this installed,", 'start': 201.15, 'duration': 2.161}, {'end': 210.735, 'text': 'you just go to discover plugins and then you just type in photo splash right here and then click install.', 'start': 203.311, 'duration': 7.424}, {'end': 213.316, 'text': "after that you don't even have to reload at all.", 'start': 210.735, 'duration': 2.581}, {'end': 220.119, 'text': 'all you have to do is go to plugins with that selected, make sure you have that that rectangle selected and go to photo splash right here.', 'start': 213.316, 'duration': 6.803}, {'end': 222.135, 'text': 'All right.', 'start': 221.755, 'duration': 0.38}, {'end': 229.739, 'text': 'so the way this is set up is you have two options here on the side just random photos.', 'start': 222.135, 'duration': 7.604}, {'end': 235.242, 'text': "Every time you click it, it's gonna generate a random photo or you can search for specific photos right here.", 'start': 230.519, 'duration': 4.723}, {'end': 238.303, 'text': "In our context, it doesn't even really matter.", 'start': 236.142, 'duration': 2.161}], 'summary': 'Demonstration of installing and using photo splash plugin for image editing.', 'duration': 41.055, 'max_score': 197.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0197248.jpg'}], 'start': 41.426, 'title': 'Ui animation tools and plugins', 'summary': "Covers adobe xd's auto animate feature for intricate prototypes, css for ui animation, and the installation and usage of the 'photo splash' plugin, offering options for image generation.", 'chapters': [{'end': 134.895, 'start': 41.426, 'title': 'Adobe xd auto animate feature', 'summary': 'Highlights the new auto animate feature in adobe xd, showcasing how it allows for creating intricate animations in prototypes, which is a massive step forward in envisioning app interactions.', 'duration': 93.469, 'highlights': ['The auto animate feature in Adobe XD allows for creating intricate animations in prototypes, exemplified by a cascading sequence animation and slick transitions, showcasing its capability to envision app interactions based on user input.', 'The ease of creating prototypes with the auto animate feature in Adobe XD is emphasized, as it provides a seamless way to envision app responses, which is seen as a massive step forward in app development.', 'The speaker initially underestimated the capability of the auto animate feature in Adobe XD, but upon experimentation, realized its potential for creating sophisticated animations, providing a firsthand account of its versatility.']}, {'end': 196.088, 'start': 135.396, 'title': 'Animating uis with css', 'summary': 'Discusses creating and animating uis using css, with a brief demonstration of using the features in adobe xd and a mention of the new plugins feature.', 'duration': 60.692, 'highlights': ['The chapter demonstrates creating and animating UIs using CSS in Adobe XD, with a focus on features and plugins.', 'The speaker mentions using the default iPhone 678 artboard and resizing it for the viewport.', 'There is a brief mention of using the rectangle tool to draw out the same size as the artboard.']}, {'end': 238.303, 'start': 197.248, 'title': 'Installing and using photo splash plugin', 'summary': "Explains how to install and use the 'photo splash' plugin in the software, where users can install the plugin from the 'discover plugins' section, and it provides two options for generating photos, either randomly or through specific searches.", 'duration': 41.055, 'highlights': ["Users can install the 'Photo Splash' plugin from the 'Discover plugins' section by searching for 'photo splash' and clicking install.", "The 'Photo Splash' plugin provides two options for generating photos: random photos and specific photo searches.", "No need to reload after installing the 'Photo Splash' plugin."]}], 'duration': 196.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc041426.jpg', 'highlights': ['The auto animate feature in Adobe XD allows for creating intricate animations in prototypes, exemplified by a cascading sequence animation and slick transitions, showcasing its capability to envision app interactions based on user input.', 'The ease of creating prototypes with the auto animate feature in Adobe XD is emphasized, as it provides a seamless way to envision app responses, which is seen as a massive step forward in app development.', 'The speaker initially underestimated the capability of the auto animate feature in Adobe XD, but upon experimentation, realized its potential for creating sophisticated animations, providing a firsthand account of its versatility.', 'The chapter demonstrates creating and animating UIs using CSS in Adobe XD, with a focus on features and plugins.', "Users can install the 'Photo Splash' plugin from the 'Discover plugins' section by searching for 'photo splash' and clicking install.", "The 'Photo Splash' plugin provides two options for generating photos: random photos and specific photo searches.", 'The speaker mentions using the default iPhone 678 artboard and resizing it for the viewport.']}, {'end': 537.084, 'segs': [{'end': 360.582, 'src': 'embed', 'start': 289.246, 'weight': 0, 'content': [{'end': 291.806, 'text': "Something that's just kind of gray, but a watermark type of background.", 'start': 289.246, 'duration': 2.56}, {'end': 297.208, 'text': "Real quickly, I'll just put in a sort of watermark logo.", 'start': 292.707, 'duration': 4.501}, {'end': 299.509, 'text': "I'm going to use white for the color.", 'start': 297.528, 'duration': 1.981}, {'end': 302.61, 'text': "We'll use Montserrat for the font and make it bold.", 'start': 299.809, 'duration': 2.801}, {'end': 312.018, 'text': "Alright, and then let's stick it right there and then we'll have a hamburger Icon menu except I'm gonna do a trendy way.", 'start': 303.59, 'duration': 8.428}, {'end': 315.22, 'text': "It's not gonna just be three Equal lengths.", 'start': 312.058, 'duration': 3.162}, {'end': 317.142, 'text': "We'll have one come on around here.", 'start': 315.521, 'duration': 1.621}, {'end': 325.349, 'text': "We'll make this white, take the size to two, We'll duplicate it, ctrl D,", 'start': 317.763, 'duration': 7.586}, {'end': 333.519, 'text': "We'll make this one a little bit longer this way and then ctrl D as well and Make it like that.", 'start': 325.349, 'duration': 8.17}, {'end': 334.84, 'text': 'All right.', 'start': 333.539, 'duration': 1.301}, {'end': 339.724, 'text': 'so with that selected, those three Control-G to group those,', 'start': 334.84, 'duration': 4.884}, {'end': 347.571, 'text': "and then we use the keyboard arrow keys to make sure it's all lined up and with equal white space and all that good stuff.", 'start': 339.724, 'duration': 7.847}, {'end': 351.575, 'text': "Awesome, so now that's all the setup that we're gonna do with this.", 'start': 348.232, 'duration': 3.343}, {'end': 359.242, 'text': "For this background, we can go ahead and just lock that so we don't get, same thing with the logo, we don't need that selected at all either.", 'start': 352.175, 'duration': 7.067}, {'end': 360.582, 'text': 'All right.', 'start': 360.322, 'duration': 0.26}], 'summary': 'Creating a watermark logo with montserrat font, white color, and a trendy hamburger icon with equal white space.', 'duration': 71.336, 'max_score': 289.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0289246.jpg'}, {'end': 416.851, 'src': 'embed', 'start': 386.414, 'weight': 3, 'content': [{'end': 391.399, 'text': 'come out to right around here, kind of like a two thirds sort of column situation.', 'start': 386.414, 'duration': 4.985}, {'end': 393.762, 'text': "We'll take this and we're going to make it black.", 'start': 391.98, 'duration': 1.782}, {'end': 397.305, 'text': "Actually, no, we're going to make it a little bit off black.", 'start': 394.422, 'duration': 2.883}, {'end': 397.946, 'text': 'There we go.', 'start': 397.466, 'duration': 0.48}, {'end': 398.907, 'text': 'I like that.', 'start': 398.427, 'duration': 0.48}, {'end': 402.791, 'text': "And then we'll go ahead and we're going to zoom up here.", 'start': 400.449, 'duration': 2.342}, {'end': 408.277, 'text': "I'm going to take the line tool, hold shift for 45 degree angle.", 'start': 402.811, 'duration': 5.466}, {'end': 416.851, 'text': 'right around there, make it white size two for the stroke.', 'start': 412.25, 'duration': 4.601}], 'summary': 'Creating a design with a two-thirds column in off-black, and a white 45-degree angled line.', 'duration': 30.437, 'max_score': 386.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0386414.jpg'}, {'end': 469.562, 'src': 'embed', 'start': 439.597, 'weight': 6, 'content': [{'end': 444.951, 'text': "Awesome Okay, so now after that, we're going to put in some of our menu items.", 'start': 439.597, 'duration': 5.354}, {'end': 449.353, 'text': 'So when you construct the menu items, you can make them all part of the same text layer,', 'start': 445.531, 'duration': 3.822}, {'end': 456.496, 'text': "but if you want to individually kind of animate and control each menu item, then you're going to want to make sure they're separate items,", 'start': 449.353, 'duration': 7.143}, {'end': 457.897, 'text': 'separate text layers themselves.', 'start': 456.496, 'duration': 1.401}, {'end': 463.899, 'text': "So we're going to put in home, hit escape, control D, hit V for move.", 'start': 458.357, 'duration': 5.542}, {'end': 469.562, 'text': "then hold shift and let's say right around, there is pretty good.", 'start': 465.7, 'duration': 3.862}], 'summary': 'Instructions for adding menu items: home, escape, control d, hit v for move.', 'duration': 29.965, 'max_score': 439.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0439597.jpg'}, {'end': 537.084, 'src': 'embed', 'start': 513.073, 'weight': 5, 'content': [{'end': 521.278, 'text': 'You have to make sure that first all of these elements have to be on this artboard as well.', 'start': 513.073, 'duration': 8.205}, {'end': 522.98, 'text': 'This very initial artboard.', 'start': 521.719, 'duration': 1.261}, {'end': 527.722, 'text': "Otherwise, it doesn't know how to go from point a to point B.", 'start': 523.26, 'duration': 4.462}, {'end': 534.164, 'text': 'So the way these are is kind of just basic tweens in a sense that you have a starting point and you have an ending point.', 'start': 527.722, 'duration': 6.442}, {'end': 537.084, 'text': "Well, right now we have an ending point, but we don't have a starting point.", 'start': 534.184, 'duration': 2.9}], 'summary': 'Ensure all elements are on the initial artboard for smooth transitions.', 'duration': 24.011, 'max_score': 513.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0513073.jpg'}], 'start': 238.683, 'title': 'Graphic design setup, x shape design, and animating menu items', 'summary': 'Covers creating a graphic design setup in adobe xd, including menu creation and logo addition, forming an x shape design with color adjustment and duplication, and animating menu items with specific steps and shortcuts for navigation.', 'chapters': [{'end': 384.234, 'start': 238.683, 'title': 'Graphic design setup and menu creation', 'summary': 'Discusses creating a graphic design setup using adobe xd, including applying a watermark background, adding a watermark logo, and creating a trendy hamburger icon menu with equal white space and a trendy style.', 'duration': 145.551, 'highlights': ['Creating a trendy hamburger icon menu with equal white space and trendy style The speaker demonstrates creating a trendy hamburger icon menu, not using three equal lengths, but rather using different lengths and then grouping them together, ensuring they have equal white space and a trendy style.', 'Applying a watermark background and adding a watermark logo The speaker applies a mid-gray watermark background and then adds a watermark logo with white color and Montserrat font in bold, placing it in the design.', 'Graphic design setup using Adobe XD The speaker shows the process of setting up a graphic design using Adobe XD, including not having to search in a separate browser and manually drag things in, but instead using the software to streamline the process.']}, {'end': 438.397, 'start': 386.414, 'title': 'Creating x shape design', 'summary': 'Discusses creating an x shape design with a two-thirds column, adjusting color, and duplicating shapes to form the design.', 'duration': 51.983, 'highlights': ['The chapter demonstrates creating an X shape design with a two-thirds column.', 'Adjusting the color to a little bit off black and duplicating shapes to form the design.', 'Using the line tool with a 45-degree angle and size two for the stroke to create the design.', 'Demonstrating the process of grouping and moving the design into place with control G.']}, {'end': 537.084, 'start': 439.597, 'title': 'Animating menu items in adobe xd', 'summary': 'Explains how to individually animate and control menu items in adobe xd, emphasizing the importance of placing all elements on the initial artboard for proper animation and navigation, with specific steps and shortcuts provided for creating and arranging menu items.', 'duration': 97.487, 'highlights': ['The importance of placing all elements on the initial artboard is emphasized for proper animation and navigation, ensuring a starting and ending point for the animation.', "Specific steps and shortcuts are provided for creating and arranging menu items, including using shortcuts like 'ctrl D' and 'V for move' and emphasizing the need to separate text layers for individual control and animation.", "Instructions are given for creating and arranging specific menu items, such as 'home', 'services', 'about us', and 'contact', with details on scaling and spacing."]}], 'duration': 298.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0238683.jpg', 'highlights': ['Graphic design setup using Adobe XD, streamlining the process.', 'Creating a trendy hamburger icon menu with equal white space and trendy style.', 'Applying a watermark background and adding a watermark logo.', 'Creating an X shape design with a two-thirds column.', 'Demonstrating the process of grouping and moving the design into place with control G.', 'Importance of placing all elements on the initial artboard for proper animation and navigation.', 'Providing specific steps and shortcuts for creating and arranging menu items.', "Instructions for creating and arranging specific menu items like 'home', 'services', 'about us', and 'contact'."]}, {'end': 822.002, 'segs': [{'end': 592.494, 'src': 'embed', 'start': 537.545, 'weight': 0, 'content': [{'end': 542.066, 'text': "So we're going to take these and make sure nothing else is selected here.", 'start': 537.545, 'duration': 4.521}, {'end': 552.789, 'text': 'Uh so, for instance, we have our rectangle one, or make sure, nothing else is selected up this right here that I.', 'start': 542.086, 'duration': 10.703}, {'end': 557.105, 'text': "Yeah, no, this part, there's this thing right here.", 'start': 554.383, 'duration': 2.722}, {'end': 561.328, 'text': "We do not want that at all, which is, it's called group one.", 'start': 557.245, 'duration': 4.083}, {'end': 566.512, 'text': "So if we select everything, we don't want to select group one.", 'start': 561.428, 'duration': 5.084}, {'end': 568.033, 'text': 'So we can just lock that.', 'start': 566.552, 'duration': 1.481}, {'end': 572.596, 'text': 'All right, so now we select only what we want.', 'start': 568.493, 'duration': 4.103}, {'end': 578.3, 'text': "So for instance, if I select everything here, it's still being selected.", 'start': 573.917, 'duration': 4.383}, {'end': 581.202, 'text': "There we go, now it's not selected anymore.", 'start': 579.3, 'duration': 1.902}, {'end': 590.893, 'text': "All right, so now what we can do is we're going to go ahead and we're going to hit Control-G to group everything up together.", 'start': 581.769, 'duration': 9.124}, {'end': 592.494, 'text': 'All right.', 'start': 591.613, 'duration': 0.881}], 'summary': 'Demonstrating how to select and group objects in a design software.', 'duration': 54.949, 'max_score': 537.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0537545.jpg'}, {'end': 651.898, 'src': 'embed', 'start': 611.401, 'weight': 2, 'content': [{'end': 614.083, 'text': "And we're just going to drag it into this one right here.", 'start': 611.401, 'duration': 2.682}, {'end': 620.249, 'text': 'All right, so we have nav here and we have nav here as well.', 'start': 615.765, 'duration': 4.484}, {'end': 621.87, 'text': "So that's exactly what we want.", 'start': 620.289, 'duration': 1.581}, {'end': 625.173, 'text': 'Anything we wanna animate, we wanna make sure that the layer names match up.', 'start': 621.95, 'duration': 3.223}, {'end': 631.138, 'text': "All right, so where is this gonna be going from? Well, by default, we don't want to see this at all.", 'start': 625.854, 'duration': 5.284}, {'end': 635.262, 'text': "So we're gonna be dropping the opacity completely off for all these elements.", 'start': 631.318, 'duration': 3.944}, {'end': 640.967, 'text': "But before we change that, we're gonna change the position of a few of these elements in and of themselves.", 'start': 635.302, 'duration': 5.665}, {'end': 646.252, 'text': "So first off, I'm gonna move everything pretty much off screen, maybe right around here.", 'start': 641.207, 'duration': 5.045}, {'end': 651.898, 'text': "Now, when you move these things off, make sure that they don't go outside of the particular artboard or it won't work.", 'start': 647.033, 'duration': 4.865}], 'summary': 'Animating elements by changing position and opacity in adobe xd.', 'duration': 40.497, 'max_score': 611.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0611401.jpg'}, {'end': 746.108, 'src': 'heatmap', 'start': 684.073, 'weight': 0.834, 'content': [{'end': 691.683, 'text': 'All right, so contact will fade in or come in last because this is further away from its original distance over here.', 'start': 684.073, 'duration': 7.61}, {'end': 695.047, 'text': 'All right, so that seems pretty good to me right now.', 'start': 692.404, 'duration': 2.643}, {'end': 700.474, 'text': "Now we'll take the whole group right here and we're just gonna take the opacity of everything and drop it off.", 'start': 695.668, 'duration': 4.806}, {'end': 705.783, 'text': "Awesome So I think at this point we're ready to do our first kind of prototype.", 'start': 701.798, 'duration': 3.985}, {'end': 710.008, 'text': "So what we'll do is when somebody clicks this, we're going to drag it to this artboard.", 'start': 705.823, 'duration': 4.185}, {'end': 716.435, 'text': "We're going to make the trigger a tap and the action is going to be auto animate.", 'start': 710.849, 'duration': 5.586}, {'end': 717.57, 'text': 'All right.', 'start': 717.27, 'duration': 0.3}, {'end': 721.953, 'text': 'So we also have the easing and the easing you could play around with.', 'start': 717.63, 'duration': 4.323}, {'end': 724.515, 'text': 'It will affect the animation and how that works.', 'start': 722.033, 'duration': 2.482}, {'end': 728.857, 'text': 'And then also the duration of the animation itself.', 'start': 725.215, 'duration': 3.642}, {'end': 732.68, 'text': "Let's make this like 0.6.", 'start': 729.458, 'duration': 3.222}, {'end': 733.02, 'text': 'All right.', 'start': 732.68, 'duration': 0.34}, {'end': 737.663, 'text': "We're just going to leave it at ease out and then let's hit play to see how this works.", 'start': 733.6, 'duration': 4.063}, {'end': 742.045, 'text': "So we're going to come over here, click it.", 'start': 738.723, 'duration': 3.322}, {'end': 744.287, 'text': 'All right.', 'start': 743.867, 'duration': 0.42}, {'end': 745.307, 'text': "It's very subtle.", 'start': 744.367, 'duration': 0.94}, {'end': 746.108, 'text': "Let's try it again.", 'start': 745.327, 'duration': 0.781}], 'summary': 'Creating a prototype with tap trigger and auto animate, adjusting opacity and easing for animation.', 'duration': 62.035, 'max_score': 684.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0684073.jpg'}, {'end': 721.953, 'src': 'embed', 'start': 695.668, 'weight': 3, 'content': [{'end': 700.474, 'text': "Now we'll take the whole group right here and we're just gonna take the opacity of everything and drop it off.", 'start': 695.668, 'duration': 4.806}, {'end': 705.783, 'text': "Awesome So I think at this point we're ready to do our first kind of prototype.", 'start': 701.798, 'duration': 3.985}, {'end': 710.008, 'text': "So what we'll do is when somebody clicks this, we're going to drag it to this artboard.", 'start': 705.823, 'duration': 4.185}, {'end': 716.435, 'text': "We're going to make the trigger a tap and the action is going to be auto animate.", 'start': 710.849, 'duration': 5.586}, {'end': 717.57, 'text': 'All right.', 'start': 717.27, 'duration': 0.3}, {'end': 721.953, 'text': 'So we also have the easing and the easing you could play around with.', 'start': 717.63, 'duration': 4.323}], 'summary': 'Creating a prototype with drag and drop feature for auto animation.', 'duration': 26.285, 'max_score': 695.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0695668.jpg'}], 'start': 537.545, 'title': 'Design software and ui animation', 'summary': 'Covers grouping objects in design software using control-g and animating ui elements with tap-triggered auto animate action, emphasizing subtlety and layer name matching.', 'chapters': [{'end': 592.494, 'start': 537.545, 'title': 'How to group objects in design software', 'summary': 'Explains the process of deselecting unwanted elements and grouping the desired objects together in design software, emphasizing the use of control-g to group items.', 'duration': 54.949, 'highlights': ["The process involves deselecting unwanted elements, such as 'group one', and then locking it to prevent selection, ensuring that only desired objects are selected.", 'The use of Control-G is emphasized as the method to group everything together in the design software.']}, {'end': 822.002, 'start': 592.494, 'title': 'Animating ui elements and prototyping', 'summary': 'Discusses the process of animating ui elements to match their layer names and prototyping a tap-triggered auto animate action with easing and duration adjustments, emphasizing the importance of subtlety in ui animations.', 'duration': 229.508, 'highlights': ['The importance of matching layer names for animating UI elements is emphasized to ensure proper functionality.', 'The process of prototyping a tap-triggered auto animate action is explained, with details on adjusting easing and duration for subtlety in the animation.', 'The method of moving UI elements off-screen and adjusting their positions is described to prepare for animation.']}], 'duration': 284.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0537545.jpg', 'highlights': ['The use of Control-G is emphasized as the method to group everything together in the design software.', "The process involves deselecting unwanted elements, such as 'group one', and then locking it to prevent selection, ensuring that only desired objects are selected.", 'The importance of matching layer names for animating UI elements is emphasized to ensure proper functionality.', 'The process of prototyping a tap-triggered auto animate action is explained, with details on adjusting easing and duration for subtlety in the animation.', 'The method of moving UI elements off-screen and adjusting their positions is described to prepare for animation.']}, {'end': 1440.843, 'segs': [{'end': 878.606, 'src': 'embed', 'start': 844.076, 'weight': 3, 'content': [{'end': 848.22, 'text': "So what we'll do is we're going to go back to the Design tab and duplicate this.", 'start': 844.076, 'duration': 4.144}, {'end': 853.764, 'text': "And we're going to create a rectangle right here.", 'start': 849.04, 'duration': 4.724}, {'end': 855.986, 'text': 'So a rounded rectangle will go right here.', 'start': 853.944, 'duration': 2.042}, {'end': 858.808, 'text': 'All right.', 'start': 856.006, 'duration': 2.802}, {'end': 863.312, 'text': "And we're going to drag those corners in all the way.", 'start': 859.089, 'duration': 4.223}, {'end': 870.318, 'text': "And we'll take the fill somewhere right around there, 404040 for the hex code.", 'start': 864.173, 'duration': 6.145}, {'end': 873.523, 'text': 'All right.', 'start': 873.243, 'duration': 0.28}, {'end': 878.606, 'text': "And real quickly, we're going to create a magnifying glass icon.", 'start': 873.863, 'duration': 4.743}], 'summary': 'Creating a rounded rectangle with fill color 404040 and a magnifying glass icon.', 'duration': 34.53, 'max_score': 844.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0844076.jpg'}, {'end': 1004.802, 'src': 'heatmap', 'start': 940.158, 'weight': 0, 'content': [{'end': 946.363, 'text': "so we'll ctrl d to duplicate search and we're going to put it right here.", 'start': 940.158, 'duration': 6.205}, {'end': 950.727, 'text': "and the change that we're going to make is first we're going to pull this all the way in,", 'start': 946.363, 'duration': 4.364}, {'end': 957.897, 'text': "And then also we'll take the whole group itself and we'll take the opacity down.", 'start': 952.168, 'duration': 5.729}, {'end': 959.552, 'text': 'All right.', 'start': 959.232, 'duration': 0.32}, {'end': 965.734, 'text': "So let's go to our prototype tab and I will take this.", 'start': 960.052, 'duration': 5.682}, {'end': 968.835, 'text': "We'll drag this artboard over to this artboard.", 'start': 966.215, 'duration': 2.62}, {'end': 971.957, 'text': 'We have auto animate, but the trigger is not going to be a tap.', 'start': 969.416, 'duration': 2.541}, {'end': 974.898, 'text': "It's going to be a time with a zero delay.", 'start': 972.197, 'duration': 2.701}, {'end': 976.158, 'text': 'All right.', 'start': 975.878, 'duration': 0.28}, {'end': 977.479, 'text': "So let's try that.", 'start': 976.218, 'duration': 1.261}, {'end': 982.42, 'text': "Maybe we'll make it a 0.6 seconds duration and hit play.", 'start': 977.579, 'duration': 4.841}, {'end': 983.981, 'text': 'So we click it.', 'start': 983.461, 'duration': 0.52}, {'end': 987.644, 'text': 'And there we go, awesome stuff.', 'start': 985.683, 'duration': 1.961}, {'end': 993.268, 'text': "So hopefully you're now starting to realize the power of being able to do this.", 'start': 988.225, 'duration': 5.043}, {'end': 1004.802, 'text': 'What we can do real quickly is take this, and if they hit x out of here, it will take them back.', 'start': 994.309, 'duration': 10.493}], 'summary': 'Using auto animate with a 0.6 second duration to demonstrate the power of the action.', 'duration': 53.11, 'max_score': 940.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0940158.jpg'}], 'start': 822.002, 'title': 'Ui animation techniques', 'summary': 'Covers creating design elements with the design tab, sequence-based animations for smooth interface transitions, and the powerful features of auto animate, including time-based and tap triggers with specific durations, highlighting the ease and power of the process.', 'chapters': [{'end': 968.835, 'start': 822.002, 'title': 'Design tab and animation techniques', 'summary': 'Discusses creating design elements using the design tab and demonstrates the use of sequence-based animations with a delay and opacity change, enabling smooth interface transitions.', 'duration': 146.833, 'highlights': ['The chapter discusses creating design elements using the Design tab, including creating rectangles, rounded rectangles, and icons, with specific color codes and sizes.', 'It demonstrates the use of sequence-based animations with a delay, emphasizing the need for a start and end point for the animation to work smoothly.', 'The tutorial showcases the process of duplicating elements and applying opacity changes to create smooth interface transitions.', 'It highlights the importance of grouping elements and using the prototype tab to enable smooth transitions between artboards.']}, {'end': 1440.843, 'start': 969.416, 'title': 'Auto animation for ui', 'summary': 'Demonstrates the power of auto animate for ui design, showcasing a time-based trigger with zero delay and a 0.6-second duration, as well as a tap trigger with auto animate and a 6-second duration, ultimately highlighting the ease and immense power of the process.', 'duration': 471.427, 'highlights': ['The chapter demonstrates a time-based trigger with zero delay and a 0.6-second duration for auto animation, showcasing its power and ease of use. The chapter showcases using a time-based trigger with zero delay and a 0.6-second duration for auto animation, highlighting its ease and power.', 'A tap trigger with auto animate and a 6-second duration is used to demonstrate the power of auto animation for UI design. The chapter demonstrates the use of a tap trigger with auto animate and a 6-second duration to showcase the power of auto animation for UI design.', 'The chapter emphasizes the immense power of auto animate, highlighting its ease of use and its potential to create a wide range of UI animations. The chapter emphasizes the immense power of auto animate, highlighting its ease of use and its potential to create a wide range of UI animations.']}], 'duration': 618.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Sw576YvXDc0/pics/Sw576YvXDc0822002.jpg', 'highlights': ['The chapter emphasizes the immense power of auto animate, highlighting its ease of use and its potential to create a wide range of UI animations.', 'The chapter demonstrates a time-based trigger with zero delay and a 0.6-second duration for auto animation, showcasing its power and ease of use.', 'The tutorial showcases the process of duplicating elements and applying opacity changes to create smooth interface transitions.', 'The chapter discusses creating design elements using the Design tab, including creating rectangles, rounded rectangles, and icons, with specific color codes and sizes.']}], 'highlights': ['The auto animate feature in Adobe XD allows for creating intricate animations in prototypes, exemplified by a cascading sequence animation and slick transitions, showcasing its capability to envision app interactions based on user input.', 'The ease of creating prototypes with the auto animate feature in Adobe XD is emphasized, as it provides a seamless way to envision app responses, which is seen as a massive step forward in app development.', 'The speaker initially underestimated the capability of the auto animate feature in Adobe XD, but upon experimentation, realized its potential for creating sophisticated animations, providing a firsthand account of its versatility.', 'Skillshare.com offers thousands of classes for $10 a month.', 'The first two months are free for the first 200 students.', 'Graphic design setup using Adobe XD, streamlining the process.', 'Creating a trendy hamburger icon menu with equal white space and trendy style.', 'The use of Control-G is emphasized as the method to group everything together in the design software.', "The process involves deselecting unwanted elements, such as 'group one', and then locking it to prevent selection, ensuring that only desired objects are selected.", 'The importance of matching layer names for animating UI elements is emphasized to ensure proper functionality.', 'The process of prototyping a tap-triggered auto animate action is explained, with details on adjusting easing and duration for subtlety in the animation.', 'The chapter emphasizes the immense power of auto animate, highlighting its ease of use and its potential to create a wide range of UI animations.', 'The chapter demonstrates a time-based trigger with zero delay and a 0.6-second duration for auto animation, showcasing its power and ease of use.']}