This is a library for declarative use of Intersection Observer API with Angular For Animation.
This project was generated with Angular CLI version 9.0.0.
npm i angular-slide-up
You must install "IntersectionObserver polyfill" for all browser support
-
Install IntersectionObserver polyfill into your project
npm i intersection-observer
-
Import IntersectionObserver polyfill inside
polyfills.ts
into your projectimport "intersection-observer";
-
Import
AngularSlideUpModule
inside your AppModule (src/app/app.module.ts
) -
Import below code snippet inside your root stylesheet(
src/styles.scss
)
.defaultFadeInUp {
opacity: 0;
}
.fadeInUp {
animation-duration: 1s;
animation-fill-mode: "both";
animation-name: fadeInUp;
}
@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
Apply slideup animation by adding directive:
Without Stagger
<section angularSlideUp>
<div>Angular SlideUp Animation</div>
<div>Successfully Applied</div>
<div>On This Text/Section.</div>
</section>
With Stagger
<section [angularSlideUp]="true">
<div [attr.stagger]="true">Angular SlideUp Animation</div>
<div [attr.stagger]="true">Successfully Applied</div>
<div [attr.stagger]="true">On This Text/Section.</div>
</section>
Alternatively you can use Observable
-based services:
IntersectionObserverService
can be used to observe single element independently. Provide tokens manually to configure it:
@Component({
selector: "primathon-component",
providers: [
IntersectionObserverService,
{
provide: INTERSECTION_THRESHOLD,
useValue: 0.2,
},
{
provide: INTERSECTION_ROOT_MARGIN,
useValue: "0px",
},
],
})
export class PrimathonComponent {
constructor(
@Inject(IntersectionObserverService)
intersectionObserverService$: IntersectionObserverService
) {
intersectionObserverService$.subscribe((entries) => {
// Don't forget to unsubscribe
console.log(entries);
});
}
}
Demo url https://primathontech.github.io/angular-slideup/
Other Web APIs for Angular by @primathontech