SVG Shape Morphing Animation

1. Introduction: Hello, guys. Good to see you back. Once again, I am back with a new class today in this class, we are going to learn and today we are going to work with Morph VG animation. As you can notice, our shape continuously transform into another shape. First, it's become a circle. Then this circle become a star. After that, this star become a hard shape. Again, it becomes circle. It is called MRF SVG animation, and in that tutorial, we are going to learn how we can create it using the help of SA. What are you waiting for? Let's get started. 2. SVG Shape Morphing Animation part 1: Hello, guys, good to see you back. Once again, I'm back with a new project related GSP animation. And today we are going to work with morph VG animation. As you can notice, our shape continuously transform into another shape. First, it's become a circle. Then this circle become a star. After that, this star become a hard shape. Again, it becomes circle. It is called morph SVG animation. And so in that tutorial, we are going to learn how we can create it using the help of JSA. So let's start the practical and see how we can build it. So as you can see side by side, I open my z Studio code editor and my browser using light server extension, and I already created an TML document named index dot HTML. With that, I already create squib dot s file. For now, this file is empty. Now, let's start with TML. At first, inside the body tag, I'm going to take a wig tag, some Ty VG. Also we need to define the view box area of this SVG image. Sometimes view view, view box equal to inside the double codes, zero space, zero, hundred by 100. So here we take wed 100 and height, 100. Basically, it's going to define a scalable victor graphic container, where we can draw any kind of scalable victor graphic shapes. Now inside this VC tag, I'm going to draw shape using but tag. I'm going to take but but. Also I'm going to close the tag here to draw the shape, we need to use D attribute, command. Type D equal to inside the double codes, I'm going to pass some code. Here I'm going to pass this value, and I'm going to set this file. Apple set this file, as you can see, you draw a circle using Puth tag. At first, we need to define the viewox area to draw this circle using Puth tag. Here we start the view boox from 00 top lip corner to 100 by 100 bottom lip corner. That's why our Vevox area is a square box to draw this circle, here we use this Path command. M is the starting point. M stands for mop two. It said the starting point of drawing. And next we use arc command to draw the circle shape. A scans for arc command. And after you use the arc command, we define the radius, Rxdius and RY radius, which is 40 and 40. After that, we provide XxS rotation value, large arc flag value, spi flag value, and X v. At last, we cross the path using Z command. If you are familiar with VigiGraphi then you can understand it properly. Otherwise, you can extract this circle shape value from any vector graphic software such as Illustrator. Otherwise, also you can use online websites to get this shape. By the way, our main topic is not Vigigraphi. Our main topic is CSAP animation. So to create the shape, next, we need to import the libraries. First, we need to import the GSP library. For that, here, I'm going to use this website, and we need to copy this link, and we need to paste share. It is SAP Syrian Link, and you're already familiar with that. After that, we need another library, another most important library, which is Mart plug in Library. Also, you can get this Mr plug in Library from this website. Let me show you. So from here, you can use this link, want to copy this link, more VG flag mean dot s. Copy this link and back to the with the studio code. Then I duplicate this line and I'm going to replace the source code with this code, and I'm going to set this file. Up to set this file, I'm going to style the web page. For that, I'm going to jump into the style section, and first, I'm going to target the body tag. Here I'm going to select body. And inside the class, first, I'm going to define margin. Margin, I'm going to make it zero. After that, I'm going to define background color, background, and here I'm going to use background color, darker gray. Two, two, two. Next, I'm going to use dist propriety. Display and here I'm going to use diste flix. Here I use display property because we need to align this circle middle of this page. After that, I'm going to align this element. So to use justify content center, align item also center. I' going to center this element vertically and horizontal. I'm going to sub this file. Upset this file, as you can see, you do not center this element because we do not provide height to this bony tag. Here I'm going to assign height, height, and here I would use 100 100 VH height and I'm going to set this file. Up step this file, as you can see, it centered the element vertically and horizontally. Then I'm going to target the SVG tag. I'm going to style the SVG element. Here, inside the Calibra says, I'm going to define within height. I'm going to set width 300 pixel, also height, 300 pixel, and I'm going to set this file. After set this file, as you can see, it reduces the size of the circle. Next, I'm going to change the color of this butt tag. Here I'm going to selt the Pt tag, but I'm going to change the fill color of this butt tag, fill, and I'm going to make it white, fully white. Hastag if if if, and I'm going to set this file. After set this file, as you can see, now the circle color become white. Next, I'm going to leak this script dot js file after this CDN. Here, I'm going to type Script tag, script source, RC, source I'm going to provide script dot js five and I'm going to set this file. This is it for the first part of this tutorial. At the next part of this tutorial, we are going to work on script dot Jsfive. We are going to work with SAP animation. Thanks for watching this video, Stune for the next part of this tudio. 3. SVG Shape Morphing Animation part 2: Hello, boys. Good to see you back. This is the second part of this project, and here we are going to start GSAP animation. So at first, we need to tell our GSAP to activate morph SVG plugin. For that to type SAP, dot GSApdt and from JSAP we need to run register plug in command. Register plugin. Then inside the round brass, we need to register morph VG plug in. So to type morph VG plug in and semicolum two in this line. After that, we need to select this Put tag, and to select the Put tag, we are going to use its ID, so I'm going to assign an ID to this butt tag ID, and our ID name is morph underscope PT. I'm going to sub this file. After I set this file, I'm going to copy this ID. Up to copy the ID here, I'm going to select the element. I'm going to define a variable using const command, const, and our variable name is PAT, equal to document dot here I'm going to use G element by ID method. Get element by ID, and inside the round dresses, inside the double codes, I'm going to provide the ID name. Which is morp underscoePath, and semicolon to end this line. Now, after select the path element, we need to define the shapes. Here, we need to create an JavaScript array. To create an array, I'm going to use const and our arrayMs shapes equal to inside the squared ds, here, we need to put all the shapes that we are going to use, such as circle, stardharg. It's up to you what kind of shape you are going to use. But before I'm going to show you from where you can get these kind of shapes. For that, you need to search SVD shapes, and it provides various type of websites that provide SVG shapes such as this one. So if I open this website, as you can see, it provides a lot of shapes, and all the shapes are made with SVG code. So from here, suppose I'd like to go with this star shape, so I select this one. So I copy this code of the star shape, and I'm going back to the with the studio code editor. And here I'm going to paste the code. But I don't need everything from this code. I just need this command, this decommand, this wave, from this point to this point, from point to z point. Copy this one and remove all the code. And here we need to pass this code inside the dowel codes. This is what actually we need to create various shape. I already extract the shape of circle, star, and heart. I'm not going to use this code. I just try to show you from where you can get this shape. It could be any shape, such as animal, bird, whatever you can use. So I'm going to remove this one. At first, I'm going to put this command. Copy this command, this circle command, and I'm going to put it here. Next, I want to convert this circle into a star command. I already copy the star code, so I'm going to put it here. Here I'm going to paste the code. It is for the star, and this one is for circle. After that, I want to convert this star shape into heart shape. So I pass this code, and I'm going to set this file. First, it's going to convert this circle into star, then it's going to convert this star into half shape. One most important thing I forgot to tell you. Let me show this mob plugin is not free. This SVG mop plugin is a GSAP club plugin. For local use or production, you need subscription, you need membership. But for educational purpose, you can use it. Now, let's work on shape morphing function. I'm going back to the scrypt JS file. And after it, here, I'm going to define another variable, late index, index equal to z. Now, what does that mean? This variable going to tracks which shape we are currently on, such as circle, star or heart. Then I'm going to define a function, some type function, and our function name is morph, underscoe morph, shape. Then inside the lissT function going to trigger the shape morphing animation. It's going to calculate shape going to morph next. Then it's going to animate the morph. It going to update the index. Also recursively call itself to create loop. Next inside the function, I'm going to define another variable, Soute const our variable is next shape. Next shape, equal to here, I'm going to select the next shape, equal to Hey shapes inside the square basis, first, I'm going to provide the index. Inside the round bases, her pass, index, index plus one. Then I'm going to use reminder sin and Hemo type shapes dot length. He reminder with shape dot legth and semiclum to in the lie. Now you might have potion what basically we did here. Basically, here we pick the next shape from these array shapes. Index plus one going to get the next shape. And modular shaped dot length ensure that it's going to start the loop again when it reached the end, reached the end of the array. After I reach the heart, again, it going jump into the subtro. If you extract the length of the shapes, it's going to return three hair because we have total three array element because we have total three array value. If the index value is two, suppose index value is two and if I plus two with one, then it become three. I I try to make the remainder, it going to return zero. So we're going to back to the first shape again. I don't want to be so much technical, I want to extend what going here. After that, we need to use GSAbtTFunction, two method, so type sa dot two. Then inside the round dresses, at first to provide the path, the exact path. Then after inside the aliases here first we target the element path, then inside the round dresses, we need to use these properties. At first, I'm going to use duration property, duration and I'm going to make it 2 seconds. I'm going to pass two here. After comma, then we need to pass morph VG value. Morph is VG, here, we need to pass this value, next shape, some type, next shape. And for smooth transmission, I'm going to use es mode. Let's back to the GSP document. As you can see, from here, I'm going to use Iout is mode. Power one inout, this one. It starts slow then go first and end slow, and I'm going to copy this veil and back to the code editor here I'm going to put this property and veil. After that, we need to use a Colvec function, which is complete, sometime on complete. On coomplete, inside it, I'm going to use a arrow function. Here inside this function, we need to update the index value. Solo type index equal to inside the round sss, Amtype index plus one, and then modular reminder site shape dot, shapes dot length, and semicron to lime. It runs the function upturn morph finish, which update the index and recursively call morph shape function to start the next morph. Also, I'm going to call the morph function inside it, morph shape. Basically it's going to create the infinite morph loop. Then outside the function outside the morph shape function. Again, I'm going to call the function morph shape, this one, and I'm going to set this file. After I set this file, as you can see, here you can notice from circle two, it becomes star, then it becomes hard. Again, it becomes circle. And this will happen with smooth transition because of GSP animation. So I hope now to clear for you how we can create more ZG animation. Thanks for watching this video, stay tuned for our next project.