• Stars
    star
    721
  • Rank 62,814 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŒ™ A collection of cool, reusable and flexible animations for Angular 14+

๐ŸŒ™ ng-animate

npm

ng-animate is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in animate.css, but with the power and flexibility of Angular animations instead of CSS.

Demo

The demo of the animations is available at https://jiayihu.github.io/ng-animate/.

Usage

npm install ng-animate --save

Example

Import the animation from the package and pass it to your Angular component using useAnimation:

// my-component.component.ts
import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce))])
  ],
})
export class MyComponent {
  bounce: any;
}
<!-- my-component.component.html -->
<div [@bounce]="bounce"></div>

Note: Make sure to have included BrowserAnimationsModule in your AppModule and the web-animation.js polyfill.

It's also possible to import only a subset of the animations:

import { bounce } from 'ng-animate/lib/bouncing';

Animation params

All the animations provided by ng-animate support at least two optional params timing and delay to specify the animation duration and delay. Default value for timing is usually 1s and 0s for delay.
You can pass the params object using the Javascript API or within the component template:

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce, {
      // Set the duration to 5seconds and delay to 2seconds
      params: { timing: 5, delay: 2 }
    }))])
  ],
})
export class MyComponent {}

Using a template can achieve the same result, but you'll have access to the component context:

<div [@bounce]="{ value: bounce, params: { timing: myTiming || 5, delay: myDelay || 2 } }"></div>

Animations

All the animations are organized by their group. Many of them have additional params other than timing/delay: refer to Advanced Usage for more details. Nevertheless you can probably ignore them if you're happy with how they are by default.

Attention seekers

  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat

Back

  • backInDown
  • backInLeft
  • backInRight
  • backInUp
  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp

Bouncing

  • bounceIn
  • bounceOut. Additional param: scale

The following bouncing animations have additional params a, b, c, d for translate

  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp

Fading

All fading animations have additional params fromOpacity, toOpacity for opacity transition and a, b for translate.

  • fadeIn
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInUp
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUp
  • fadeOutDownBig
  • fadeOutLeftBig
  • fadeOutRightBig
  • fadeOutUpBig

The following fading animations do not have a, b for translate but fromX,fromY,toX,toY instead.

  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomLeft
  • fadeOutBottomRight

Sliding

Sliding animations are basically fading animations without a change of opacity. They can also receive the same params.

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Flippers

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

LightSpeed

  • lightSpeedIn
  • lightSpeedLeft
  • lightSpeedIn
  • lightSpeedOut
  • lightSpeedOutRight (same as lightSpeedOut)
  • lightSpeedOutLeft

Rotating

All rotating animations have additional params fromOpacity, toOpacity for opacity transition, origin for transform-origin and degrees for rotate3d.

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

Specials

  • jackInTheBox
  • hinge
  • rollIn
  • rollOut

Zooming

  • zoomIn
  • zoomOut

The following zooming animations have additional params a, b for translate

  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Advanced params

Many of the animations support also other params like scale, fromOpacity, toOpacity and much more, allowing extremely flexible usage and customization if you're not happy with default values.

Single letters like a, b, c, d are used for the steps of some animations: a is the starting value, d is the ending.
The animated property they refer to depends on the animation and the direction: usually translate on axis Y from -Down/-Up, axis X for -Left/-Right.

useAnimation(bounceInDown, {
  params: {
    timing: 5,

    // Specify granular values for `translate` on axis Y during 'bounceInDown' 
    a: '-3000px',
    b: '25px',
    c: '-10px',
    d: '5px',
  }
})

More Repositories

1

pretty-algorithms

๐ŸŒŠ Pretty, common and useful algorithms with modern JS and beautiful tests
TypeScript
2,187
star
2

react-tiny-dom

๐Ÿ™ A minimal implementation of react-dom using react-reconciler
JavaScript
465
star
3

sinergia

โš’๏ธ Cooperative expensive tasks at 60fps via ES6 generators
JavaScript
162
star
4

react-kanban

๐Ÿ—“ Kanban board built with React.js and Redux
JavaScript
115
star
5

rx-polling

๐Ÿ“ฌ RxJS-based polling library with exponential backoff
TypeScript
66
star
6

gmail-smart-compose

A study implementation of Gmail Smart Compose trained with Keras and used in browser with Tensorflow.js
Jupyter Notebook
27
star
7

talks

Collection of my public talks
JavaScript
11
star
8

wealth

Personal financial management app in pure Javascript
JavaScript
9
star
9

billy

๐Ÿ“  Angular 2+, RxJS and Redux Invoice Application
TypeScript
9
star
10

fedra-thesis

Next-generation system for Computing Continuum via WebAssembly (WASM)
WebAssembly
7
star
11

ygo

๐Ÿƒ YuGiOh! PWA built with Web Components and hyperHTML
CSS
6
star
12

lab

Personal experiments with technologies
TeX
4
star
13

blog

Chronicles of a young developer's journey
MDX
3
star
14

gulp-react-browserify

๐Ÿ’ฅ Boilerplate for React.js development with Gulp and Browserify
JavaScript
3
star
15

gh-issues-for-comments

๐Ÿˆ Automatically create Github issues to use as blog comments
JavaScript
3
star
16

inkmark

Progetto P2
C++
2
star
17

libromastro

A webapp to keep track of your stock operations
TypeScript
2
star
18

fsm-editor

Finite State Machine editor
TypeScript
2
star
19

metalsmith-gh-comments

Metalsmith plugin for Github issues as blog comments
JavaScript
2
star
20

daisyhub

The favourite hub for Animal Crossing turnip exchange
TypeScript
2
star
21

telegram-nope-bot

A Telegram bot which alerts about NOPE value on tickers
TypeScript
2
star
22

webpack-react-boilerplate

Essential Webpack Boilerplate for React.js development with readable and minimal configuration
JavaScript
1
star
23

continuum

TeX
1
star
24

network-color

An educational game for anyone interested in Computer Science
TypeScript
1
star
25

brokerapi-rs

V2.16 Open Service Broker API compliant brokers in Rust
Rust
1
star
26

chattina

An MVC Chat, built in pure Javascript.
JavaScript
1
star
27

pwa

CSS
1
star
28

currency

๐Ÿ’ฐCurrency Exchange in React, Redux & Redux-Saga
JavaScript
1
star
29

jiayihu.github.io

Personal Website
JavaScript
1
star