Start free

Add to cart animation

A product is tossed into a cart, the cart squashes and rocks, and a count badge pops up.

Edit this in Mosso

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

Try a look

Shown in a sample look. In Mosso it switches to your brand in one click.

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

We read the colours and fonts from your home page. They stay in this browser.

The sample look, font and background are shared.

Free download

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

What it's good for

It is 600 × 600 pixels and 2.4 seconds long, and it plays once, then rests on its last frame. The background is transparent, so it sits on top of any page, photo or video.

The colours come from your brand kit. Change the timing in the editor.

  • Success, error and empty states in your product
  • Buttons that react when people tap them
  • Onboarding screens and product tours
  • Online shops: product pages, cart and checkout

How to use it on a website

  1. Pick your brand above, then download the dotLottie file.
  2. Add it to your site's files, for example as /animations/add-to-cart.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.

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.

For the steps in Mosso, read Export and put it on your site.

Use it in code

Download the file, then copy the code for your platform. It plays once, and it holds a still frame for people who ask for less motion.

  1. Put add-to-cart.lottie in your site's animations folder, so it loads from /animations/add-to-cart.lottie.
  2. Paste this where it should play.
index.html
<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

<dotlottie-wc src="/animations/add-to-cart.lottie" autoplay data-still="0.431"
  role="img" aria-label="Add to cart"
  style="display: block; width: 200px; height: 200px"></dotlottie-wc>

<script>
  // People who ask for less motion see a still frame: data-still is how far in, from 0 to 1.
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    const players = document.querySelectorAll('dotlottie-wc');
    players.forEach((el) => el.removeAttribute('autoplay'));
    customElements.whenDefined('dotlottie-wc').then(() => players.forEach((el) => {
      const player = el.dotLottie;
      if (!player || !el.dataset.still) return;
      const show = () => player.setFrame(Math.round(Number(el.dataset.still) * (player.totalFrames - 1)));
      if (player.isLoaded) show();
      else player.addEventListener('load', show);
    }));
  }
</script>

Lottie in HTML: setup and common problems

Good to know

  • Keep feedback short

    One or two seconds is enough for app feedback. End on a clear final frame so the message stays after the motion stops.

  • Play it on the action

    Start the animation the moment the tap or submit happens, so it feels connected to what the person did.

  • Pair it with words

    Put a word like Saved or Done next to the animation, so the message is clear to everyone, including screen reader users.

  • Respect reduced motion

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

All app moments

Questions

Is this add to cart animation free?

Yes. A free account lets you download up to 50 library animations a day. You may edit these animations and use them in personal and commercial work, including client projects. Third party parts keep their own licences. Keep the supplied notices and credits when you share them. Mosso does not require a credit for its own work. The restriction on reselling Mosso templates does not limit rights granted by third party licences.

Can I change the colours?

Yes. Pick a sample look above to see how it changes. Open the Mosso project to edit its layers, timing and effect settings, and add your logo. Imported files may have fewer editable parts.

Should I download Lottie JSON or dotLottie?

dotLottie is the same animation in a zipped file, so it is smaller: this one is about 6.0 KB instead of 12 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 with a transparent background or PNG frames, all from the same project.

Will it work in my iOS, Android or React Native app?

Export Lottie JSON and check it in your mobile player. Support varies by player and animation.

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.

Edit this in Mosso Start from a blank canvas