'Action: Visual Effects'

actionsvisualeffectsanimationhoverfeedback

The Visual Effect action applies an animated effect to an element. Effects are short, attention-grabbing animations — perfect for hover feedback, click responses, and drawing attention to important elements.

Available Effects

Rippily provides 8 visual effects:

Effect What It Does
Scale Up Enlarges the element briefly, then returns to normal size
Rotate Tilts the element slightly
Lift Up Raises the element with a shadow, creating a "floating" effect
Glow Adds a glowing outline around the element
Shake Shakes the element side to side — great for error feedback
Pulse Rhythmic scaling in and out — draws attention
Bounce Bounces the element up and down
Spin Rotates the element 360 degrees

You can also set the effect to None to explicitly remove any active effect.

Configuration

Duration

Set how long the effect animation lasts in milliseconds. Shorter durations (200-300ms) feel snappy and responsive. Longer durations (500-1000ms) feel more dramatic.

Preserve Transparency

For the Glow effect on images with transparency (e.g. PNG logos), enable this option to make the glow follow the image's actual shape rather than the rectangular bounding box.

Scope

Visual effects are always local — only the person who triggered the effect sees it. This is intentional: effects are UI feedback, not shared state.

Common Patterns

Hover Feedback

The most common use. Add two actions to a button element:

  1. Hover trigger → Visual Effect: Scale Up or Glow
  2. Hover Out trigger → Visual Effect: None (removes the effect)

This gives participants clear visual feedback that the element is interactive.

Click Confirmation

Add a Visual Effect with a Click trigger to give immediate feedback:

  • Bounce for positive confirmation ("item added!")
  • Shake for errors ("that's not right")
  • Pulse for attention ("look at this")

Error Feedback

When a participant gives a wrong answer or drops an item in the wrong zone, fire a Shake effect. It's the universal "no" animation.

Attention Drawing

Use Pulse with an Activation trigger to make an element pulse when a scene loads. This guides participants to the most important element. Add oneTimeOnly so it only pulses once.

Tips

  • Pair with other actions: Visual effects work best alongside other actions. A button that scales up on hover, plays a sound on click, and switches scenes creates a polished experience.
  • Don't overdo it: Too many animated elements competing for attention is distracting. Use effects purposefully — one or two key interactive elements per scene is usually enough.
  • Test on mobile: Some effects (especially Shake and Spin) can feel different on smaller screens. Preview your Ripple on mobile to check.

What's Next?

  • States System — for persistent visual changes (not just animations)
  • Sound — pair audio with visual effects