How to Create a Text Reveal Animation

In this video, you’ll learn how easy it is to create a text reveal animation, that looks like a typing effect.

Step 1 - Create a Mask or a Clipping Path

To create a text-revealing animation, you’ll need to create a mask or a clipping path for the text line. To do so, select the rectangle from the shapes drop-down.

Draw the first rectangle over the first text line, and make sure you cover it all. From the elements list, drag the rectangle right above the first text element.

To transform the rectangle into a clipping path for the text line, select both the text element and the rectangle, then right-click, and “Create Clipping Path”.

You can see that a clipping path folder has been created, and it contains the rectangle.

Select the rectangle, choose the transform tool from the toolbar, or press V on your keyboard, and drag the rectangle to the left until the text is no longer visible.

Step 2 - Animate position

Next, go to the animators list and choose “Position”, or you can press Shift + P on the keyboard.

Drag the play head to the 0.5 second mark and move the rectangle back to its initial position, above the text. You can see how the animated clipping path reveals the text, imitating a typewriting animation.

Step 3 - Speed up the animation

To speed up the animation, simply bring the second keyframe closer to the first one. Do the same for the second text line.

Step 4 - Repeat the steps for the second text line

Draw a rectangle to cover it entirely, Then bring it right above the text element here in the elements list. Select both of them, right-click, and click “Create Clipping path”.

Select the rectangle from the clipping path folder and drag it to the left. Select the position animator for it, and place the playhead at the 1-second mark on the timeline.

Drag the rectangle back to reveal the text, just like that. Then hit play to see the result.

Step 5 - Adjust timing

The two text lines start revealing at the same time. To fix this, you need to add a little delay to the second clipping path. Select the two keyframes and drag them until the first one is at the same mark as the last keyframe from the other rectangle.

Play the animation again. Speed up the second rectangle as well. Then hit play again to preview the animation.

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.

How to Create a Clipping Path Animation? | SVGator Help

Clipping paths can be transformed and animated just like regular SVG elements. You can import them from other tools or create them from scratch in SVGator.

SVGator

How to Animate Clipping Masks | SVGator Tutorial

Learn how to create clipping masks from scratch in SVGator and how to use them in your animation. You can also use multiple groups as clip masks. Try now!

SVGator