Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Animate a div based on scroll position Angular 4.3
<div class="box" [@scrollAnimation]="state">
<img src="">
import { Component, HostListener, ElementRef } from '@angular/core';
import {
} from '@angular/animations';
selector: 'content-box',
templateUrl: './content-box.component.html',
styleUrls: ['./content-box.component.scss'],
animations: [
trigger('scrollAnimation', [
state('show', style({
opacity: 1,
transform: "translateX(0)"
state('hide', style({
opacity: 0,
transform: "translateX(-100%)"
transition('show => hide', animate('700ms ease-out')),
transition('hide => show', animate('700ms ease-in'))
export class ContentBoxComponent {
state = 'hide'
constructor(public el: ElementRef) { }
@HostListener('window:scroll', ['$event'])
checkScroll() {
const componentPosition = this.el.nativeElement.offsetTop
const scrollPosition = window.pageYOffset
if (scrollPosition >= componentPosition) {
this.state = 'show'
} else {
this.state = 'hide'
A whole bunch of text......
Copy link

a good approach, but for only one div that needs to be animated. If you have multiple div elements, you won't be able to animate as scrolling down

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment