A typing animation is usually built with JavaScript, but many site builders do not let you add scripts to a headline. A GIF sidesteps that: it is an ordinary image, so anywhere you can place a picture, you can place a typing animation. Make one with the typing text GIF maker, then follow the steps for your platform.
Plain HTML
Upload the file next to your page and add an image tag. Set the width you want it to appear at, and always write alt text with the full sentence, because screen readers and search engines cannot read text inside a GIF.
<img src="/typing-text.gif" width="600" alt="We build websites, mobile apps and online stores.">WordPress
Add an Image block and upload the GIF. Choose “Full size” in the block settings: WordPress makes resized copies of uploads, and the resized copies are often still images.
Webflow, Wix and Squarespace
Drag in an Image element and upload the GIF. All three keep the animation as long as you do not apply their built-in image filters or cropping, which can flatten it to one frame.
Carrd, Framer and Notion
Use an Image element (Carrd, Framer) or an /image block (Notion). Notion plays GIFs inline; it does not play animated PNG, so download the GIF version for Notion pages.
Keeping it sharp and light
- Make the GIF at the size it will be shown, or at double that size for retina screens. Scaling a GIF up makes it blurry.
- Fewer colours and shorter phrases make smaller files. A one-colour headline on a plain background is usually well under 200 KB.
- On a coloured or photo background, download with a transparent background. If edges look ragged, set “Page colour it will sit on” to the colour behind the GIF, or use the animated PNG download for smooth edges.