Projects

Progress value is 30%

Reveal Effects

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

View Demo

Dependencies

All components are based on CodyFrame.

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.

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

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.