opd-animator

opd-animator

Animation build with IntersectionObserver, animates when visible in browser

Properties

Animation types

• slindeInUp
• slideInDown
• slideInLeft
• slideInRight
• slindeInUpSmall
• slideInSmall

Plug into Angular

In src/main.js add:

import { defineCustomElements, applyPolyfills } from 'opd-animator/loader';


defineCustomElements(window);
applyPolyfills().then(() => {
    defineCustomElements(window);
  });

In you Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

In html

<opd-animator anim-dealy="800ms" 
anim-duration="1s" anim-type="slideInLeft">
    <H1>Animating content</H1>
</opd-animator>