namitoyokota / ngx-notation-reveal

Angular component to add rough notation animation when element is visible.

Notation Reveal

Notation Reveal is an Angular component to add the Rough Notation animation when element scrolls into view.

Demo

View the live demo or CodeSandbox!

Installation

Install using a package manager:

npm i ngx-notation-reveal

or

yarn add ngx-notation-reveal

Usage

First, import the module.

import { NotationRevealModule } from 'ngx-notation-reveal';

@NgModule({
    imports: [NotationRevealModule],
})
export class AppModule {}

Next, set up a config property. You can read all annotation types on Rough Notation's official documentation.

readonly underline = {
    type: 'underline',
    color: '#F38181',
} as RoughAnnotationConfig;

Lastly, add component in the HTML.

<notation-reveal [config]="underline">This sentence will be underlined.</notation-reveal>

Directives

Optionally, override the reset flag to avoid re-animations.

<notation-reveal [reset]="false"></notation-reveal>

Delay, set to 1000 milliseconds (1 second) by default, can also be overridden.

<notation-reveal [delay]="5000"></notation-reveal>

License

MIT © Namito Yokota