Reveal Effects

A collection of reveal effects targeting specific elements as they enter the viewport.

How to

The Reveal Effects component is a collection of animations that can be used to reveal elements as they enter the viewport.

To animate an element, add the reveal-fx class to it. By default, the element is revealed with a fade-in (opacity) animation.

To apply a different effect, add one of the following reveal-fx class modifiers:

• reveal-fx--translate-up: translate the element in (from bottom to top);
• reveal-fx--translate-down: translate the element in (from top to bottom);
• reveal-fx--translate-right: translate the element in (from left to right);
• reveal-fx--translate-left: translate the element in (from right to left);
• reveal-fx--scale: scale up the element;
• reveal-fx--scale-up: scale up the element and translate in (from bottom to top);
• reveal-fx--scale-down: scale up the element and translate in (from top to bottom);
• reveal-fx--scale-right: scale up the element and translate in (from left to right);
• reveal-fx--scale-left: scale up the element and translate in (from right to left);
• reveal-fx--rotate-up: rotate the element (anticlockwise along X axis);
• reveal-fx--rotate-down: rotate the element (clockwise along X axis);
• reveal-fx--rotate-right: rotate the element (clockwise along Y axis);
• reveal-fx--rotate-left: rotate the element (anticlockwise along Y axis);
• reveal-fx--text-mask: used to animate words and/or letter inside a text element; translate the element (from bottom to top);
• reveal-fx--clip-y: animate the vertical clip value
• reveal-fx--clip-x: animate the horizontal clip value

Offset #

The element will be revealed once 120px of the element has entered the viewport. You can change this amount for a specific element adding a data-reveal-fx-delta attribute to the element (delta in px, e.g. 100).

Example:

<div class="reveal-fx reveal-fx--translate-up" data-reveal-fx-delta="50">
  <!-- ... -->
</div>

Alternatively, you can change the default fxRevealDelta variable in the JS file.

Delay #

If you want to add a delay to the reveal animation, you can add a data-reveal-fx-delay attribute to the element (delay in milliseconds). The default delay is 0.

Example:

<div class="reveal-fx reveal-fx--translate-up" data-reveal-fx-delay="100">
  <!-- ... -->
</div>

Breakpoints #

If you want to enable the reveal effects past a specific breakpoint (e.g., md), you can modify that inside the reveal-effects.scss file:

.js {
  @include breakpoint(md) { // use md breakpoint to enable reveal effects
    // reveal-effects style here
  }
}

You can read more about using breakpoints in CodyFrame on our Breakpoints documentation page.

Reset Gallery #

If you need to reset your gallery (e.g., hide all elements and reveal them again when they enter the viewport), you can use the restartAll custom event:

window.dispatchEvent(new CustomEvent('restartAll'));

Categories

• Effects > Scroll

Bug report & feedback

Component Github page ↗