Big announcement text animation

A bold headline pops in word by word over a burst of confetti.

Preview on
Try a brand

Smooth motion. Confident and clear. Smooth moves with a gentle landing.

Edit this in Mosso

Change anything, then export a GIF, an MP4 or a transparent video.

Free download

Free for your own projects and client work, including commercial use. Read the licence

What it's good for

It is 1080 × 1080 pixels and 3.5 seconds long, and it plays once, then rests on its last frame. It comes with a background, which you can switch off above to get a transparent file.

The colours, fonts and timing come from the brand kit you pick. Each brand has its own motion style, so the same animation moves slower for a calm brand and quicker for a snappy one. Type in the box above and the words change as you go.

  • Launch posts on Instagram, LinkedIn and X
  • The top of a product update email, as a GIF
  • A "we just shipped" moment on your website
  • The opening slide of a presentation
  • Titles and captions for videos and reels

How to use it on a website

  1. Pick your brand and words above, then download the dotLottie file.
  2. Add it to your site's files, for example as /animations/big-announcement.lottie.
  3. Paste the code where the animation should play.

Without code

  • Webflow: upload the Lottie JSON file in the Assets panel, then drag it onto your page.
  • Framer: add a Lottie component and give it the JSON file.
  • WordPress: use a Lottie block plugin and upload the JSON file.
  • iOS and Android: add the file to your app and play it with the official Lottie library.

Need it as a GIF or a video? Download the Lottie JSON and use the free Lottie to GIF or Lottie to MP4 converter, or check any file in the Lottie viewer.

index.html
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc/dist/dotlottie-wc.js" type="module"></script>

<dotlottie-wc src="/animations/big-announcement.lottie" autoplay
  style="width: 100%; aspect-ratio: 1 / 1"></dotlottie-wc>
BigAnnouncement.jsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export function BigAnnouncement() {
  return (
    <DotLottieReact
      src="/animations/big-announcement.lottie"
      autoplay
      style={{ width: '100%', aspectRatio: '1 / 1' }}
    />
  );
}
main.js
// npm install lottie-web
// In your HTML: <div id="big-announcement" style="width: 100%; aspect-ratio: 1 / 1"></div>
import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('big-announcement'),
  renderer: 'svg',
  loop: false,
  autoplay: true,
  path: '/animations/big-announcement.json',
});

Good to know

  • Keep it short

    Moving words are harder to read than still ones. Aim for two to five words and let the last one settle before the animation ends.

  • Give people time to read

    In a video, hold the finished text on screen for at least a second after it lands.

  • Keep the words in your page

    On a website the animation is a picture of your words. Put the same words in the page as real text too, so screen readers and search engines can read them.

  • Respect reduced motion

    Some people ask their device for less motion. Check prefers-reduced-motion and show a still frame for them instead.

Questions

Is this big announcement animation free?

Yes. Download the Lottie JSON or dotLottie file above for free, with no account. You can use it in your own projects and in client work, including commercial work. You just can't resell it or give it away as a template or stock file.

Can I change the colours and the words?

Yes. Pick a sample brand above to see how it changes, and type your own words in the box. To use your own colours, fonts and logo, open it in Mosso, where every layer and keyframe is editable.

Should I download Lottie JSON or dotLottie?

dotLottie is the same animation in a zipped file, so it is smaller: this one is about 23 KB instead of 154 KB. Use it with the dotLottie players for the web, React, iOS and Android. Pick Lottie JSON when a tool asks for a .json file, like Webflow or lottie-web.

Can I get it as a GIF or a video?

Yes. Open it in Mosso and export a GIF, an MP4, a WebM video or PNG frames, all from the same project.

Can I still edit the words after I download the file?

In the Lottie file the letters are saved as shapes, so they look the same everywhere, even where your font isn't installed. To change the words later, edit the project in Mosso and export again.

Make it yours in Mosso

Change the words, colours, timing and size, add your logo, and export Lottie, GIF, MP4 or transparent video. Or start from a blank canvas and make something new.