AnimateOnScroll

Basic

Scroll inside the example to reveal the cards. Scroll back up and down to replay their entrance and exit animations.

Once

By default the observer disconnects after the first entrance. Use Replay to create a fresh example.

Events and disabled state

Scroll the card in and out of view to count crossings. Disabling the directive removes its animation classes.

Usage and API

import { AvAnimateOnScroll } from 'avero-ui';

<div avAnimateOnScroll enterClass="fade-up" leaveClass="fade-out"
  [once]="false" [threshold]="0.15">
  Content appears as you scroll.
</div>

/* Define the animation classes in your own stylesheet. */
.fade-up { animation: reveal .6s ease-out both; }
.fade-out { animation: fade .2s ease-out both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-out { animation: none; }
}

Import AvAnimateOnScroll and add avAnimateOnScroll to an element. enterClass and leaveClass accept space-separated CSS classes. Define animations in your application; no animation package is required.

once defaults to true. Set it to false for repeated entry and exit. threshold is a visible fraction from 0 to 1 (default 0); rootMargin accepts up to four px or % values (default 0px). Invalid margins fall back to 0px. Changes to configuration restart observation.

onEnter and onLeave emit the matching IntersectionObserverEntry. The initial offscreen state does not emit a leave event. disabled stops observation and removes only classes added by the directive, preserving existing host classes.

Reduced motion preferences disable observation and animation classes, including when the preference changes. Server rendering and browsers without IntersectionObserver keep content visible. Avoid hiding essential content in your base CSS, and provide a reduced-motion fallback for your own animation styles.

Reference: PrimeNG AnimateOnScroll.