Effects

Effects

Effects define how images transition and animate in Liveposter. Each animation mode uses specific effects to create its visual behavior. Understanding effects helps you fine-tune the look and feel of your animations.

Overview

Effects are configured in the effects object of your poster specification:

{
  "container": "#slideshow",
  "mode": "diaporama",
  "effects": {
    "type": "fade",
    "easing": "ease-in-out"
  },
  "images": [ /* your images */ ]
}

Liveposter includes four core effect types:

Effect	Used By	Purpose
Fade	Diaporama	Crossfade between images
Pan	Pan Slideshow	Move across wide images
Zoom	Zoom Slideshow	Scale images (Ken Burns)
Parallax	Parallax Layers	Multi-layer depth movement

Fade Effect

What It Is

The fade effect creates smooth opacity transitions between images. One image fades out (opacity 1 → 0) while the next fades in (opacity 0 → 1).

Used By

• diaporama mode

Configuration

{
  "effects": {
    "type": "fade",
    "easing": "ease-in-out"
  }
}

Parameters

• type (string): Must be "fade"
• easing (string): Timing function for the fade (default: "ease-in-out")

Easing Options

The easing parameter controls the acceleration curve of the fade:

Linear:

"easing": "linear"

Constant speed throughout. Can feel mechanical.

Ease-In:

"easing": "ease-in"

Starts slow, accelerates. Good for dramatic reveals.

Ease-Out:

"easing": "ease-out"

Starts fast, decelerates. Smooth landing feeling.

Ease-In-Out (recommended):

"easing": "ease-in-out"

Slow start and end, fast middle. Most natural for human perception.

Cubic Bezier:

"easing": "cubic-bezier(0.4, 0.0, 0.2, 1)"

Custom curve using CSS cubic-bezier notation.

Example: Quick Fade

{
  "container": "#slideshow",
  "mode": "diaporama",
  "timing": {
    "duration": 2000,
    "transition": 300
  },
  "effects": {
    "type": "fade",
    "easing": "ease-out"
  },
  "images": [
    { "src": "image1.jpg", "alt": "Image 1" },
    { "src": "image2.jpg", "alt": "Image 2" }
  ]
}

Example: Long Dissolve

{
  "effects": {
    "type": "fade",
    "easing": "linear"
  },
  "timing": {
    "duration": 5000,
    "transition": 2000
  }
}

Tips

• ease-in-out works best for most use cases
• linear works well for long, slow dissolves
• Shorter transitions (300-500ms) feel more dynamic
• Longer transitions (1000-2000ms) feel more cinematic

Pan Effect

What It Is

The pan effect moves the viewport across a larger image, creating a scrolling or camera pan effect. The image translates horizontally or vertically.

Used By

• pan-slideshow mode

Configuration

{
  "effects": {
    "type": "pan",
    "direction": "right",
    "easing": "linear",
    "distance": "100%"
  }
}

Parameters

• type (string): Must be "pan"
• direction (string): Pan direction (default: "right")
  • Options: "right", "left", "up", "down"
• easing (string): Timing function (default: "linear")
• distance (string): How far to pan (default: "100%")

Direction Behavior

Right:

"direction": "right"

Image moves from left to right (viewport travels right across image).

Left:

"direction": "left"

Image moves from right to left (viewport travels left across image).

Down:

"direction": "down"

Image moves from top to bottom (viewport travels down).

Up:

"direction": "up"

Image moves from bottom to top (viewport travels up).

Example: Horizontal Pan

{
  "container": "#slideshow",
  "mode": "pan-slideshow",
  "images": [
    {
      "src": "panorama-3840x1920.jpg",
      "alt": "Wide panorama",
      "timing": {
        "duration": 5000,
        "transition": 5000
      },
      "effects": {
        "type": "pan",
        "direction": "right",
        "easing": "linear",
        "distance": "100%"
      },
      "viewport": {
        "width": "1080px",
        "height": "1920px"
      }
    }
  ]
}

Example: Vertical Scroll

{
  "effects": {
    "type": "pan",
    "direction": "down",
    "easing": "linear",
    "distance": "100%"
  }
}

Easing for Pan

Linear (recommended): Best for continuous panning. Constant speed feels most natural.

Ease-In-Out: Creates acceleration and deceleration. Can feel less smooth but adds variation.

Ease-In: Accelerating pan. Uncommon but can work for reveals.

Ease-Out: Decelerating pan. Useful for ending on an important area.

Tips

• Always use linear easing for smooth, constant-speed panning
• Match transition duration to duration for continuous motion
• direction: "left" (right-to-left) is often more comfortable than right
• For vertical displays (1080x1920), use wide images (3840x1920) for horizontal pans
• Distance of 100% pans across the entire excess width/height

Zoom Effect

What It Is

The zoom effect scales images from original size to a larger size (or vice versa), creating the Ken Burns documentary effect.

Used By

• zoom-slideshow mode

Configuration

{
  "effects": {
    "type": "zoom",
    "scale": 1.3,
    "origin": "center",
    "easing": "ease-in-out"
  }
}

Parameters

• type (string): Must be "zoom"
• scale (number): Target scale factor (default: 1.2)
  • 1.0 = no zoom
  • 1.3 = 30% larger
  • 0.8 = 20% smaller (zoom out)
• origin (string): Zoom focal point (default: "center")
• easing (string): Timing function (default: "ease-in-out")

Origin Options

The origin determines which point remains stationary during zoom:

Center:

"origin": "center"

Zoom from/to the center. Most common.

Corners:

"origin": "top-left"     // Zoom from top-left corner
"origin": "top-right"    // Zoom from top-right corner
"origin": "bottom-left"  // Zoom from bottom-left corner
"origin": "bottom-right" // Zoom from bottom-right corner

Custom Position:

"origin": "50% 50%"  // Center (same as "center")
"origin": "30% 70%"  // Left of center, below center
"origin": "0% 0%"    // Top-left (same as "top-left")

Example: Zoom In

{
  "container": "#slideshow",
  "mode": "zoom-slideshow",
  "timing": {
    "duration": 4000,
    "transition": 3000
  },
  "effects": {
    "type": "zoom",
    "scale": 1.3,
    "origin": "center",
    "easing": "ease-in-out"
  },
  "images": [
    { "src": "landscape1.jpg", "alt": "Mountain" },
    { "src": "landscape2.jpg", "alt": "Ocean" }
  ]
}

Example: Zoom Out

{
  "effects": {
    "type": "zoom",
    "scale": 0.85,
    "origin": "center",
    "easing": "ease-in-out"
  }
}

Example: Corner Zoom

{
  "effects": {
    "type": "zoom",
    "scale": 1.4,
    "origin": "top-left",
    "easing": "ease-out"
  }
}

Example: Per-Image Zoom

{
  "container": "#slideshow",
  "mode": "zoom-slideshow",
  "timing": {
    "duration": 3000,
    "transition": 2000
  },
  "images": [
    {
      "src": "portrait.jpg",
      "alt": "Portrait",
      "effects": {
        "type": "zoom",
        "scale": 1.5,
        "origin": "top-left"
      }
    },
    {
      "src": "landscape.jpg",
      "alt": "Landscape",
      "effects": {
        "type": "zoom",
        "scale": 1.2,
        "origin": "bottom-right"
      }
    }
  ]
}

Scale Range Guidelines

• 1.1 - 1.2: Subtle zoom, barely noticeable
• 1.2 - 1.3: Gentle zoom, most versatile (recommended)
• 1.3 - 1.5: Moderate zoom, cinematic
• 1.5 - 2.0: Strong zoom, dramatic
• > 2.0: Extreme zoom, can feel disorienting

Tips

• Sweet spot is scale: 1.2 to 1.3 for most content
• Use ease-in-out easing for smooth, natural motion
• Vary zoom origins across images for visual interest
• Higher resolution images look better with larger scale values
• Slower zooms (3-5 seconds) feel more cinematic
• Combine with varying origins for a professional look

Parallax Effect

What It Is

The parallax effect moves layers at different speeds based on input (mouse/tilt), creating depth perception. Closer layers move more than distant layers.

Used By

• parallax-layers mode

Configuration

{
  "effects": {
    "type": "parallax",
    "easing": "ease-out"
  }
}

Per-image configuration:

{
  "images": [
    {
      "src": "background.jpg",
      "layer": 0,
      "effects": {
        "intensity": 10,
        "axis": "x"
      }
    },
    {
      "src": "foreground.png",
      "layer": 2,
      "effects": {
        "intensity": 60,
        "axis": "x"
      }
    }
  ]
}

Parameters

Global (in effects):

• type (string): Must be "parallax"
• easing (string): Timing function (default: "ease-out")

Per-Image (in each image’s effects):

• intensity (number): Movement amount 0-100 (default: 30)
  • 0 = no movement
  • 10 = subtle (background)
  • 30 = moderate (mid-ground)
  • 60+ = strong (foreground)
• axis (string): Movement direction (default: "x")
  • "x": Horizontal movement only
  • "y": Vertical movement only
  • "both": Both horizontal and vertical

Layer System

Images are stacked by layer value:

• layer: 0 = background (least movement)
• layer: 1 = mid-ground
• layer: 2 = foreground (most movement)

Higher layer numbers appear in front and move more.

Example: Three-Layer Parallax

{
  "container": "#parallax",
  "mode": "parallax-layers",
  "input": {
    "type": "mouseX",
    "mapping": "eased"
  },
  "effects": {
    "type": "parallax",
    "easing": "ease-out"
  },
  "images": [
    {
      "src": "mountains-far.png",
      "alt": "Distant mountains",
      "layer": 0,
      "effects": {
        "intensity": 10,
        "axis": "x"
      }
    },
    {
      "src": "mountains-mid.png",
      "alt": "Middle mountains",
      "layer": 1,
      "effects": {
        "intensity": 30,
        "axis": "x"
      }
    },
    {
      "src": "trees-near.png",
      "alt": "Foreground trees",
      "layer": 2,
      "effects": {
        "intensity": 60,
        "axis": "x"
      }
    }
  ]
}

Example: Vertical Parallax

{
  "input": {
    "type": "mouseY",
    "mapping": "eased"
  },
  "images": [
    {
      "src": "sky.jpg",
      "layer": 0,
      "effects": {
        "intensity": 10,
        "axis": "y"
      }
    },
    {
      "src": "clouds.png",
      "layer": 1,
      "effects": {
        "intensity": 40,
        "axis": "y"
      }
    }
  ]
}

Intensity Scaling

Use exponential scaling for depth perception:

Linear (less effective):

Layer 0: 20
Layer 1: 40
Layer 2: 60

Exponential (better):

Layer 0: 10
Layer 1: 30
Layer 2: 60

The difference between layers should increase for realistic depth.

Tips

• Background: intensity: 10-15
• Mid-ground: intensity: 25-35
• Foreground: intensity: 50-70
• Use exponential intensity scaling (10, 30, 60 not 20, 40, 60)
• axis: "x" is most intuitive for mouse input
• Use PNG images with transparency for foreground layers
• easing: "ease-out" provides smooth, responsive feel
• Keep layer count to 2-4 for best performance
• Higher intensities on mobile can feel too sensitive

Easing Functions Reference

All effects support CSS timing functions:

Standard Easings

"easing": "linear"           // Constant speed
"easing": "ease"             // Default CSS ease
"easing": "ease-in"          // Accelerate
"easing": "ease-out"         // Decelerate
"easing": "ease-in-out"      // Accelerate then decelerate

Custom Cubic Bezier

"easing": "cubic-bezier(0.4, 0.0, 0.2, 1)"

Create custom curves at cubic-bezier.com

Common Custom Easings

Fast-Out-Slow-In (Material Design):

"easing": "cubic-bezier(0.4, 0.0, 0.2, 1)"

Ease-Out-Back (Overshoot):

"easing": "cubic-bezier(0.34, 1.56, 0.64, 1)"

Ease-In-Out-Quart:

"easing": "cubic-bezier(0.76, 0, 0.24, 1)"

Per-Image Effect Overrides

You can override global effects on individual images:

{
  "container": "#slideshow",
  "mode": "diaporama",
  "effects": {
    "type": "fade",
    "easing": "ease-in-out"
  },
  "images": [
    {
      "src": "image1.jpg",
      "alt": "Normal fade"
    },
    {
      "src": "image2.jpg",
      "alt": "Slower fade",
      "timing": {
        "transition": 1500
      },
      "effects": {
        "type": "fade",
        "easing": "linear"
      }
    }
  ]
}

Effect Performance

All effects are GPU-accelerated using CSS transforms and opacity:

• Fade: Uses opacity (very fast)
• Pan: Uses transform: translate() (very fast)
• Zoom: Uses transform: scale() (very fast)
• Parallax: Uses transform: translate() (very fast)

These properties trigger GPU acceleration on modern browsers, ensuring smooth 60fps animations even at 4K resolution.

Choosing the Right Effect

Use Case	Recommended Effect
Classic photo slideshow	Fade (ease-in-out)
Fast product showcase	Fade (ease-out, quick)
Wide panoramic images	Pan (linear)
Cinematic storytelling	Zoom (1.2-1.3 scale)
Interactive depth scene	Parallax (exponential intensities)
Retro hard cuts	Fade with transition: 0

Next Steps

• Explore Animation Modes to see effects in context
• Learn about Overlays for layered visuals
• Check the API Reference for programmatic control
• See Poster Spec Format for complete configuration