> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-seasonal-effects/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-seasonal-effects/getting-started/effects/tab-animation.md).

# Tab animation

Animate your store's tab title and icon while shoppers browse another tab.

When a shopper switches to another browser tab, your store's tab title and icon animate to bring them back — for example, *"Come back, your cart is waiting"*.

To get started:\
**Open** a campaign → **Elements** → **Tab animation** → **Edit settings**.

{% hint style="info" %}
It only runs while your tab is in the background — a shopper looking at your store never sees the title move. The original title comes back as soon as they return.
{% endhint %}

***

## 1. **Messages**

Add up to **5** messages, up to 30 characters each. They show one after another while the shopper is on another tab. Click the emoji icon to add an emoji.

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-838122760369bc454409bffe216bca64f7cbc2cd%2Ftab-animation-01-messages.png?alt=media" alt="Tab animation messages"><figcaption></figcaption></figure>

→ *Keep it short and friendly, e.g. `🎁 Your gift is waiting` or `Sale ends tonight!`.*

## 2. **Tab title animation**

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-335a60fbb4dddc72055d57f1bf8344088ecad92f%2Ftab-animation-02-title-animation.png?alt=media" alt="Tab title animation styles"><figcaption></figcaption></figure>

### **2.1 Animation style**

Pick how the title moves. The default is **Blinking title**.

<table data-header-hidden><thead><tr><th width="200"></th><th></th></tr></thead><tbody><tr><td><strong>Blinking title</strong></td><td><ul><li>Your message flashes in and out, swapping with your real title.</li></ul></td></tr><tr><td><strong>Scrolling title</strong></td><td><ul><li>Slides across like a ticker, so a long line still reads.</li></ul></td></tr><tr><td><strong>Typing title</strong></td><td><ul><li>Types itself out one letter at a time, then clears.</li></ul></td></tr><tr><td><strong>Cycling messages</strong></td><td><ul><li>Shows your messages one after another.</li></ul></td></tr><tr><td><strong>Campaign countdown</strong></td><td><ul><li>Adds the time left until the campaign ends.</li><li>Needs an end time in <a href="/awe-seasonal-effects/getting-started/campaign-settings/schedule-and-trigger.md">Schedule &#x26; Trigger</a>.</li></ul></td></tr><tr><td><strong>Launch Curtain</strong></td><td><ul><li>Counts down to the campaign's start.</li></ul></td></tr><tr><td><strong>Cart quantity badge</strong></td><td><ul><li>Adds the number of items in the shopper's cart, e.g. <code>(2)</code>.</li></ul></td></tr><tr><td><strong>Cart Goal Gap Nudge</strong></td><td><ul><li>Adds how much the shopper still needs to spend to reach your cart goal. Set the goal in <strong>Cart goal</strong> (see below).</li></ul></td></tr></tbody></table>

### **2.2 Speed**

5 levels, from **Slowest** to **Fastest** (default **Normal**). Watch the **Preview** to judge it.

## 3. **Favicon**

The favicon is the small icon in the browser tab.

<figure><img src="https://2143911517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh99vPHicsa9fNoUu2h0S%2Fuploads%2Fgit-blob-48e4b7cb534ef5fc33d116413ed6e218714acbf6%2Ftab-animation-03-favicon.png?alt=media" alt="Tab animation favicon settings"><figcaption></figcaption></figure>

* **Favicon source**: **Emoji** (default, 😎) or **Store favicon**. Click **Change emoji** to pick another emoji.
* Tick **Animate favicon** to make it move while the shopper is away, then pick an **Animation style** — **Emoji pulse** (emoji only), **Favicon blink**, **Cart Quantity Orbit** or **Campaign Countdown Clockface** — and a **Speed**.

→ *With **Emoji**, the emoji replaces your favicon while the campaign runs. Your store favicon comes back when Tab animation is turned off.*

## 4. **Cart goal**

Only used by the **Cart Goal Gap Nudge** style. Tick **Use a cart goal**, then enter the goal in your currency's smallest unit — for a two-decimal currency, `7500` means 75.00.

***

💬 If you have any related questions, please contact us via **Live chat** in the app.