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

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.

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

• 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.

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

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

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.

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

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

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.

• 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.

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

Timing: speed and start

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.

Animation Targets: animate parts of a layer

Click + next to the target list to add one.

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.

• 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.

• 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).

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

• Optional settings:

• • 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.

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

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

If something looks wrong

Updated on: 24/09/2026