Create an Animated Cat Loader | SVGator

Download static SVG files: https://cdn.svgator.com/assets/pub/ca...

Welcome to our channel. These tutorials are for SVGator - the most advanced SVG animation creator: https://www.svgator.com

Your teacher today: Matt Gordon of https://www.g5designs.art/

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.

Subscribe:    / @svgator  

Let's connect:
Facebook:   / svgator  
Instagram:   / svgatorapp  
Twitter:   / svgatorapp  
LinkedIn:   / svgator  

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