opd-animator
v0.0.7
Published
Animate on scroll web component
Downloads
427
Readme
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>