Skip to content

Pulse N times: a “New” badge ​

The badge pulses three times and stops: enough to be noticed, not enough to nag. A click (or your page) pulses it again. The Pulse N times template plays one segment a set number of times, then rests. The pictures use the sample comp New badge (folder Interactive examples).

Try it: Watch it pulse three times, then click it. How it works: pulse loops its segment with Repeat: 3 times; when the third pass ends it goes to rest, which plays nothing; a click or the event pulse starts it again. The file is the .lottie the panel wrote, played by dotlottie-web, the player a web page uses.

Loading the player…
Live · dotlottie-webDownload .lottie

In After Effects ​

  • One marker, pulse: one pulse that starts and ends at rest. After the last pass the player rests on the segment's first frame (measured), so the first frame must be the still badge.

1. New machine → Pulse N times ​

The Pulse machine

  • pulse 1 is where it starts. Its Repeat is a number of times, Times 3. That is the loopCount of the file: the segment plays that many times in all, then when it finishes fires (measured on dotlottie-web 0.80).
  • rest 2 plays nothing and listens for a click. The listener also takes the event pulse 3, so your page can call for attention again.

2. On a web page ​

js
// something new arrived:
player.stateMachineFireEvent("pulse");

Variations ​

  • An unread badge, a “try me” hint on a button, a reminder: attention, a few times.
  • Change the count: pick pulse and set Times.

AXO for After Effects