Angular Animations

This library will enable you to animate components on scroll, hover, load and click events. It is still under development.

npm i @petime/animations

yarn add @petime/animations

Import the module

import { AnimationsModule } from "@petime/animations";

@NgModule({
  declarations: [],
  imports: [AnimationsModule],
  exports: [AnimationsModule],
})
export class SharedModule {}

Include stylesheet in angular.json

"styles": ["node_modules/@petime/animations/animations.scss"],

Add html attributes with examples

<section
  mtnAnimate="scroll"
  [size]="['Large', 'XLarge']"
  [animationType]="page.animation"
>
  <mat-icon
    svgIcon="mouse"
    mtnAnimate="hover"
    animationType="moveUp"
  ></mat-icon>
</section>

| Attribute | Example | Description | |-----------|---------|-------------| | mtnAnimate | scroll | On what event the animation should execute | | size | [Large, XLarge] | Thte screen size the animation should execute | | animationType | moveUp | The type of animation |