🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Reveal Effects

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

Copy: 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, all elements are revealed with a fade-in animation. You can select a different effect adding one of the reveal-fx modifier classes. This is the list of all possible animation variations:

  • 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

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

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.

⚠️ Important: if you want to enable the reveal effects only on devices bigger than 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 the CodyHouse framework on our Breakpoints documentation page.

Categories

✅ Project duplicated

✅ Project created

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