in previous tutorial we learned about the basic of anime.js now in this video
we will show you how to combine images with SVG and create more advanced
animations like motion path SVG morphing and line drawing ready let's check it out
so one of an images cool feature is you can move any element on the screen using
SVG path and here is the example page that we are
going to work on I will show you how to create a motion path and move this emoji
along first we need to create the SVG path. you can use Photoshop Illustrator or
any tools you like but here's my favorite path builder on codepen first I
will resize the SVG to an appropriate size
then disable snap grid options and reset path
you can drag the existing point and use control click to add a new point
when finish - enable close path to create a loop
and that's it you'll have the path code at the bottom right
next I'm going to set an SVG tag
and set the size to match the path we've just created
then for path we'll set the stroke color to red
and fill to none and paste the code from builder
then let's work on the animation first include the library using script tag
then create motion paths using path method
and pass our path element into it
next create animation the same way we did in previous video
we will target our emoji
and use translate X and Y to move it
now we will use the motion path we've just created as a function to get the
current x and y position
then set easing to linear
and the rest of the animation properties
it works but the position is off this because we haven't moved the element to
the starting point before we animate it
create a wrapper to wrap both SVG an emoji together
then use absolute position to set the starting position
also don't forget to set the wrapper position to relative to make the child element absolute
position works
motion path also support rotation you can add it to animation like this
but for this example I don't think it's a good idea
the next popular feature we are going to talk about is SVG morph it allows you to
morph any SVG polygon into another. The only requirement is all shapes in the
animation needs to have the same number of points let's work on the example
first let's create SVG tag
and then add polygon tag I will set the stroke color to none
fill color to red
and then we are going to need points to define the shape let's go back to the
path builder again creating new shapes that you like and
copy the code
the current code is in path format to convert to points you will need to delete
M at the start and Z at the end
then replace L with comma
and here's our shape
now create a new shape we want to morph into from the old one both shapes need
to have the same number of points so you cannot add a new one
all right that should do it let's copy the code
let's create an animation
target the polygon element
then we use points property to morph the shape
the first value object we will use points from the first shape
and then do the same for the second shape
then add the rest of the animation properties
to keep the animation seamless you can also add alternate direction property
and that's all about SVG morphing next let's talk about line drawing line
drawing is very cool feature especially to create a text writing animation but
before we get to that we need to understand about SVG stroke first here
is a good example on codepen we already have an SVG path and now I'm going to
add a stroke-dasharray property to it
as you can see the stroke-dasharray property turned the path into a dash and if
I increase the value the dash lengths and the gap will be increased - and if
we keep increasing the value to some point the length of a single dash will long
enough to represent the entire path
and now here's when stroke-dashoffset comes to play this property will add an
offset to the dash like this
so as you can see if we animate the dash offset we can create a line drawing
animation let's go back to our example for this
tutorial I'm going to use Photoshop to create path first use the text tool and
type anything you like
then select the layer right click and select create work path
then add a layer menu select create new fill layer it doesn't matter which color
you choose we only need just the path code finally delete the original text layer
and then export it as SVG
click export all and save the SVG file
then open it with text editor and copy the path
next create SVG tag
then create path I will set a stroke color to red
and stroke width to 3
then paste a path code from Photoshop
the text is ready next I'm going to set the stroke dash properties in the CSS file
I will set the dash array to 1,000
and dash offset to zero
next we are going to work on the animation
first target path element
then set the stroke-dashoffset property using library provided setdashoffset
value followed by the target offset which is
zero then add the rest of the animation properties as usual
and that's all for this tutorial hope you guys enjoy if you want to see more
dev tips and tutorials subscribe our channel to stay tuned thanks watching
see you next time bye