> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Slider Revolution — Animation Guide

Every layer in your slider (text, image, button, shape, video) and every slide background can move. You set this up in the **Animation** tab of the editor.

## What you can animate

| What | When it plays | Example |
| ---- | ---- | ---- |
| **In animation** | When the slide shows up | A headline slides up and fades in |
| **Loop** | While the slide stays on screen | A button pulses gently |
| **Out animation** | When the slide leaves | Text fades out before the next slide |
| **Slide transition** | Between two slides | The whole slide zooms or slices into the next one |

There are two ways to animate a layer:

- **Preset Mode**: pick a ready-made effect with one click. Best for most stores.
- **Advanced Mode**: set each step yourself. Use this when a preset doesn't give you what you want.

## Step 1: Open the Animation panel

- In the Slider Revolution app, open your slider and click **Edit**. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1a6pa2n.png =900x549)

* On the canvas, click the layer you want to animate, for example your headline. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss2_97x0re.png =900x675)

* At the top of the right sidebar, click the **Play icon**. This is the Animation tab. The label at the top of the canvas changes to **Animation Mode**. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1hyu2h7.png =900x562)

* Look at the switch above the canvas: **Preset Mode** or **Advanced Mode**. Keep it on **Preset Mode** for now. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_iu8jhg.png)

* The **timeline** at the bottom shows each layer as a bar. The drop-down at its top left says **In Animation**. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss5_tqshwa.png =900x239)


> **Tip:** To go back to changing colors, fonts or size, click the **pencil icon** (Design Mode) at the top of the sidebar.

## Step 2: Add an animation with a preset

A preset is a ready-made animation. Most people never need anything else.

- Select your layer and make sure **Preset Mode** is on.
- Pick a category from the list in the sidebar. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss6_1cucc1b.png =450x759)

* Hover over a preset to watch it play on the canvas. Click it to apply it. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1aklwwc.png =450x505)

* Many presets come in versions, like **Easy / Medium / Strong** or **Up / Down / Left / Right**. Pick the one you like. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1jyidfs.png =450x281)


| Category | What it does | Good for |
| ---- | ---- | ---- |
| **Fade** | Fades the layer in, soft to strong | Any layer, a safe default |
| **Slide** | Moves in from a side: short, long, thrown or diagonal | Headlines, buttons |
| **Skew** | Slides in with a slanted tilt | Bold, sporty looks |
| **Rotate** | Smashes, flips or turns into place | Logos, badges |
| **Zoom** | Grows or shrinks into place | Product images |
| **Masked** | Reveals the layer from behind an invisible edge | Clean, premium text reveals |
| **Lines / Words / Letters** | Animates text one line, word or letter at a time | Headlines and taglines (text layers only) |
| **Loops** | Keeps moving while the slide is on screen (Pendulum, Orbit, Wave, Wiggle, Spin, Hover, Pulse) | Sale badges, arrows, "Shop now" buttons |

> **Tip:** To remove a loop, choose **Loops → No Loop**.

## Step 3: Fine-tune in Advanced Mode

Use Advanced Mode to change speed, direction or distance, or to build your own animation. A preset you applied shows up here too, ready to adjust.

### Keyframes: the steps of your animation

A keyframe is one "pose" of the layer. The layer moves from one keyframe to the next.

- Click **Advanced Mode** above the canvas. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss9_1jodh99.png =450x281)

* In the sidebar, the **Keyframes** row shows each step. The first is where the layer starts; the next is where it ends up. Click one to edit it. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_1exrofh.png =450xauto)

* To add a step, hover between keyframes and click the **+** flag. Double-click a keyframe's name to rename it.

### Timing: speed and start

| Setting | What it changes | Where |
| ---- | ---- | ---- |
| **Duration** | How long the step takes, in ms (1000 ms = 1 second) | Sidebar, or drag the end of the bar on the timeline |
| **Start** | When the step begins | Drag the bar left or right on the timeline  |
| **Easing** | The feel of the motion: smooth, bouncy or springy | Sidebar drop-down  |

![Drag the bar left or right on the timeline](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss11_1hf7k8q.png =900x239)
![Sidebar drop-down](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss12_1yxocxk.png =450x178)

> **Tip:** If a layer shows up too late, drag its bar to the left on the timeline.

### What can move

Each keyframe lets you set:

- **Opacity**: 0% = invisible, 100% = fully visible.
- **Position (X, Y, Z)**: where the layer moves from or to. Switch to **Motion Path** to draw a curved path.
- **Scale X / Scale Y**: grow or shrink.
- **Skew X / Skew Y**: slant.
- **X / Y / Z Rotation**: spin or flip in 3D.
- **Text Color / Background Color**: change color during the animation.
- **Filter**: Blur, Mono, Brightness, Sepia, Invert, Contrast.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_nix5m9.png =550x525)


### Animation Targets: animate parts of a layer

Click **+** next to the target list to add one. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_p027j9.png =450x745)


| Target | What it does |
| ---- | ---- |
| **Mask Shifting** | Hides the layer behind an edge and reveals it |
| **Content Clipping** | Reveals the layer through a growing rectangle or circle |
| **Animate by Chars / Words / Lines** | Splits text so each letter, word or line moves on its own (text layers only) |
| **Pan Zoom Animation** | Slow zoom on an image or shape |
| **Wrapper Motion** | Adds a second motion around the layer, used for loops |
| **Filter Animation** | Animates blur and color filters |

## Step 4: Loops, Out animations and slide transitions

### Out animation: how a layer leaves

- In the timeline drop-down at the top left, switch from **In Animation** to **Out Animation**. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss15_1cmttdk.png =550x196)

* Pick an Out preset, or set keyframes in Advanced Mode.

If you set nothing, the layer simply disappears with the slide.

### Repeat part of the animation

In Advanced Mode, open the repeat option next to the keyframes. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss16_1ine5a5.png =450x421)


- **Enable Repeat on Timeline**: turn it on.
- **From / To**: the first and last keyframe to repeat.
- **Repeat Amount**: how many times. **-1** repeats forever.
- **Animate in Both Directions (Yoyo Effect)**: plays forward, then backward.

### Scenes: extra animation stages (optional)

Every slide has two scenes: **In Animation** and **Out Animation**. Use **Add a new scene** in the same drop-down to create more, for example a scene that plays when a shopper clicks a button. Link a scene to a click in the **Actions** tab (the third icon in the sidebar).

> **Note:** Deleting a scene removes its animations and action links.

### Slide transition: how one slide changes to the next

- In Animation Mode, click the **Slide Background** layer (the bottom row of the timeline). 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss17_1dduabf.png =900x239)

* Pick a transition group: Simple, Slide, Masked, Skew, Rotation, Zoom, Block or Random. Hover to preview, click to apply. **(SS18)**

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss18_iut7mu.png =450x618)

* Optional settings: 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss19_1lo91sl.png =450x506)

* - **Transition Style**: Direct, Double Slide, or Fade through Dark / Light / Transparent.
  - **Columns / Rows**: split the image into slices or boxes.
  - **3D Effect**: Cube, Stage Turn, Dynamic Toss, Slide Flip.
  - **Use Filters** and **Use Motion Filter**: add blur or color during the change.
  - **Easing** and **Duration**.
* For a slow zoom on the background image, add **Pan Zoom Animation**.

## Step 5: Preview and save

- Click the **Play** button at the top of the timeline to watch the whole slide. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/ss20_11f7wak.png =450x76)

* Click **Draft** and then **Save & Publish** in the top bar. 

![](https://storage.crisp.chat/users/helpdesk/website/-/c/9/f/1/c9f13477e739a800/image_rxm7go.png)

* Open your store page and check it on desktop and on your phone.

## If something looks wrong

| Problem | Fix |
| ---- | ---- |
| Layer doesn't animate | Make sure you are in **Animation Mode** (Play icon) and the layer is selected. If it says **Not in this Scene**, add it to the scene first |
| Layer appears too late or too early | Drag its bar left or right on the timeline |
| Animation feels too fast or too slow | Change **Duration**, or drag the end of the bar |
| "Not enough Space between Frames" | Drag keyframes apart or shorten one, then add the new one |
| Words / Letters presets are missing | These presets only work on **text** layers |
| Too many layers to find yours | Click the filter icon on the timeline to show **Layers with Keyframes** only |
| Slider feels slow on phones | Use fewer loops and 3D effects, and prefer Fade or Slide presets |