Angular 4 - how to trigger an animation when a div comes into the viewport?

Question

I've been building a new site using Angular 4 and i'm trying to re-create a effect where when a div becomes visible (when you scroll down the screen) then that can then trigger a angular animation to slide the div in form the sides.

I've been able to do this in the past using jQuery outside of Angular 4 but i want to try and create the same effect using native Angular 4 animations.

Can anyone offer me advice on how to trigger an animation when a div comes into view (i.e. scrolled down to lower part of the page as it enters the viewport?). I have written the slide animations already but i don't know how to trigger that with a scroll when a div becomes visible at a later date to the view port.

Thanks everyone!

Not sure but can this link be helpful https://angular.io/docs/ts/latest/guide/animations.html#!#parallel-animation-groups ? — sandyJoshi, Apr 23 '17 at 17:31
Hi Sandy, I did have a look through that and Parallel animation groups approach helps chain animations but it doesn't seem to have a way to trigger when a div enters the viewpoint after scrolling to a lower point of the page which could happen at a variable time when the used decides to scroll down to the div. Do you know any solution to this UI behaviour? — Ultronn, Apr 23 '17 at 17:39

score 20 · Accepted Answer · edited Feb 18 '22 at 10:59

I've created a directive that emits an event as soon as the element is either completely within view or it's upper edge has reached view's upper edge.

Here's a plunker: https://embed.plnkr.co/mlez1dXjR87FNBHXq1YM/

It's used like this:

<div (appear)="onAppear()">...</div>

Here's the directive:

import {
  ElementRef, Output, Directive, AfterViewInit, OnDestroy, EventEmitter
} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/startWith';

@Directive({
  selector: '[appear]'
})
export class AppearDirective implements AfterViewInit, OnDestroy {
  @Output()
  appear: EventEmitter<void>;

  elementPos: number;
  elementHeight: number;

  scrollPos: number;
  windowHeight: number;

  subscriptionScroll: Subscription;
  subscriptionResize: Subscription;

  constructor(private element: ElementRef){
    this.appear = new EventEmitter<void>();
  }

  saveDimensions() {
    this.elementPos = this.getOffsetTop(this.element.nativeElement);
    this.elementHeight = this.element.nativeElement.offsetHeight;
    this.windowHeight = window.innerHeight;
  }
  saveScrollPos() {
    this.scrollPos = window.scrollY;
  }
  getOffsetTop(element: any){
    let offsetTop = element.offsetTop || 0;
    if(element.offsetParent){
      offsetTop += this.getOffsetTop(element.offsetParent);
    }
    return offsetTop;
  }
  checkVisibility(){
    if(this.isVisible()){
      // double check dimensions (due to async loaded contents, e.g. images)
      this.saveDimensions();
      if(this.isVisible()){
        this.unsubscribe();
        this.appear.emit();
      }
    }
  }
  isVisible(){
    return this.scrollPos >= this.elementPos || (this.scrollPos + this.windowHeight) >= (this.elementPos + this.elementHeight);
  }

  subscribe(){
    this.subscriptionScroll = Observable.fromEvent(window, 'scroll').startWith(null)
      .subscribe(() => {
        this.saveScrollPos();
        this.checkVisibility();
      });
    this.subscriptionResize = Observable.fromEvent(window, 'resize').startWith(null)
      .subscribe(() => {
        this.saveDimensions();
        this.checkVisibility();
      });
  }
  unsubscribe(){
    if(this.subscriptionScroll){
      this.subscriptionScroll.unsubscribe();
    }
    if(this.subscriptionResize){
      this.subscriptionResize.unsubscribe();
    }
  }

  ngAfterViewInit(){
    this.subscribe();
  }
  ngOnDestroy(){
    this.unsubscribe();
  }
}

for ie11 compatibillity you can change window.scrollY to document.documentElement.scrollTop. — Martin Cremer, Oct 05 '17 at 15:12
document.documentElement.scrollTop doesnt work in osx safari - its always 0 — godblessstrawberry, Mar 15 '18 at 17:55
UPDATE: This code has to use IntersectionObserver to be relevant in 2020 — ssougnez, Dec 04 '20 at 16:54

score 10 · Answer 2 · edited Sep 17 '20 at 20:10

Martin Cremer's answer updated to work with latest Rxjs and Angular versions, hope this helps

import {
    ElementRef, Output, Directive, AfterViewInit, OnDestroy, EventEmitter
} from '@angular/core';
import { Subscription } from 'rxjs';
import { fromEvent } from 'rxjs';
import { startWith } from 'rxjs/operators';

@Directive({
    selector: '[appear]'
})
export class AppearDirective implements AfterViewInit, OnDestroy {
    @Output() appear: EventEmitter<void>;

    elementPos: number;
    elementHeight: number;

    scrollPos: number;
    windowHeight: number;

    subscriptionScroll: Subscription;
    subscriptionResize: Subscription;

    constructor(private element: ElementRef) {
        this.appear = new EventEmitter<void>();
    }

    saveDimensions() {
        this.elementPos = this.getOffsetTop(this.element.nativeElement);
        this.elementHeight = this.element.nativeElement.offsetHeight;
        this.windowHeight = window.innerHeight;
    }
    saveScrollPos() {
        this.scrollPos = window.scrollY;
    }
    getOffsetTop(element: any) {
        let offsetTop = element.offsetTop || 0;
        if (element.offsetParent) {
            offsetTop += this.getOffsetTop(element.offsetParent);
        }
        return offsetTop;
    }
    checkVisibility() {
        if (this.isVisible()) {
            // double check dimensions (due to async loaded contents, e.g. images)
            this.saveDimensions();
            if (this.isVisible()) {
                this.unsubscribe();
                this.appear.emit();
            }
        }
    }
    isVisible() {
        return this.scrollPos >= this.elementPos || (this.scrollPos + this.windowHeight) >= (this.elementPos + this.elementHeight);
    }

    subscribe() {
        this.subscriptionScroll = fromEvent(window, 'scroll').pipe(startWith(null))
            .subscribe(() => {
                this.saveScrollPos();
                this.checkVisibility();
            });
        this.subscriptionResize = fromEvent(window, 'resize').pipe(startWith(null))
            .subscribe(() => {
                this.saveDimensions();
                this.checkVisibility();
            });
    }
    unsubscribe() {
        if (this.subscriptionScroll) {
            this.subscriptionScroll.unsubscribe();
        }
        if (this.subscriptionResize) {
            this.subscriptionResize.unsubscribe();
        }
    }

    ngAfterViewInit() {
        this.subscribe();
    }
    ngOnDestroy() {
        this.unsubscribe();
    }
}

Martin Cremer · Answer 3 · 2017-09-13T17:42:31.050

I've created a base component that provides a flag appearedOnce, which turns true once if the component is either completely within view or it's upper edge has reached view's upper edge.

@Injectable()
export class AppearOnce implements AfterViewInit, OnDestroy {
  appearedOnce: boolean;

  elementPos: number;
  elementHeight: number;

  scrollPos: number;
  windowHeight: number;

  subscriptionScroll: Subscription;
  subscriptionResize: Subscription;

  constructor(private element: ElementRef, private cdRef: ChangeDetectorRef){}
  onResize() {
    this.elementPos = this.getOffsetTop(this.element.nativeElement);
    this.elementHeight = this.element.nativeElement.clientHeight;
    this.checkVisibility();
  }
  onScroll() {
    this.scrollPos = window.scrollY;
    this.windowHeight = window.innerHeight;
    this.checkVisibility();
  }
  getOffsetTop(element: any){
    let offsetTop = element.offsetTop || 0;
    if(element.offsetParent){
      offsetTop += this.getOffsetTop(element.offsetParent);
    }
    return offsetTop;
  }

  checkVisibility(){
    if(!this.appearedOnce){
      if(this.scrollPos >= this.elementPos || (this.scrollPos + this.windowHeight) >= (this.elementPos + this.elementHeight)){
        this.appearedOnce = true;
        this.unsubscribe();
        this.cdRef.detectChanges();
      }
    }
  }

  subscribe(){
    this.subscriptionScroll = Observable.fromEvent(window, 'scroll').startWith(null)
      .subscribe(() => this.onScroll());
    this.subscriptionResize = Observable.fromEvent(window, 'resize').startWith(null)
      .subscribe(() => this.onResize());
  }
  unsubscribe(){
    if(this.subscriptionScroll){
      this.subscriptionScroll.unsubscribe();
    }
    if(this.subscriptionResize){
      this.subscriptionResize.unsubscribe();
    }
  }

  ngAfterViewInit(){
    this.subscribe();
  }
  ngOnDestroy(){
    this.unsubscribe();
  }
}

You can simply extend this component and make use of the appearedOnce property by inheritance

@Component({
  template: `
    <div>
      <div *ngIf="appearedOnce">...</div>
      ...
    </div>
  `
})
class MyComponent extends AppearOnceComponent {
    ...
}

Keep in mind to call super() if you need to overwrite constructor or lifecyclehooks.

(edit) plunker: https://embed.plnkr.co/yIpA1mI1b9kVoEXGy6Hh/

(edit) i've turned this into a directive in another answer below.

Hi Martin, Thats a really interesting solution. Could you describe how to implement the same logic in a existing component and what imports are needed for the component. I'm relatively new to angular and would really welcome the detail on implementation. thanks. — Ultronn, Jul 09 '17 at 07:46
i've created a little plnkr: https://embed.plnkr.co/yIpA1mI1b9kVoEXGy6Hh/ There's an example component (TurnGreenWhenInViewComponent) that extends AppearOnce and uses it's appearedOnce flag to turn green after it appeared once. — Martin Cremer, Jul 09 '17 at 19:59
i've added another answer with almost the same thing, but as a directive. — Martin Cremer, Sep 13 '17 at 17:40
I tried to implement this solution. However, when I call `super()` it tells me I need to give it 2 parameters. Looking at the constructor you use: `private element: ElementRef, private cdRef: ChangeDetectorRef`. What should that be? — J Agustin Barrachina, May 19 '20 at 11:01

score 2 · Answer 4 · answered Apr 30 '19 at 13:10

A simple way if you want it in a specific component:

@ViewChild('chatTeaser') chatTeaser: ElementRef;

@HostListener('window:scroll')
checkScroll() {
    const scrollPosition = window.pageYOffset + window.innerHeight;

    if (this.chatTeaser && this.chatTeaser.nativeElement.offsetTop >= scrollPosition) {
        this.animateAvatars();
    }
}

And in html:

<div id="chat-teaser" #chatTeaser>

Exactly when the top of the element is scrolled to the function is called. If you want to call the function only when the full div is in view add the div height to this.chatTeaser.nativeElement.offsetTop.

score 2 · Answer 5 · answered Sep 24 '21 at 18:17

The answer given by Martin Cremer is perfect.

Unless you want this to work on a angular app using ssr

`Angular Universal`

I have modified the existing accepted answer to work in ssr below

Create an injectable service to be able to use window object in backend

import { Injectable } from '@angular/core';

export interface ICustomWindow extends Window {
  __custom_global_stuff: string;
}

function getWindow (): any {
  return window;
}

@Injectable({
  providedIn: 'root',
})
export class WindowService {
  get nativeWindow (): ICustomWindow {
    return getWindow();
  }
}

Now, create a directive to notify when the element is in viewable area

import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
import { WindowService } from './window.service';

@Directive({
  selector: '[appear]'
})
export class AppearDirective {

  windowHeight: number = 0;
  elementHeight: number = 0;
  elementPos: number = 0;

  @Output()
  appear: EventEmitter<boolean>;

  constructor(
    private element: ElementRef,
    private window: WindowService
  ) {
    this.appear = new EventEmitter<boolean>();
  }

  checkVisible() {
    if (this.elementPos < this.window.nativeWindow.scrollY + this.windowHeight) {
      this.appear.emit(true);
      this.appear.complete();
    }
  }

  @HostListener('window:scroll', [])
  onScroll() {
    this.checkVisible();
  }

  @HostListener('window:load', [])
  onLoad() {
    this.windowHeight = (this.window.nativeWindow.innerHeight);
    this.elementHeight = (this.element.nativeElement as HTMLElement).offsetHeight;
    this.elementPos = (this.element.nativeElement as HTMLElement).offsetTop;
    this.checkVisible();
  }

  @HostListener('window:resize', [])
  onResize() {
    this.windowHeight = (this.window.nativeWindow.innerHeight);
    this.elementHeight = (this.element.nativeElement as HTMLElement).offsetHeight;
    this.elementPos = (this.element.nativeElement as HTMLElement).offsetTop;
    this.checkVisible();
  }

}

Create a new function in the component


onAppear() {
    // TODO: do something
}

Add the directive to your element

<!-- ... -->
<h2 (appear)="onAppear()">Visible</h2>
<!-- ... -->

score 1 · Answer 6 · answered Jan 27 '22 at 10:26

There is a newer API which is designed to handle this exact problem: IntersevtionObserver. Using this will allow you to do away with all the manual offset calculations & keeping local state. Here's a simple example using this API:

import { AfterViewInit, Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core';

/**
 * @description
 * Emits the `appear` event when the element comes into view in the viewport.
 *
 */
@Directive({
    selector: '[visibleSpy]',
})
export class OnVisibleDirective implements AfterViewInit, OnDestroy {
    @Output() appear = new EventEmitter<void>();
    private observer: IntersectionObserver;

    constructor(private element: ElementRef) {}

    ngAfterViewInit() {
        const options = {
            root: null,
            rootMargin: '0px',
            threshold: 0,
        };

        this.observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    this.appear.next();
                }
            });
        }, options);

        this.observer.observe(this.element.nativeElement);
    }

    ngOnDestroy() {
        this.observer.disconnect();
    }
}

score 0 · Answer 7 · answered Nov 15 '19 at 10:50

Here is a simple example of an infinity scroll; it triggers handleScrollEvent() when the element comes inside the viewport.

inside item-grid.component.html

<span [ngClass]="{hidden: curpage==maxpage}" (window:scroll)="handleScrollEvent()" (window:resize)="handleScrollEvent()" #loadmoreBtn (click)="handleLoadMore()">Load more</span>

inside item-grid.component.ts:

@ViewChild('loadmoreBtn') loadmoreBtn: ElementRef;
curpage: number;
maxpage: number;

ngOnInit() {
  this.curpage = 1;
  this.maxpage = 5;
}

handleScrollEvent() {
  const { x, y } = this.loadmoreBtn.nativeElement.getBoundingClientRect();
  if (y < window.innerHeight && this.maxpage > this.curpage) {
    this.curpage++;
  }
}