15%off

How to Create Looping Cat Loader Animation

Duration: 10:47

In this tutorial, you can learn how to create a looping cat loader animation.

Step 1 - Setting Up Your Canvas and Elements

Begin by creating a new project with a 400x400 pixel canvas. Choose a cat illustration from the library (e.g. "Sleepy Cat") and place it on the canvas. The layers are organized so that the tail, legs, belly, and body are separate. The body stroke has a width of 52 points, with a dash value set to 60.

Step 2 - Aligning the Origin Points

The primary challenge is to accurately position the origin point within the composition. This initial alignment is crucial, as any misalignment can disrupt the animation's integrity, especially since the origin point must match specific parts of the character rather than simply aligning with the overall composition. To begin, activate the grid overlay. By enabling the grid, you establish a visible reference point behind the character, allowing precise alignment with various body parts.

Now select the character's head layer and, while holding the shift key, extend the selection to include all the layers below it. With the command key, then deselect the body stroke momentarily before reselecting it. This sequence of actions isolates the origin of the body stroke, ensuring it becomes the primary reference for alignment. Once identified, carefully align the cat’s body stroke origin to the central point on the grid by zooming in and adjusting the character’s position until this alignment is achieved.

With the body stroke origin now accurately centered, move on to align the tail and legs, as these components will later require rotation keyframes that hinge on this same origin point for consistent animation. Enable the "Snap to Grid" function, ensuring all adjustments automatically align with the grid structure. Position the tail's origin point at the grid’s center, followed by repeating this step for the legs layer.

Step 3 - Animating the Body Stroke

After setting up our initial parameters, you can proceed to the animation stage. First, zoom in on the timeline to achieve a finer level of detail, making it easier to control timing and keyframe placements accurately. With the timeline magnified, the next step is to select the "body stroke," "body", and "belly" layers in the animation panel. Move forward these layers by a single step on the timeline, positioning them precisely where you want the animation to begin.

It’s time to create a dynamic effect by animating the stroke dashes. For this, you’ll add a stroke dashes keyframe for each of the selected layers. This keyframe will serve as the baseline for the animation’s initial dash appearance. Now, you’ll move forward in the timeline, stopping just two frames before the two-second mark. At this frame, you can adjust the dash value by selecting the current value of "60" and increasing it to "300". This modification will lengthen the appearance of the dash, giving the impression that the character's body has elongated.

Next, you’ll advance forward past the two-second mark by an additional four frames. At this point, you’ll select the initial keyframes and use Command + D on Mac or Control + D on Windows to duplicate them. This duplication essentially resets the dash to its original appearance, creating a smooth return to the starting form. When played back, this sequence will show the stroke gradually expanding and then snapping back, providing a bouncing effect.

Step 4 - Adding Tail and Leg Rotation

To address the misalignment between the tail and legs, which do not follow the same movement path, the first step is to add rotation keyframes specifically for these elements. Now you need to select the tail and legs and go to rotate.

With the initial keyframes in place, add two additional keyframes for further refinement. You’re going to adjust the degree value rather than the "turn" setting. By highlighting the degree field and holding down the shift key while using the up or down arrow keys, the rotation value can be incremented by 10 degrees at a time. Adjust the degree value upwards until it reaches approximately 155 degrees.

To finalize the motion, duplicate the initial two keyframes over the top of the current keyframes using the "Control or Command D" command. This duplication ensures that the tail follows the movement path smoothly, resulting in a well-aligned animation.

Step 5 - Rotating the Entire Cat

Now it’s time to bring all the elements together. The next step involves adding a rotation effect to the uppermost layer of the “sleepy cat” element. Begin by selecting this topmost layer, then navigate to the “Animate” menu and choose the “Rotate” function. Immediately upon selecting it, set the rotation parameter to "2", which will cause the cat element to rotate through two full loops.

Now move to the timeline on top of the third column of keyframes. With these keyframes highlighted, adjust the parameters by setting the degree rotation down to zero, then entering 60 degrees for a slight change in orientation. Once set, progress through the timeline to the last keyframe and then go back one step. Now you have to reduce the rotation back to zero to reset the element’s orientation.

Playing the sequence from the beginning, you should see the cat completing its rotations. At this stage, the animation looks polished and could be left as it is, but there’s an option to add further refinements for even greater visual impact.

Step 6 - Refining Animation with Easing

To begin, select all the initial keyframes in our animation sequence, which represent the starting points for each element’s movement. By applying a slight easing function here, specifically an "Ease In Sine", you introduce a smoother, more natural acceleration as the animation begins.

Next, you’ll move on to the central keyframes. Selecting all of these middle keyframes, you apply the "Ease Out" function. This adds a subtle deceleration effect, giving the animation a touch of extra polish by smoothing the motion.

With these adjustments in place, you’ll disable the grid to get a clearer view, then play the animation to observe the seamless looping effect you’ve created. This technique can be extended to other illustrations, allowing you to replicate the process.

Get the 15% discount for one year of SVGator PRO
Get discount