SVG Morphing generates animations between different shapes. You can define your shapes through an SVG path.
Controls
There are three different ways to trigger the animation:
Animation: an infinite loop between shapes;
Rollover: when the mouse cursor (finger on mobile) reaches the element;
Scroll: the animation starts only when you are in the scroll area
Animations
Animations between shapes are managed in this tab. They could also be handled in a single path.
Speed transition: the transition speed between shapes;
Step duration: the number of seconds before the next transition;
Easing: the type of easing;
Equation: the function of the easing.
Path
These are the attributes of a single path:
Numbers: the sequence of the coordinates;
Transform: the rotation;
Position: x and y position;
Style: fill image, fill color, stroke color, stroke width;
Animation: Speed, step duration, easing type, and speed function.
