In this tutorial we’ll explore animating with text effects and outlines. With a simple setting you can add the outline effect to any text object on your page without code. This effect can be used to make your headlines stand out, or to make any text section more visible. Let’s see how to set these text effects in the Hatch editor!
We’ll use one of the Hatch portfolio templates for this walkthrough. Remember to hit the ‘remix this’ button at the top right to open the site in the editor.
How to add a text outline effect
First, let’s select a text object by clicking on it. For now we’ll be working on the headline text shown above. Now view the right sidebar for the ‘effects’ section. This template’s headline already comes with a few built-in effects, but we can just add another one by clicking the plus sign. Then you’ll find the ‘text outline’ effect at the very bottom of the list:
As you can see, adding the effect immediately gives the text an outline. You can change its width and color through the settings within the effect we just added, like this:
There’s one more setting called ‘placement’, which lets you pick between ‘outside’ and ‘center’.
‘Outside’ will make the outline start at the edge of the letters and grow outward according to its width value. The examples shown above use this configuration.
‘Center’ will grow both in and out of the letters. This way the center of the outline is always at the edge of the text. Here’s an example:
Animating Text Outline Effects
At the start of the page, you may have noticed we made an animation out of the text outline effect! The outline grew shortly after the title appeared on the page. How can we make this work in the editor?
This is done through the use of no-code interactions. You may be familiar with them if you checked out some of the animation tutorials we have on our blog.
To start, let’s pick our headline again and add an interaction through the right sidebar. This template already has an interaction for the object, so let’s delete it before we move on. Just press on the ‘trash’ icon like shown below:
By picking ‘when page loads’, the animation will start as soon as the site is loaded in. This is the trigger of the animation. As you just saw, after picking our trigger, suddenly there’s a lot more options to choose from. These are the ‘blocks’ that make up the behavior of the animation.
Adjusting the timing of your text effects
We don’t want the animation to play right away, so we’ll add a ‘wait’ block to the list:
Now after waiting for 3 seconds, we want the outline to start growing. We already have a text outline effect on our object, so all we need to do is animate the ‘width’ property.
To do so, we’re going to add the change properties block. This will let us animate ‘width’ according to our specifications. Let’s see how to add and configure this block:
This block will make the animation change one of the object’s properties, which we select in the configuration. Since we selected ‘width’, that value in the text outline effect will be changed to 6 (the new value we set in the animation) once the animation plays.
But, we didn’t want that change to be instant, so we clicked on animate at the bottom. This makes the change take effect over time, so that the outline can grow until it reaches the desired value. We then picked 1.5 seconds for the duration of the effect.
Now if you press preview, you’ll see how the outline neatly comes into view after the first few seconds. Adding simple text effects like these can make your content more engaging without code! Try it out yourself in the portfolio template we used for this walkthrough.