[create-theme]: Tab Switch Anim

[rmshkmx]

Name

Tab Switch Anim

Description

Popup & Slide tab switch animations with speed control

Homepage

https://github.com/rmshkmx/NewSwitchAnims

Image

https://raw.githubusercontent.com/rmshkmx/NewSwitchAnims/main/image.png

Type

• JSON Color Theme

Theme Styles

/* ============================================
   Tab Switch Animations — Zen Browser Mod
   Author: rmshkmx
   ============================================ */

/* ─── Speed Presets ─── */

/* Fast (0.15s) */
:root:has([mod-rmshkmx_tab_switch_anim_speed="fast"]) {
  --rmshkmx-tab-anim-duration: 0.15s;
  --rmshkmx-tab-anim-easing-popup: cubic-bezier(0.175, 0.885, 0.3, 1.3);
  --rmshkmx-tab-anim-easing-slide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Normal (0.25s) — default */
:root:has([mod-rmshkmx_tab_switch_anim_speed="normal"]),
:root:not(:has([mod-rmshkmx_tab_switch_anim_speed])) {
  --rmshkmx-tab-anim-duration: 0.25s;
  --rmshkmx-tab-anim-easing-popup: cubic-bezier(0.175, 0.885, 0.32, 1.35);
  --rmshkmx-tab-anim-easing-slide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slow (0.4s) */
:root:has([mod-rmshkmx_tab_switch_anim_speed="slow"]) {
  --rmshkmx-tab-anim-duration: 0.4s;
  --rmshkmx-tab-anim-easing-popup: cubic-bezier(0.175, 0.885, 0.32, 1.55);
  --rmshkmx-tab-anim-easing-slide: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Extra Slow (0.6s) */
:root:has([mod-rmshkmx_tab_switch_anim_speed="extra-slow"]) {
  --rmshkmx-tab-anim-duration: 0.6s;
  --rmshkmx-tab-anim-easing-popup: cubic-bezier(0.175, 0.885, 0.32, 1.65);
  --rmshkmx-tab-anim-easing-slide: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Popup Animation ─── */
/* New tab zooms in from behind (scale 0.9 → 1.0) with inertia bounce */

#tabbrowser-tabpanels>hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
  @media -moz-pref("mod.rmshkmx.tab_switch_anim_popup") {
    transition: scale var(--rmshkmx-tab-anim-duration) var(--rmshkmx-tab-anim-easing-popup),
      opacity var(--rmshkmx-tab-anim-duration) ease-in-out !important;
    scale: 0.9 !important;
    opacity: 0;
  }
}

#tabbrowser-tabpanels>hbox.deck-selected:not([zen-split="true"]) {
  @media -moz-pref("mod.rmshkmx.tab_switch_anim_popup") {
    scale: 1 !important;
    opacity: 1 !important;
  }
}

/* ─── Slide Animation ─── */
/* Old tab slides up and out, new tab slides in from below */

#tabbrowser-tabpanels>hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
  @media -moz-pref("mod.rmshkmx.tab_switch_anim_slide") {
    transition: translate var(--rmshkmx-tab-anim-duration) var(--rmshkmx-tab-anim-easing-slide),
      opacity var(--rmshkmx-tab-anim-duration) ease-in-out !important;
    translate: 0 -3% !important;
    opacity: 0;
  }
}

#tabbrowser-tabpanels>hbox.deck-selected:not([zen-split="true"]) {
  @media -moz-pref("mod.rmshkmx.tab_switch_anim_slide") {
    translate: 0 0 !important;
    opacity: 1 !important;
  }
}

Readme

# Tab Switch Animations

A Zen Browser mod that adds smooth animations when switching between tabs.

## Features

### 🎬 Two Animation Types

- **Popup** — The new tab zooms in from the background with a smooth inertia bounce effect (scale 0.9 → 1.0). Inspired by the Transparent Zen mod's animation style.
- **Slide** — The old tab slides up and fades out while the new tab slides in from below.

### ⚡ Adjustable Speed

Choose from 4 speed presets in the mod settings:

| Preset | Duration | Feel |
|--------|----------|------|
| Fast | 0.15s | Snappy, minimal animation |
| Normal | 0.25s | Balanced (default) |
| Slow | 0.4s | Smooth and noticeable |
| Extra Slow | 0.6s | Dramatic, cinematic |

## Settings

After installing the mod, go to **Zen Settings → Mods → Tab Switch Animations** to configure:

1. **Enable Popup Animation** — Toggle the zoom-in popup effect
2. **Enable Slide Animation** — Toggle the vertical slide effect
3. **Animation Speed** — Choose your preferred speed preset

> **Note:** You can enable only one animation at a time. If both are enabled, both effects will apply simultaneously (not recommended).

## Compatibility

- Works with Zen Browser's split view (animations are disabled for split tabs)
- Compatible with Zen Glance
- Does not conflict with other animation mods (but using multiple tab animation mods is not recommended)

## Installation

Install directly from the [Zen Mods page](https://zen-browser.app/mods) by searching for "Tab Switch Anim".

## Author

Made by [rmshkmx](https://github.com/rmshkmx)

Preferences

[
    {
        "property": "mod.rmshkmx.tab_switch_anim_popup",
        "label": "🎬 Enable Popup Animation (zoom-in with inertia)",
        "type": "checkbox",
        "defaultValue": true
    },
    {
        "property": "mod.rmshkmx.tab_switch_anim_slide",
        "label": "🎬 Enable Slide Animation (vertical slide)",
        "type": "checkbox",
        "defaultValue": false
    },
    {
        "property": "mod.rmshkmx.tab_switch_anim_speed",
        "label": "⚡ Animation Speed",
        "type": "dropdown",
        "options": [
            { "label": "Fast (0.15s)", "value": "fast" },
            { "label": "Normal (0.25s)", "value": "normal" },
            { "label": "Slow (0.4s)", "value": "slow" },
            { "label": "Extra Slow (0.6s)", "value": "extra-slow" }
        ]
    }
]

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-2095 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.