Create an Animated Cat Loader | SVGator

In this tutorial, you will learn how to create a Looping Cat Loader Animation in SVGator. This technique can be extended to other illustrations, allowing you to replicate the process.

00:16 Set up the canvas and add the illustration
01:45 Animate the body stroke
06:50 Add rotation keyframes to the tail and legs
08:20 Add rotation to the cat top layer
09:28 Add easing function to keyframes

Here's a detailed guide on how to create and animate a Looping Cat Loader, emphasizing the most critical steps.

Prepare
Set Up Canvas & Elements: Start a 400x400 canvas, and add a "Sleepy Cat" illustration with separate layers for each body part.

Align Origin Points: Enable the grid overlay for precise positioning. Center the cat’s body stroke origin on the grid, then do the same for the tail and legs.

Animate
Animate Body Stroke: Select body stroke, add a keyframe at the start, then increase the dash value from 60 to 300. Duplicate keyframes to reset the dash, creating a bounce.

Rotate Tail & Legs: Add rotation keyframes to the tail and legs, adjusting to 155 degrees, then duplicate keyframes for smooth rotation.

Rotate Cat: Apply two full rotations to the top cat layer, adjusting rotation to 60 degrees, then reset to zero for a full motion cycle.

Add Complexity
Add Easing: Use "Ease In" and "Ease Out" functions on keyframes to smooth motion, then disable grid and review animation.

Preview
Preview the Animation: Play the animation from the beginning to see the effects of your changes.

Let's connect:

SVGator is an online SVG (Scalable Vector Graphics) animation creator.

[DimRusev]

I'm starting to work with SVGator, Great tutorial, Thank you!
A few years ago, when I found that I could create animations with that kind of seamless blending effect on strokes by separating the layers' strokes on top and fills on the bottom, aaah... that opened so many possibilities!

[i-will-bite]

I'm definitely doing this xD been using this app for a while and it was always fun but this i REALLY like