Sa-reveal NPM | npm.io

Reveal

The RevealDirective is an Angular directive that allows elements to reveal themselves during scrolling, with customizable direction, delay, and animation speed.

Features

Reveal elements as they come into view during scrolling.
Control the direction of the reveal animation ('b', 't', 'r', 'l',.....).
Set a delay for the reveal animation.
Control of animation scroll.
Customize the speed of the reveal animation using a CSS variable.
Customize the animation type using a CSS variable.

Installation

To install the library via npm:

npm install sa-reveal

To use the library directly in a static HTML file, include the following script tag in your HTML:

<script src="https://reveal.devahmedabdo.workers.dev/"></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    reveal("b", 50, false); // Customize the options as needed
  });
</script>

First parameter: Reveal type (e.g., 'b' for bottom, 't' for top, etc.)
Second parameter: Offset (number in pixels to control when the reveal starts)
Third parameter: to prevent animation to replay more one time.

Usage

Add css files

Add the path to the library CSS files in angular.json as follows:

 "styles": ["node_modules/sa-reveal/src/assets/reveal.css"],

1. Import the directive

First, you need to import the directive into your Angular project.

import { RevealDirective } from "sa-reveal";

2. Add to Component Template

Add the reveal directive to any element in your component’s HTML template. You can control the direction and delay of the reveal using the reveal and delay inputs.

<div reveal="b" [delay]="2">Content to reveal</div>

3. Control the speed

You can of the reveal animation by setting a CSS variable. Add this CSS to your styles:

:root {
  --reveal-speed: 1s;
}

By default, the reveal speed is set to 0.5s. You can change this value to suit your needs.

Basic Usage

<div reveal>
  <!-- Your content here -->
</div>

Custom Directions

You can specify custom directions using the reveal attribute. Available options are:

r (right)
l (left)
t (top)
b (bottom) - Default
tr (top-right)
tl (top-left)
br (bottom-right)
bl (bottom-left)

<div reveal="r">
  <!-- Animates from the right -->
</div>

Zoom and Flip Animations

You can also apply zoom and flip effects:

zi (zoom in)
zo (zoom out)
fl (flip left)
fr (flip right)
fb (flip bottom)
ft (flip top)

<div reveal="zi">
  <!-- Zoom in animation -->
</div>

Clip Path Animations

For clip path animations, use:

cr (clip right)
cl (clip left)
ct (clip top)
cb (clip bottom)
cc (clip circle)
cs (clip star)

<div reveal="cc">
  <!-- Circular clip animation -->
</div>

Split Animations

For clip path animations, use:

si (Split inline)
sio (Split inline out)
sb (Split block)
sbo (Split block out)
st (Split tendon)
sto (Split tendon out)

<div reveal="cc">
  <!-- Circular clip animation -->
</div>

Filters

You can apply filter effects like blur, brightness, grayscale, and more:

blur (blur animation)
lblur (translate from left and blur animation)
rblur (translate from right and blur animation)
tblur (translate from top and blur animation)
bblur (translate from bottom and blur animation)
light (brightness increase)
dark (brightness decrease)
color (grayscale)

<div reveal="blur">
  <!-- Blur animation -->
</div>

Configuration

Global Configuration

You can set default properties for all reveal elements in your app by providing a configuration in your module:

{
  provide: RevealService,
  useValue: {
    reveal: 'b' as Reveal,  // Default direction
    endScroll: false,       // Scroll behavior
    offset: 100,            // Offset from viewport to trigger
  },
}

`endScroll` Behavior

The endScroll property controls whether the animation should replay each time the element enters the viewport. If endScroll is true, the animation will trigger only once and stop. If false, the animation will trigger every time the element enters the viewport.

Default: false

`offset` Value

The offset defines the distance in pixels before the element enters the viewport to trigger the animation. You can set a custom offset value for individual elements or globally.

Default: 100

Custom Animation Speed

You can set the speed of the animation using the --reveal-speed CSS variable. Apply it globally to the body or individually to elements:

body {
  --reveal-speed: 1s; /* Default: 0.5s */
}

Or for individual elements:

<div reveal style="--reveal-speed: 1s;">
  <!-- Custom speed for this element -->
</div>

Custom Animation Type

You can set the animation type using the --reveal-type CSS variable. Apply it globally to the body or individually to elements:

body {
  --reveal-type: cubic-bezier(0.46, -1.53, 0.47, 2.92); /* Default: ease-in-out */
}

Or for individual elements:

<div reveal style="--reveal-type:ease-in;">
  <!-- Custom type for this element -->
</div>

Custom value

You can set the value of translate or scale or the value the will after animation end

body {
  --translate-x: ; /* Default: 70px */
  --minus-translate-x: ; /* Default: -70px */
  --end-translate-x: ; /* Default: 0px */
  --translate-y: ; /* Default: 70px */
  --minus-translate-y: ; /* Default: -70px */
  --end-translate-y: ; /* Default: 0px */
  --minus-scale: ; /* Default: 0.6 */
  --plus-scale: ; /* Default: 1.2 */
  --end-scale: ; /* Default: 1 */
  --blur: ; /* Default: 10px */
  --end-blur: ; /* Default: 0px */
}

Or for individual elements:

<div reveal style="--translate-y:100px;">
  <!-- Custom value for this element -->
</div>

!IMPORTANT
To prevent horizontal scrolling issues, please ensure you add overflow: hidden; to the first parent element. Note that overflow-x is not supported in all browsers.
!IMPORTANT
To use any translation animation, ensure that the element does not have the display property set to inline.