Built in Reveal effect PRO

Create a revealing effect animation on any element, image or text

Overview

This effect hides an element by clipping it using CSS clip-path and reveals it when trigger is performed. The element itself stays in the original place, only
the reveal is animated. When the element is revealed, the clipping box has a 0% height or width and the element is entirely hidden without any possible user interaction such as hover or focus.

Example

Reveal

Example of gradual revealing effect on heading title on hover. Made with reveal--up and delay[{value}].

Hover me

Revealing effect made super easy with Torus Kit

<div data-fx-trigger="hover">
  <h2>
    <span class="d-block"><span data-fx="hover/T:reveal--up exponential">Revealing effect</span></span>
    <span class="d-block"><span data-fx="hover/T:reveal--up exponential delay[100ms]">made super easy</span></span>
    <span class="d-block"><span data-fx="hover/T:reveal--up exponential delay[200ms]">with Torus Kit</span></span>
  </h2>
</div>

Reversed

Reversed gradual reveal effect that hides the content.

Hover me

Hiding effect made super easy with Torus Kit

<div data-fx-trigger="hover">
  <h2>
    <span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential">Revealing effect</span></span>
    <span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential delay[100ms]">made super easy</span></span>
    <span class="d-block"><span data-fx="hover/T:reveal-reverse--up exponential delay[200ms]">with Torus Kit</span></span>
  </h2>
</div>

Triggers

To create a revealing effect when {trigger} is performed on a single element, use data-fx="{trigger}:reveal--{direction} where {trigger} is:

inview: - when element appears in the viewport and gets .inview class
active: - when element gets .active class
show: - when element gets .show class

And the {direction} one of the:

up reveals upwards from bottom to top
down reveals downwards from top to bottom
left reveals from the right to the left
right reveals from the left to the right

Because the clip-path hides entire element, it doesn’t respond to user hover interaction. This is why hover: (hover) trigger is not available.

Reveal

Switch to toggle .active class on elements

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx="active:reveal--up">Reveal up</div>
<div data-fx="active:reveal--right">Reveal right</div>
<div data-fx="active:reveal--down">Reveal down</div>
<div data-fx="active:reveal--left">Reveal left</div>

Scroll into view to toggle .inview class

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx="inview:reveal--up">Reveal up</div>
<div data-fx="inview:reveal--right">Reveal right</div>
<div data-fx="inview:reveal--down">Reveal down</div>
<div data-fx="inview:reveal--left">Reveal left</div>

Reversed

Add data-fx="{trigger}:reveal-reverse--{direction} that reverse the effect and hide the content.

Switch to toggle .active class on elements

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx="active:reveal-reverse--up">Reveal reverse up</div>
<div data-fx="active:reveal-reverse--right">Reveal reverse right</div>
<div data-fx="active:reveal-reverse--down">Reveal reverse down</div>
<div data-fx="active:reveal-reverse--left">Reveal reverse left</div>

Scroll into view to toggle .inview class

Reveal reverse up

Reveal reverse right

Reveal reverse down

Reveal reverse left

          













<div data-fx="inview:reveal-reverse--up">Reveal reverse up</div>
<div data-fx="inview:reveal-reverse--right">Reveal reverse right</div>
<div data-fx="inview:reveal-reverse--down">Reveal reverse down</div>
<div data-fx="inview:reveal-reverse--left">Reveal reverse left</div>

Parent trigger

To create a revealing effect of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:reveal--{direction} attribute to child elements where {TRIGGER} is:

inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
active/T: - when .active class is applied on parent Trigger element
show/T: - when .show class is applied on parent Trigger element
hover/T: - when hover state is applied on parent Trigger element

And the {direction} one of the:

up reveal reveals upwards from bottom to top
down reveal reveals downwards from top to bottom
left reveal reveals from the right to the left
right reveal reveals from the left to the right

Reveal

Hover over the wrapper:

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:reveal--up">Reveal up</div>
  <div data-fx="hover/T:reveal--right">Reveal right</div>
  <div data-fx="hover/T:reveal--down">Reveal down</div>
  <div data-fx="hover/T:reveal--left">Reveal left</div>
</div>

Click the wrapper to toggle .active class:

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx-trigger="active">
  <div data-fx="active/T:reveal--up">Reveal up</div>
  <div data-fx="active/T:reveal--right">Reveal right</div>
  <div data-fx="active/T:reveal--down">Reveal down</div>
  <div data-fx="active/T:reveal--left">Reveal left</div>
</div>

Scroll into view to toggle .inview class on parent

Reveal up

Reveal right

Reveal down

Reveal left

          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:reveal--up">Reveal up</div>
  <div data-fx="inview/T:reveal--right">Reveal right</div>
  <div data-fx="inview/T:reveal--down">Reveal down</div>
  <div data-fx="inview/T:reveal--left">Reveal left</div>
</div>

Reversed

Hover over the wrapper:

Reveal reverse up

Reveal reverse right

Reveal reverse down

Reveal reverse left

          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:reveal-reverse--up">Reveal reverse up</div>
  <div data-fx="hover/T:reveal-reverse--right">Reveal reverse right</div>
  <div data-fx="hover/T:reveal-reverse--down">Reveal reverse down</div>
  <div data-fx="hover/T:reveal-reverse--left">Reveal reverse left</div>
</div>

Click the wrapper to toggle .active class:

Reveal reverse up

Reveal reverse right

Reveal reverse down

Reveal reverse left

          













<div data-fx-trigger="active">
  <div data-fx="active/T:reveal-reverse--up">Reveal reverse up</div>
  <div data-fx="active/T:reveal-reverse--right">Reveal reverse right</div>
  <div data-fx="active/T:reveal-reverse--down">Reveal reverse down</div>
  <div data-fx="active/T:reveal-reverse--left">Reveal reverse left</div>
</div>

Scroll into view to toggle .inview class on parent

Reveal reverse up

Reveal reverse right

Reveal reverse down

Reveal reverse left

          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:reveal-reverse--up">Reveal reverse up</div>
  <div data-fx="inview/T:reveal-reverse--right">Reveal reverse right</div>
  <div data-fx="inview/T:reveal-reverse--down">Reveal reverse down</div>
  <div data-fx="inview/T:reveal-reverse--left">Reveal reverse left</div>
</div>

Built in Reveal effect PRO

Create a revealing effect animation on any element, image or text

Overview

Example

Reveal

Hover me

Revealing effect made super easy with Torus Kit

Reversed

Hover me

Hiding effect made super easy with Torus Kit

Triggers

Reveal

Reversed

Parent trigger

Reveal

Reversed

Combination

Hover me

Revealing effect made super easy with Torus Kit

Reveal effect

Excited about the Torus Kit features?

Subscribe and get early access with special starting offer