Media

Most Reveals components support both images and videos as media options, selectable under Media. All media types allow you to adjust the fill mode (Cover / Contain). For videos, you can enable Loop playback.

*Note: Using looping videos may increase performance costs.

Animation

Reveals offers five animation types for applying effects (Disable / Appear / Enter / Transform / Variants). By default, animations transition from the previewed effect on canvas back to a “revealed” state, emphasizing the idea of uncovering.

Animation Types

Disable

Turns off the animation while keeping the effect active—ideal when using media as a background or ambient element. Videos will continue playing even with animation disabled.

Appear

Triggers immediately when the component loads, regardless of visibility. Best suited when embedding Reveals inside Framer Smart Components.

Enter

Activates when the component or a target element enters the viewport. You can fine-tune timing with Trigger (Layer In View / Section In View) and Amount. By default, the effect resets when leaving the viewport; set Replay to No if you want it to persist.

Transform

Animates effects based on scroll distance of the component or target element. Use Viewport to control when the transformation begins. (Video progress is not included in Transform.)

Tip: For Scroll Transform, set Transition to Instant or Spring to see clear changes.

Variants

Available in all components. Use Framer Smart Components to create advanced interactions like hover, click, or looping animations. All effect properties can be animated across keyframes.

*Note: you must adjust the component’s Transition property (not Variants’ Transition) to control the timing between states.

*Tip: Variants animations keep the renderer running continuously, so for performance, consider adding a final Variant with Animation Type = Disable.

Custom

For Appear / Enter / Transform types, you can enable Custom to define an animation endpoint—locking the effect at a specific stage. When enabled, new property controls appear. Due to Framer’s limitations, changes must be tested in Preview mode.