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.

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

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>

API

This readonly component takes in the following properties as inputs:

| Name | Type | Default | Description | | -------- | -------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- | | config | RoughAnnotationConfig | | Styling of the annotation. | | reset | boolean | true | Whether to re-animate annotation each time element enters viewport. | | delay | number | 1000 | Time before animation after element enters viewport (in ms). |

License

MIT © Namito Yokota