0.0.7 • Published 4 years ago
opd-animator v0.0.7
opd-animator
Animation build with IntersectionObserver, animates when visible in browser
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
animDealy | anim-dealy | string | "0" | |
animDuration | anim-duration | string | "1s" | |
animType | anim-type | string | "slideInUp" |
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>