Skip to content
Small angular library to make it easy to animate elements in when ever they enter the viewport
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
e2e
example
src
.angular-cli.json
.editorconfig
.gitignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
README.md
karma.conf.js
ng-package.json
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

ngx-animate-in

A small directive to help you animate components in as they enter the viewport.

Example (src)

Browser support

The directive uses the experimental Intersection Observer API. Because of this, it's only supported in evergreen browsers, meaning anything but IE pretty much.

Check the Browser compatibility table carefully before using this in production.

Polyfill

It is possible to polyfill the Intersection Observer in older browsers.

There are several solutions I do however suggest you use this, made by google.

Installing the polyfill:

npm install intersection-observer

Then import it in your polyfills.ts if you're using Angular CLI. If you aren't, simply add it to one of your top level ts files such as main.ts like this:

import 'intersection-observer'

Installation

npm install --save ngx-animate-in

Usage

First, import the AnimateInModule in your app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AnimateInModule } from 'ngx-animate-in';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AnimateInModule
  ],
  declarations: [
    AppComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then add the animateIn attribute to the element(s) you wish to animate in once its visible in the viewport.

<div class="greetings center">
  <div>
    <h1 animateIn>{{'Hello from App Component'}}</h1>
  </div>
</div>

If you look in your browser, your element should now be sliding in from the left while fading in, as soon as 10% of it is within the viewport (These options can be changed).

Using your own animations

You can also specify your own animation by passing in an animation array in the "animateInAnimation" attribute on your elements.

It expects one or more animations of the type AnimationMetadata so you can build it just like you would with any Angular animation.

Example of a custom animation:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { animate, style } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `<div class="greetings center">
    <div>
      <h1 animateIn>{{'Hello from App Component'}}</h1>
      <h2 animateIn [animateInAnimation]="customAnimation">Custom animation!</h2>
    </div>
  </div>
  `,
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {

  customAnimation = [
    style({opacity: 0, transform: 'rotate(355deg)'}),
    animate('600ms cubic-bezier(0.35, 0, 0.25, 1)', style({opacity: 1, transform: 'rotate(0deg)'}))
  ];
  
}

Changing the default config

By default the root element of which we detect the intersection is the viewport. We also have a threshold of 10% meaning that the animation will not trigger until the element has 10% of its body within the viewport. It's also possible to define an offset of when the animation should start. For example, if you want it to trigger when it's 100px before the viewport. By default this is 0px.

The option type looks like this:

interface ObserverServiceConfig {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}

To override the defaults, simply pass a new config object into the forRoot function on the module like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AnimateInModule } from 'ngx-animate-in';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AnimateInModule.forRoot({
      threshold: 0,
      rootMargin: '-100px'
    })
  ],
  declarations: [
    AppComponent,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You only need to define the options you want changed, the rest will fall back to its defaults.

As of right now, these options will affect all elements that uses the directive, it will be possible to define option groups later that you can then attach your elements to.

License

MIT © Martin Hobert

You can’t perform that action at this time.