title
Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)
description
Ever wonder how designers animate their icons? They may have used a tool called http://shapeshifter.design -- which allows you to import SVG graphics and animate them based on a timeline. In this tutorial, I'm going to show you how to do exactly that while we create our own SVG icon and animate.
I will even show you how to export it and use a little bit of JavaScript to make the animation take place upon a click event.
Enjoy this tut? Leave a comment and subscribe!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
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': 'Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)', 'heatmap': [{'end': 487.479, 'start': 420.501, 'weight': 0.845}], 'summary': 'Learn to design custom svg icons using shapeshifter.design, create pixel art, and animate svg files, including specific modifications, wave effects, bezier and svg path animations, and the process of creating svg animations in adobe illustrator resulting in a file size of 89kb. discover animation techniques in css and javascript, including css sprites and button animation with vanilla javascript, highlighting specific css rules and performance impact.', 'chapters': [{'end': 159.529, 'segs': [{'end': 104.012, 'src': 'embed', 'start': 58.478, 'weight': 0, 'content': [{'end': 68.106, 'text': 'so to get started, you want to visit shapeshifter.design, and the very first thing you need is to actually import something.', 'start': 58.478, 'duration': 9.628}, {'end': 73.19, 'text': 'So you do that under import and then vector drawable or SVG.', 'start': 68.266, 'duration': 4.924}, {'end': 80.396, 'text': "We're going to use SVG and that means we're going to have to use a design app of some sort, something that's capable of SVG vector graphics.", 'start': 73.21, 'duration': 7.186}, {'end': 87.001, 'text': "So I'm just going to use Adobe Illustrator, though you could use anything else that gives you a pen tool and allows you to export SVG files.", 'start': 80.536, 'duration': 6.465}, {'end': 98.248, 'text': 'And so just to get an idea of what we want to do, something that could be helpful is to check out material.io forward slash icons.', 'start': 87.621, 'duration': 10.627}, {'end': 104.012, 'text': "And you could do a search here for a specific icon if you want, like, I don't know, chat or something like that.", 'start': 98.868, 'duration': 5.144}], 'summary': 'Visit shapeshifter.design, import svg, use design app like adobe illustrator, check material.io/icons for specific icons.', 'duration': 45.534, 'max_score': 58.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU58478.jpg'}], 'start': 4.067, 'title': 'Designing a custom svg icon with shapeshifter', 'summary': 'Focuses on the process of designing a custom svg icon using shapeshifter.design, importing it into the web-based tool, and animating and exporting it as an svg for use in html and css.', 'chapters': [{'end': 159.529, 'start': 4.067, 'title': 'Designing a custom svg icon with shapeshifter', 'summary': 'Highlights the process of designing a custom svg icon using shapeshifter.design, importing it into the web-based tool, and animating and exporting it as an svg for use in html and css.', 'duration': 155.462, 'highlights': ['The process involves importing a vector drawable or SVG into shapeshifter.design to create an animated SVG. Importing a vector drawable or SVG into shapeshifter.design allows for the creation of an animated SVG, providing flexibility in designing custom icons.', 'The importance of using a design app capable of SVG vector graphics, such as Adobe Illustrator, is emphasized. Utilizing a design app capable of SVG vector graphics, such as Adobe Illustrator, is crucial for creating and exporting SVG files to be used in shapeshifter.design.', 'The demonstration of the desired effect from a material.io icon to a custom animated SVG is showcased. The demonstration of transitioning from a material.io icon to a custom animated SVG illustrates the desired effect and serves as an example for the design process.']}], 'duration': 155.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU4067.jpg', 'highlights': ['Importing a vector drawable or SVG into shapeshifter.design allows for the creation of an animated SVG, providing flexibility in designing custom icons.', 'Utilizing a design app capable of SVG vector graphics, such as Adobe Illustrator, is crucial for creating and exporting SVG files to be used in shapeshifter.design.', 'The demonstration of transitioning from a material.io icon to a custom animated SVG illustrates the desired effect and serves as an example for the design process.']}, {'end': 573.756, 'segs': [{'end': 197.526, 'src': 'embed', 'start': 160.549, 'weight': 4, 'content': [{'end': 165.21, 'text': 'This is based on 24 by 24 pixel grid.', 'start': 160.549, 'duration': 4.661}, {'end': 168.471, 'text': "Okay, so we're going to set our document up to match that.", 'start': 165.47, 'duration': 3.001}, {'end': 170.911, 'text': 'So we have pixels selected here.', 'start': 168.991, 'duration': 1.92}, {'end': 173.112, 'text': 'So this is going to be 24 by 24.', 'start': 171.551, 'duration': 1.561}, {'end': 176.333, 'text': 'All right.', 'start': 173.112, 'duration': 3.221}, {'end': 183.054, 'text': "Okay, so let's toggle our layers right here.", 'start': 178.353, 'duration': 4.701}, {'end': 185.403, 'text': 'All right.', 'start': 185.083, 'duration': 0.32}, {'end': 189.184, 'text': "So the first thing I'll do is to create the, just the rounded rectangle.", 'start': 185.503, 'duration': 3.681}, {'end': 197.526, 'text': 'If we just left click once, we can just choose something like 20 by 20 quarter radius.', 'start': 190.504, 'duration': 7.022}], 'summary': 'Setting up a 24x24 pixel grid and creating a rounded rectangle with a 20x20 quarter radius.', 'duration': 36.977, 'max_score': 160.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU160549.jpg'}, {'end': 359.992, 'src': 'embed', 'start': 290.907, 'weight': 0, 'content': [{'end': 301.715, 'text': "so just take only this anchor point, hold shift, move it over and we'll select everything these bottom four anchor points.", 'start': 290.907, 'duration': 10.808}, {'end': 306.419, 'text': 'use the keyboard up arrow key and make sure it sits in there nicely.', 'start': 301.715, 'duration': 4.704}, {'end': 309.522, 'text': 'yeah, right around there.', 'start': 306.419, 'duration': 3.103}, {'end': 316.251, 'text': 'actually i want to go a little bit higher, Alright.', 'start': 309.522, 'duration': 6.729}, {'end': 317.812, 'text': "so we're at 20 by 18..", 'start': 316.251, 'duration': 1.561}, {'end': 322.815, 'text': 'I might want to get this in a little bit.', 'start': 317.812, 'duration': 5.003}, {'end': 328.218, 'text': "We'll make it 18 here by 16.", 'start': 323.795, 'duration': 4.423}, {'end': 331.38, 'text': 'That way we have a lot of padding and room to work with here.', 'start': 328.218, 'duration': 3.162}, {'end': 334.801, 'text': 'Alright, so that looks good to me.', 'start': 333.281, 'duration': 1.52}, {'end': 338.103, 'text': 'And this is going to be the starting point for us.', 'start': 335.122, 'duration': 2.981}, {'end': 344.307, 'text': "And it's going to be the first SVG file that we import into Shapeshifter.", 'start': 338.964, 'duration': 5.343}, {'end': 348.385, 'text': 'So if you go to File, Save As, you save it somewhere.', 'start': 345.583, 'duration': 2.802}, {'end': 359.992, 'text': "We'll call this one, we'll just call this Outline Chat, and then we'll save as SVG right here.", 'start': 348.405, 'duration': 11.587}], 'summary': 'Adjust anchor points, set dimensions to 18 by 16, save as svg.', 'duration': 69.085, 'max_score': 290.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU290907.jpg'}, {'end': 416.638, 'src': 'embed', 'start': 387.673, 'weight': 2, 'content': [{'end': 394.539, 'text': 'We kind of have an area where we have our layers and you can group things up and you can create clipping masks and all that stuff.', 'start': 387.673, 'duration': 6.866}, {'end': 395.38, 'text': "we'll get to shortly.", 'start': 394.539, 'duration': 0.841}, {'end': 398.983, 'text': 'And then properties are over here based on what you select in the timeline.', 'start': 395.4, 'duration': 3.583}, {'end': 405.008, 'text': "And that's pretty much it for the most part, although there are some other sections that we'll take a look at.", 'start': 399.664, 'duration': 5.344}, {'end': 408.691, 'text': 'So you can notice we can select this actual section.', 'start': 405.389, 'duration': 3.302}, {'end': 416.638, 'text': "the outline here and it gives us all the data that's associated with it, like the path data, it gives you the fill color.", 'start': 409.372, 'duration': 7.266}], 'summary': 'Software features include layer grouping, clipping masks, and property selection in the timeline.', 'duration': 28.965, 'max_score': 387.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU387673.jpg'}, {'end': 487.479, 'src': 'heatmap', 'start': 420.501, 'weight': 0.845, 'content': [{'end': 429.967, 'text': 'that allows you to animate a lot of different of these properties and actually, if you click on this, animate this layer, then these are everything.', 'start': 420.501, 'duration': 9.466}, {'end': 433.148, 'text': 'these are all the properties that you can actually animate.', 'start': 429.967, 'duration': 3.181}, {'end': 443.891, 'text': "so, like trim path end and start, for instance, if we um put this to zero, well, it's no longer there, it's invisible,", 'start': 433.148, 'duration': 10.743}, {'end': 446.652, 'text': "and that's how you can begin to animate some of these things.", 'start': 443.891, 'duration': 2.761}, {'end': 466.286, 'text': "so, um, for instance, i'll just show you uh, if we click on our path and we animate the trim path end and we put from value zero to value one and,", 'start': 446.652, 'duration': 19.634}, {'end': 471.207, 'text': 'by the way, this is your timeline you can drag this and you see how it affects it shows the end time.', 'start': 466.286, 'duration': 4.921}, {'end': 476.369, 'text': 'so you can just put that um, you can specify it here or just drag it over here.', 'start': 471.207, 'duration': 5.162}, {'end': 479.932, 'text': 'But if we hit play, look at that.', 'start': 476.949, 'duration': 2.983}, {'end': 481.774, 'text': 'Let me just deselect that.', 'start': 479.952, 'duration': 1.822}, {'end': 483.675, 'text': "Now you can notice it's really fast.", 'start': 482.094, 'duration': 1.581}, {'end': 487.479, 'text': "It's probably showing up a little bit jagged because I'm not using a high FPS for this video.", 'start': 483.715, 'duration': 3.764}], 'summary': 'The transcript discusses how to animate various properties using after effects, including trim path end and start, and demonstrates the use of the timeline to control the animation.', 'duration': 66.978, 'max_score': 420.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU420501.jpg'}, {'end': 466.286, 'src': 'embed', 'start': 429.967, 'weight': 3, 'content': [{'end': 433.148, 'text': 'these are all the properties that you can actually animate.', 'start': 429.967, 'duration': 3.181}, {'end': 443.891, 'text': "so, like trim path end and start, for instance, if we um put this to zero, well, it's no longer there, it's invisible,", 'start': 433.148, 'duration': 10.743}, {'end': 446.652, 'text': "and that's how you can begin to animate some of these things.", 'start': 443.891, 'duration': 2.761}, {'end': 466.286, 'text': "so, um, for instance, i'll just show you uh, if we click on our path and we animate the trim path end and we put from value zero to value one and,", 'start': 446.652, 'duration': 19.634}], 'summary': 'Demonstrating how to animate properties like trim path end and start, showing how to go from value zero to value one.', 'duration': 36.319, 'max_score': 429.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU429967.jpg'}, {'end': 591.762, 'src': 'embed', 'start': 552.104, 'weight': 1, 'content': [{'end': 558.246, 'text': "but we're going to basically create kind of like a wave effect that rises, and this is based on one of their demos that they had.", 'start': 552.104, 'duration': 6.142}, {'end': 563.528, 'text': "if you go to file demo and then choose the heartbreak one I think it was called, you'll see.", 'start': 558.246, 'duration': 5.282}, {'end': 569.151, 'text': "basically we're going to do the same thing, just kind of fill up eye all the way.", 'start': 563.528, 'duration': 5.623}, {'end': 570.372, 'text': 'so how will we do that?', 'start': 569.151, 'duration': 1.221}, {'end': 573.756, 'text': "well, let's go back to illustrator,", 'start': 570.372, 'duration': 3.384}, {'end': 591.762, 'text': "and I'm going to take our pen tool and I'm going to just click right around here and left click and drag out a bezier And to right there.", 'start': 573.756, 'duration': 18.006}], 'summary': 'Creating a wave effect based on a demo in illustrator.', 'duration': 39.658, 'max_score': 552.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU552104.jpg'}], 'start': 160.549, 'title': 'Creating pixel art and animating svg files', 'summary': 'Discusses creating a 24x24 pixel art with specific modifications and demonstrates animating svg files in shapeshifter, including setting up properties and animating a wave effect, with a focus on quantifiable data and specific examples.', 'chapters': [{'end': 328.218, 'start': 160.549, 'title': 'Creating 24x24 pixel art', 'summary': 'Discusses creating a 24x24 pixel art using a 24 by 24 pixel grid, starting with a rounded rectangle, modifying it to have a triangle section, and adjusting the dimensions to 18 by 16.', 'duration': 167.669, 'highlights': ['Starting with a rounded rectangle of 20 by 20 quarter radius, then modifying it to have a triangle section.', 'Using the direct selection tool to manipulate anchor points and adjusting dimensions to 18 by 16.', 'Creating pixel art based on a 24 by 24 pixel grid and ensuring a one point fill for the triangle section.']}, {'end': 573.756, 'start': 328.218, 'title': 'Creating and animating svg files in shapeshifter', 'summary': 'Covers the process of creating and importing svg files into shapeshifter, including setting up properties, animating layers, and adjusting animation duration, with a focus on demonstrating how to animate a wave effect that rises, using specific examples and quantifiable data.', 'duration': 245.538, 'highlights': ['Demonstrating the process of importing the first SVG file into Shapeshifter The chapter begins with the process of importing the first SVG file into Shapeshifter, providing step-by-step instructions on saving the file, matching settings, and importing the SVG file into Shapeshifter.', 'Explaining the properties, layers, and options available in Shapeshifter for editing SVG files The chapter explores the various features and options in Shapeshifter for editing SVG files, including the timeline, layers, grouping, clipping masks, and properties that can be modified, providing an overview of the available editing capabilities.', 'Detailing the animation capabilities of Shapeshifter, including animatable properties and adjusting animation duration The chapter delves into the animation capabilities of Shapeshifter, highlighting the animatable properties and demonstrating how to adjust the animation duration, with specific examples of changing animation timing and its impact on file size, providing practical insights into animation customization.', 'Illustrating the process of creating a wave effect in Shapeshifter based on a specific demo example The chapter provides a detailed demonstration of creating a wave effect in Shapeshifter, referencing a specific demo example and explaining the process of achieving the effect, offering practical guidance for replicating the demonstrated animation technique.']}], 'duration': 413.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU160549.jpg', 'highlights': ['Demonstrating the process of importing the first SVG file into Shapeshifter, providing step-by-step instructions on saving the file, matching settings, and importing the SVG file into Shapeshifter.', 'Illustrating the process of creating a wave effect in Shapeshifter based on a specific demo example, offering practical guidance for replicating the demonstrated animation technique.', 'Explaining the properties, layers, and options available in Shapeshifter for editing SVG files, including the timeline, layers, grouping, clipping masks, and properties that can be modified, providing an overview of the available editing capabilities.', 'Detailing the animation capabilities of Shapeshifter, including animatable properties and adjusting animation duration, with specific examples of changing animation timing and its impact on file size, providing practical insights into animation customization.', 'Starting with a rounded rectangle of 20 by 20 quarter radius, then modifying it to have a triangle section, ensuring a one point fill for the triangle section.', 'Using the direct selection tool to manipulate anchor points and adjusting dimensions to 18 by 16.', 'Creating pixel art based on a 24 by 24 pixel grid.']}, {'end': 860.956, 'segs': [{'end': 603.506, 'src': 'embed', 'start': 573.756, 'weight': 4, 'content': [{'end': 591.762, 'text': "and I'm going to take our pen tool and I'm going to just click right around here and left click and drag out a bezier And to right there.", 'start': 573.756, 'duration': 18.006}, {'end': 593.883, 'text': "And then I'm just going to come down.", 'start': 591.782, 'duration': 2.101}, {'end': 596.564, 'text': "It doesn't really matter exactly where I'm at yet.", 'start': 593.923, 'duration': 2.641}, {'end': 599.525, 'text': "But I'm just holding shift and I'm connecting everything up.", 'start': 597.184, 'duration': 2.341}, {'end': 602.026, 'text': 'Now this one will not have a stroke.', 'start': 600.105, 'duration': 1.921}, {'end': 603.506, 'text': "So we're just going to hit zero there.", 'start': 602.086, 'duration': 1.42}], 'summary': 'Using pen tool to create a bezier curve and connecting points with a shift key.', 'duration': 29.75, 'max_score': 573.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU573756.jpg'}, {'end': 688.184, 'src': 'embed', 'start': 661.257, 'weight': 1, 'content': [{'end': 669.163, 'text': 'so the important part right here is this right here this path d equals, and these are all the coordinates that really make up the shape.', 'start': 661.257, 'duration': 7.906}, {'end': 673.387, 'text': "so we're going to be referring to this in a second.", 'start': 669.864, 'duration': 3.523}, {'end': 676.37, 'text': 'so just note that and save this.', 'start': 673.387, 'duration': 2.983}, {'end': 683.981, 'text': "So now we can go back and we're going to import an SVG and then our fill.", 'start': 677.836, 'duration': 6.145}, {'end': 688.184, 'text': "Looks like crap, doesn't it? So that's expected though.", 'start': 684.822, 'duration': 3.362}], 'summary': 'Transcript discusses coordinates for shape and importing svg with expected results.', 'duration': 26.927, 'max_score': 661.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU661257.jpg'}, {'end': 791.929, 'src': 'embed', 'start': 718.533, 'weight': 0, 'content': [{'end': 723.338, 'text': 'So now anything after it will only show up in this area.', 'start': 718.533, 'duration': 4.805}, {'end': 736.805, 'text': 'So now what we can do is we can animate this right here to grow essentially and we can change the path data property.', 'start': 724.597, 'duration': 12.208}, {'end': 746.012, 'text': "So what we'll do is take this little icon right there And we'll choose Path Data.", 'start': 737.486, 'duration': 8.526}, {'end': 748.894, 'text': "So you're going to go from a From value.", 'start': 746.813, 'duration': 2.081}, {'end': 751.436, 'text': 'We can see the whole thing right there.', 'start': 750.015, 'duration': 1.421}, {'end': 755.959, 'text': 'From here, which is the initial, to something else.', 'start': 752.357, 'duration': 3.602}, {'end': 760.803, 'text': "So how do we change that? Well, we'll go back to our Adobe Illustrator.", 'start': 756.039, 'duration': 4.764}, {'end': 763.085, 'text': 'Back up here, Control Z.', 'start': 761.283, 'duration': 1.802}, {'end': 765.927, 'text': "And then I'm just going to drag this up.", 'start': 763.085, 'duration': 2.842}, {'end': 776.321, 'text': 'Oops, up to here above, just so that it will fully cover everything.', 'start': 769.895, 'duration': 6.426}, {'end': 784.306, 'text': 'All right, so now we can delete this file.', 'start': 777.843, 'duration': 6.463}, {'end': 786.307, 'text': "We'll save as we'll overwrite it.", 'start': 784.506, 'duration': 1.801}, {'end': 786.967, 'text': "It doesn't matter.", 'start': 786.327, 'duration': 0.64}, {'end': 790.908, 'text': "Um, but we're not actually going to save it.", 'start': 786.987, 'duration': 3.921}, {'end': 791.929, 'text': 'Just hit yes here.', 'start': 790.968, 'duration': 0.961}], 'summary': 'Demonstrating animation and path data changes in adobe illustrator.', 'duration': 73.396, 'max_score': 718.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU718533.jpg'}], 'start': 573.756, 'title': 'Vector animation techniques', 'summary': 'Covers creating bezier and svg path animations, with step-by-step instructions for modifying path data and implementing changes in web browsers, including stroke and fill properties.', 'chapters': [{'end': 634.297, 'start': 573.756, 'title': 'Creating bezier animation with pen tool', 'summary': 'Covers creating a bezier animation using the pen tool, setting stroke and fill properties, and deleting layers in the animation process.', 'duration': 60.541, 'highlights': ['Using the pen tool to create a bezier animation with specific stroke and fill properties.', 'Setting the starting point of the animation outside of the chat blip and adjusting its size.', 'Demonstrating the process of deleting layers in the animation through the window layers interface.']}, {'end': 860.956, 'start': 634.297, 'title': 'Svg path animation tutorial', 'summary': 'Demonstrates how to import an svg file, modify the path data, and animate the shape in adobe illustrator, and then implement the changes in a web browser, providing step-by-step instructions.', 'duration': 226.659, 'highlights': ['The chapter provides step-by-step instructions on importing an SVG file, modifying path data, and animating the shape in Adobe Illustrator, followed by implementing the changes in a web browser.', "The tutorial emphasizes the importance of the 'path d' property, highlighting that it contains the coordinates that define the shape, and provides practical guidance on utilizing it for modification and animation.", 'The speaker demonstrates the process of converting a path to a clip path and animating the shape to grow, offering a clear explanation of the steps and their impact on the visual outcome.', 'The tutorial includes practical tips, such as adjusting zoom settings in the web browser and demonstrates the visual impact of the changes made, providing a comprehensive understanding of the process.', "The chapter provides insights into using Adobe Illustrator for creating and modifying SVG files, offering a practical demonstration of the software's functionalities and their applications in web design."]}], 'duration': 287.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU573756.jpg', 'highlights': ["The tutorial emphasizes the importance of the 'path d' property, providing practical guidance on utilizing it for modification and animation.", 'The chapter provides step-by-step instructions on importing an SVG file, modifying path data, and animating the shape in Adobe Illustrator, followed by implementing the changes in a web browser.', "The chapter provides insights into using Adobe Illustrator for creating and modifying SVG files, offering a practical demonstration of the software's functionalities and their applications in web design.", 'The speaker demonstrates the process of converting a path to a clip path and animating the shape to grow, offering a clear explanation of the steps and their impact on the visual outcome.', 'Using the pen tool to create a bezier animation with specific stroke and fill properties.']}, {'end': 1360.314, 'segs': [{'end': 892.546, 'src': 'embed', 'start': 861.337, 'weight': 0, 'content': [{'end': 864.278, 'text': "So now let's do the actual lines.", 'start': 861.337, 'duration': 2.941}, {'end': 868.24, 'text': "And just to simulate with that, I'm going to go ahead and just..", 'start': 864.298, 'duration': 3.942}, {'end': 871.896, 'text': 'yeah, we can hide that.', 'start': 870.194, 'duration': 1.702}, {'end': 881.025, 'text': "and then for the lines let's go ahead and fill this with a black so that we can actually see what's happening.", 'start': 871.896, 'duration': 9.129}, {'end': 883.067, 'text': 'alright, stroke, we can.', 'start': 881.025, 'duration': 2.042}, {'end': 885.309, 'text': 'just we need that.', 'start': 883.067, 'duration': 2.242}, {'end': 892.546, 'text': "Now for the lines, we'll go ahead and use the line tool just coming out from the very left holding shift,", 'start': 886.823, 'duration': 5.723}], 'summary': 'Demonstrating line creation and stroke adjustment for visualization.', 'duration': 31.209, 'max_score': 861.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU861337.jpg'}, {'end': 959.298, 'src': 'embed', 'start': 927.108, 'weight': 1, 'content': [{'end': 931.272, 'text': 'So Ctrl-C, Ctrl-F, move it down with your keyboard arrow keys.', 'start': 927.108, 'duration': 4.164}, {'end': 945.19, 'text': "And We'll take the Direct Selection tool, move this in with our keyboard arrow keys maybe one, two, yeah,", 'start': 934.896, 'duration': 10.294}, {'end': 948.452, 'text': 'just twice and then replicate that process one more time.', 'start': 945.19, 'duration': 3.262}, {'end': 950.293, 'text': 'Control-C, Control-F, move it down.', 'start': 948.492, 'duration': 1.801}, {'end': 956.276, 'text': "Now, this is too much distance between these, so I'm only going to make it one.", 'start': 951.594, 'duration': 4.682}, {'end': 959.298, 'text': 'So move this up one, and then this up one.', 'start': 956.656, 'duration': 2.642}], 'summary': 'Using keyboard shortcuts, replicate and adjust elements in the design twice.', 'duration': 32.19, 'max_score': 927.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU927108.jpg'}, {'end': 1021.006, 'src': 'embed', 'start': 994.233, 'weight': 2, 'content': [{'end': 999.775, 'text': "And the reason I deleted those is because in the SVG code, it will include that stuff, which you just don't need.", 'start': 994.233, 'duration': 5.542}, {'end': 1010.92, 'text': "So we'll save that and then we'll back up, and then I'll just back up twice the other ones that I want to delete.", 'start': 1000.695, 'duration': 10.225}, {'end': 1015.923, 'text': 'so the first one that I kept would be this one.', 'start': 1010.92, 'duration': 5.003}, {'end': 1021.006, 'text': 'so we can delete that, delete this and this will give us the middle one.', 'start': 1015.923, 'duration': 5.083}], 'summary': 'Deleted unnecessary svg code to retain the middle one.', 'duration': 26.773, 'max_score': 994.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU994233.jpg'}, {'end': 1179.845, 'src': 'embed', 'start': 1150.269, 'weight': 3, 'content': [{'end': 1159.271, 'text': 'instead, what we can do is animate the trim path end portion right here.', 'start': 1150.269, 'duration': 9.002}, {'end': 1162.612, 'text': "so we'll take each three of these.", 'start': 1159.271, 'duration': 3.341}, {'end': 1165.999, 'text': 'so the first one Here.', 'start': 1162.612, 'duration': 3.387}, {'end': 1166.859, 'text': "let's move this up.", 'start': 1165.999, 'duration': 0.86}, {'end': 1168.94, 'text': 'So this is the first, second, and third.', 'start': 1167.48, 'duration': 1.46}, {'end': 1174.002, 'text': "So path three, we're going to take that and path end will be zero.", 'start': 1169.02, 'duration': 4.982}, {'end': 1177.424, 'text': 'This one as well will be zero.', 'start': 1175.883, 'duration': 1.541}, {'end': 1179.845, 'text': 'And then this one will be zero as well.', 'start': 1178.024, 'duration': 1.821}], 'summary': 'Animating trim path end for three paths, setting path end to zero.', 'duration': 29.576, 'max_score': 1150.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU1150269.jpg'}, {'end': 1306.952, 'src': 'embed', 'start': 1279.803, 'weight': 4, 'content': [{'end': 1292.348, 'text': 'But SVG sprite sheet will actually export an HTML and CSS file with animation along with a SVG file that will contain all of the frames essentially.', 'start': 1279.803, 'duration': 12.545}, {'end': 1300.371, 'text': "So if we do that, it'll download a zip automatically, and if we open that up, let me, it's off screen.", 'start': 1292.448, 'duration': 7.923}, {'end': 1302.271, 'text': 'let me drag this over here for a second.', 'start': 1300.371, 'duration': 1.9}, {'end': 1306.952, 'text': "all right, you'll see, we have a 30 fps version and a 60..", 'start': 1302.271, 'duration': 4.681}], 'summary': 'Using svg sprite sheet exports html, css, and svg files with animations, offering 30 and 60 fps versions.', 'duration': 27.149, 'max_score': 1279.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU1279803.jpg'}], 'start': 861.337, 'title': 'Creating lines, duplicating, and svg animation process', 'summary': 'Covers creating lines and duplicating in adobe illustrator using specific tools and techniques, as well as the process of creating svg animations including steps and resulting file size of 89kb.', 'chapters': [{'end': 959.298, 'start': 861.337, 'title': 'Creating lines and duplicating in adobe illustrator', 'summary': 'Demonstrates how to create lines and duplicate them in adobe illustrator, using specific tools and techniques, including adjusting line properties and duplicating with keyboard shortcuts.', 'duration': 97.961, 'highlights': ['Using the line tool in Adobe Illustrator to create lines and adjusting their properties such as color and stroke width.', 'Demonstrating the process of duplicating lines using keyboard shortcuts and adjusting their positioning with the Direct Selection tool.', 'Utilizing keyboard shortcuts (Ctrl-C, Ctrl-F) to duplicate the lines and fine-tuning their positioning using keyboard arrow keys.']}, {'end': 1360.314, 'start': 960.358, 'title': 'Svg animation process', 'summary': 'Details the process of creating svg animations, including steps such as deleting unnecessary layers, animating the trim path end, and exporting the animation as svg sprite sheet with html and css files, resulting in a 30fps and 60fps version with a file size of 89kb.', 'duration': 399.956, 'highlights': ['The process of creating SVG animations involves deleting unnecessary layers to optimize the SVG code. The speaker deletes unnecessary layers in the SVG code to optimize it, ensuring that the exported file does not include unnecessary elements.', 'Animating the trim path end of each path in the SVG animation to control the timing of the appearance of the paths. The speaker illustrates how to animate the trim path end of each path in the SVG animation, controlling the timing of their appearance by setting the path end from 0 to 1 at specific points.', 'Exporting the animation as an SVG sprite sheet with HTML and CSS files, providing options for 30fps and 60fps versions. The process concludes with exporting the animation as an SVG sprite sheet, which includes HTML and CSS files, offering options for 30fps and 60fps versions with the 60fps version being smoother but larger in file size.']}], 'duration': 498.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU861337.jpg', 'highlights': ['Creating lines and adjusting properties in Adobe Illustrator using the line tool and adjusting stroke width.', 'Duplicating lines in Adobe Illustrator using keyboard shortcuts and adjusting positioning with the Direct Selection tool.', 'Optimizing SVG code by deleting unnecessary layers to reduce file size and improve performance.', 'Animating the trim path end of each path in the SVG animation to control the timing of appearance.', 'Exporting the animation as an SVG sprite sheet with HTML and CSS files, offering options for 30fps and 60fps versions.']}, {'end': 1570.798, 'segs': [{'end': 1415.051, 'src': 'embed', 'start': 1360.314, 'weight': 0, 'content': [{'end': 1370.463, 'text': 'all this is is just a div with a class of shape shifter and play in a background image set to the SVG Alright.', 'start': 1360.314, 'duration': 10.149}, {'end': 1372.705, 'text': 'so the SVG file, of course, is massive.', 'start': 1370.463, 'duration': 2.242}, {'end': 1382.255, 'text': "So you definitely want to take into consideration when you're creating these and if there's something that If you're working with a project where speed is important.", 'start': 1373.346, 'duration': 8.909}, {'end': 1388.723, 'text': 'What really makes this tick though is this sprite, the CSS file basically.', 'start': 1382.275, 'duration': 6.448}, {'end': 1389.444, 'text': "It's very simple.", 'start': 1388.803, 'duration': 0.641}, {'end': 1397.454, 'text': 'We have an animation up here called play 60 and it basically just changes the background position.', 'start': 1389.484, 'duration': 7.97}, {'end': 1400.68, 'text': 'on this play right here.', 'start': 1399.179, 'duration': 1.501}, {'end': 1405.904, 'text': 'So this play class simply adds the animation name, which is what makes the animation play.', 'start': 1400.74, 'duration': 5.164}, {'end': 1415.051, 'text': 'So, if you wanted to make this something clickable or you wanted to be able to control when the animation begins, based on JavaScript or some event,', 'start': 1406.345, 'duration': 8.706}], 'summary': 'Using a shape-shifter class with a background image set to an svg, controlled by a simple css sprite animation named play 60.', 'duration': 54.737, 'max_score': 1360.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU1360314.jpg'}, {'end': 1569.014, 'src': 'embed', 'start': 1478.359, 'weight': 4, 'content': [{'end': 1485.362, 'text': "Let's go to our CSS file and let's just add a couple rule sets here.", 'start': 1478.359, 'duration': 7.003}, {'end': 1491.105, 'text': 'Padding top 30 pixels.', 'start': 1488.804, 'duration': 2.301}, {'end': 1492.366, 'text': "Let's see here.", 'start': 1491.706, 'duration': 0.66}, {'end': 1495.027, 'text': 'I want to get this centered up for us.', 'start': 1492.386, 'duration': 2.641}, {'end': 1496.228, 'text': 'Margin auto.', 'start': 1495.588, 'duration': 0.64}, {'end': 1502.874, 'text': "And also let's make it so that it doesn't reset the animation.", 'start': 1498.333, 'duration': 4.541}, {'end': 1506.515, 'text': 'So animation fill mode will be forwards.', 'start': 1503.014, 'duration': 3.501}, {'end': 1513.277, 'text': "And that makes it so that the animation, once it gets to the last frame, it won't reset itself.", 'start': 1508.415, 'duration': 4.862}, {'end': 1514.397, 'text': 'All right.', 'start': 1514.077, 'duration': 0.32}, {'end': 1517.978, 'text': "And so let's make cursor pointer as well.", 'start': 1514.597, 'duration': 3.381}, {'end': 1522.339, 'text': 'All right.', 'start': 1521.819, 'duration': 0.52}, {'end': 1524.86, 'text': 'And I think that would be good.', 'start': 1523.019, 'duration': 1.841}, {'end': 1535.068, 'text': "So now if I just right click and reveal in Explorer and double click on it and also zoom up my browser so we can see this much more, it's like 500%.", 'start': 1525.32, 'duration': 9.748}, {'end': 1538.351, 'text': "We'll click on it and there we go.", 'start': 1535.068, 'duration': 3.283}, {'end': 1546.159, 'text': "stuff. so really I've only just scratched the surface of this shape shifter tool.", 'start': 1539.993, 'duration': 6.166}, {'end': 1555.207, 'text': "there are other possibilities, that where you can actually modify the shapes and it'll morph from two different shapes themselves,", 'start': 1546.159, 'duration': 9.048}, {'end': 1558.471, 'text': "and that's something that we'll take a look at in another lesson.", 'start': 1555.207, 'duration': 3.264}, {'end': 1562.162, 'text': 'All right, so hopefully you found that useful.', 'start': 1559.517, 'duration': 2.645}, {'end': 1569.014, 'text': 'And if there are areas that I could have improved, let me know in the comments, but otherwise give it a like and make sure you subscribe,', 'start': 1562.603, 'duration': 6.411}], 'summary': 'Css file updated with padding, margin, animation, and cursor properties. demonstrated the shape shifter tool with basic functionality. potential for further shape modification.', 'duration': 90.655, 'max_score': 1478.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU1478359.jpg'}], 'start': 1360.314, 'title': 'Animation techniques in css and javascript', 'summary': 'Covers using css sprites for animation, highlighting the use of a div with a class of shape shifter, a background image set to an svg file, and the impact on speed and performance. it also demonstrates creating a button animation with vanilla javascript, including specific css rules applied for padding, centering, and animation fill mode. additionally, it explores the basics of the shape shifter tool, including customizing cursor, revealing in explorer, and zooming the browser, leaving room for further exploration of its capabilities.', 'chapters': [{'end': 1415.051, 'start': 1360.314, 'title': 'Using css sprites for animation', 'summary': 'Discusses using css sprites for animation, highlighting the use of a div with a class of shape shifter, a background image set to an svg file, and the impact on speed and performance. it also emphasizes the role of a sprite css file in animating the background position.', 'duration': 54.737, 'highlights': ['The SVG file is massive, requiring consideration for speed and performance when creating it. The SVG file is described as massive, indicating the need to consider speed and performance when working with it.', 'The sprite CSS file plays a significant role in animating the background position, with a simple animation called play 60 that changes the background position. The sprite CSS file is highlighted for its significant role in animating the background position, featuring a simple animation called play 60 that alters the background position.', 'The play class adds the animation name, enabling the animation to play, and offers the potential for control through JavaScript or other events. The play class is noted for adding the animation name, facilitating the animation to play, and providing the potential for control through JavaScript or other events.']}, {'end': 1514.397, 'start': 1415.051, 'title': 'Javascript button animation', 'summary': 'Demonstrated how to add a class using vanilla javascript to create a button animation, with specific css rules applied for padding, centering, and animation fill mode.', 'duration': 99.346, 'highlights': ['The chapter demonstrated how to add a class using vanilla JavaScript to create a button animation.', 'Specific CSS rules were applied for padding, centering, and animation fill mode.']}, {'end': 1570.798, 'start': 1514.597, 'title': 'Shape shifter tool overview', 'summary': "Explores the basics of the shape shifter tool, including customizing cursor, revealing in explorer, zooming the browser, and discussing the potential for shape modification. the tool's capabilities are just briefly touched upon, leaving room for further exploration.", 'duration': 56.201, 'highlights': ["The shape shifter tool's basic features include customizing cursor, revealing in Explorer, and zooming the browser to 500%.", 'The tool has the potential for shape modification, allowing morphing from two different shapes, paving the way for future exploration.', "The chapter briefly covers the tool's capabilities, leaving room for further in-depth exploration and improvement."]}], 'duration': 210.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/P35hQOsW0xU/pics/P35hQOsW0xU1360314.jpg', 'highlights': ['The sprite CSS file plays a significant role in animating the background position, featuring a simple animation called play 60 that alters the background position.', 'The SVG file is described as massive, indicating the need to consider speed and performance when working with it.', 'The play class is noted for adding the animation name, facilitating the animation to play, and providing the potential for control through JavaScript or other events.', 'The chapter demonstrated how to add a class using vanilla JavaScript to create a button animation.', 'Specific CSS rules were applied for padding, centering, and animation fill mode.', "The shape shifter tool's basic features include customizing cursor, revealing in Explorer, and zooming the browser to 500%.", 'The tool has the potential for shape modification, allowing morphing from two different shapes, paving the way for future exploration.', "The chapter briefly covers the tool's capabilities, leaving room for further in-depth exploration and improvement."]}], 'highlights': ['Importing a vector drawable or SVG into shapeshifter.design allows for the creation of an animated SVG, providing flexibility in designing custom icons.', 'Utilizing a design app capable of SVG vector graphics, such as Adobe Illustrator, is crucial for creating and exporting SVG files to be used in shapeshifter.design.', 'The demonstration of transitioning from a material.io icon to a custom animated SVG illustrates the desired effect and serves as an example for the design process.', 'Demonstrating the process of importing the first SVG file into Shapeshifter, providing step-by-step instructions on saving the file, matching settings, and importing the SVG file into Shapeshifter.', 'Illustrating the process of creating a wave effect in Shapeshifter based on a specific demo example, offering practical guidance for replicating the demonstrated animation technique.', 'Explaining the properties, layers, and options available in Shapeshifter for editing SVG files, including the timeline, layers, grouping, clipping masks, and properties that can be modified, providing an overview of the available editing capabilities.', 'Detailing the animation capabilities of Shapeshifter, including animatable properties and adjusting animation duration, with specific examples of changing animation timing and its impact on file size, providing practical insights into animation customization.', 'Starting with a rounded rectangle of 20 by 20 quarter radius, then modifying it to have a triangle section, ensuring a one point fill for the triangle section.', 'Using the direct selection tool to manipulate anchor points and adjusting dimensions to 18 by 16.', 'Creating pixel art based on a 24 by 24 pixel grid.', "The tutorial emphasizes the importance of the 'path d' property, providing practical guidance on utilizing it for modification and animation.", 'The chapter provides step-by-step instructions on importing an SVG file, modifying path data, and animating the shape in Adobe Illustrator, followed by implementing the changes in a web browser.', "The chapter provides insights into using Adobe Illustrator for creating and modifying SVG files, offering a practical demonstration of the software's functionalities and their applications in web design.", 'The speaker demonstrates the process of converting a path to a clip path and animating the shape to grow, offering a clear explanation of the steps and their impact on the visual outcome.', 'Using the pen tool to create a bezier animation with specific stroke and fill properties.', 'Creating lines and adjusting properties in Adobe Illustrator using the line tool and adjusting stroke width.', 'Duplicating lines in Adobe Illustrator using keyboard shortcuts and adjusting positioning with the Direct Selection tool.', 'Optimizing SVG code by deleting unnecessary layers to reduce file size and improve performance.', 'Animating the trim path end of each path in the SVG animation to control the timing of appearance.', 'Exporting the animation as an SVG sprite sheet with HTML and CSS files, offering options for 30fps and 60fps versions.', 'The sprite CSS file plays a significant role in animating the background position, featuring a simple animation called play 60 that alters the background position.', 'The SVG file is described as massive, indicating the need to consider speed and performance when working with it.', 'The play class is noted for adding the animation name, facilitating the animation to play, and providing the potential for control through JavaScript or other events.', 'The chapter demonstrated how to add a class using vanilla JavaScript to create a button animation.', 'Specific CSS rules were applied for padding, centering, and animation fill mode.', "The shape shifter tool's basic features include customizing cursor, revealing in Explorer, and zooming the browser to 500%.", 'The tool has the potential for shape modification, allowing morphing from two different shapes, paving the way for future exploration.', "The chapter briefly covers the tool's capabilities, leaving room for further in-depth exploration and improvement."]}