You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
Contents
Recent Posts
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- The Real State of JavaScript 2018
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Animate a Component Based on Scroll Position Angular 4.2
written by Jeff Delaney
Update! Watch the latest video and get the most up-to-date code by watching videos tagged with animation on Fireship.io
This snippet uses HostListener keep track of the scroll position of a component and animates it in and out the view based on its position in the browser window.
Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="box" [@scrollAnimation]="state"> | |
| <img src="https://images.pexels.com/photos/37547/suit-business-man-business-man-37547.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, HostListener, ElementRef } from '@angular/core'; | |
| import { | |
| trigger, | |
| state, | |
| style, | |
| animate, | |
| transition | |
| } from '@angular/animations'; | |
| @Component({ | |
| 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' | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| A whole bunch of text...... | |
| </div> | |
| <content-box></content-box> |