Animated scrolling in Angular

Question

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approach I tried was to hide and show the component based on the scroll position of the page. Is there a better way to achieve this functionality?

@HostListener('window:scroll', ['$event']) onWindowScroll(e: any) {
  if (window.pageYOffset < 180) {
    this.heroShown = 0;
  } else {
    this.heroShown = 1;
  }
  console.log(e.target['scrollingElement'].scrollTop);
  console.log(document.body.scrollTop);
  console.log(window.pageYOffset);
}

css angular animation css-animations

Answer 1

Answer №1

If you want to achieve this effect, consider implementing an Intersection Observer. This observer triggers an event when the element becomes visible on the screen, allowing you to trigger your animation at that moment.

private createObserver() {
    const options = {
      rootMargin: '0px',
      threshold: this.threshold,
    };

    const isIntersecting = (entry: IntersectionObserverEntry) =>
      entry.isIntersecting || entry.intersectionRatio > 0;

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

Alternatively, you can also utilize a library like gsap which provides features like scrolltrigger for achieving similar effects. Refer to their documentation here.

Answer 2

If you want to achieve this effect, consider implementing an Intersection Observer. This observer triggers an event when the element becomes visible on the screen, allowing you to trigger your animation at that moment.

private createObserver() {
    const options = {
      rootMargin: '0px',
      threshold: this.threshold,
    };

    const isIntersecting = (entry: IntersectionObserverEntry) =>
      entry.isIntersecting || entry.intersectionRatio > 0;

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

Alternatively, you can also utilize a library like gsap which provides features like scrolltrigger for achieving similar effects. Refer to their documentation here.

Animated scrolling in Angular

Answer №1

Similar questions

What is causing the input tag and button tag to appear on separate lines instead of together?

Is there a way to extend a div to occupy two rows?

No translation or compiling of SCSS/SASS to CSS available

Allow only specific inner divs to dictate the width of the outer div

Implementing Service Communication

Understanding the behavior of CSS float (even after thorough examination of W3C documentation)

Shine a light on the input with a captivating outer

Customizing the styling of an anchor tag using CSS in Bootstrap

One way to ensure a necessary check on the mat-expansion-panel

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

There appears to be an issue with the indexes of the PointCloud

JavaScript Event Listener causing the Sticky Position to Break

How to prevent npm from being accessed through the command prompt

Guide to placing an element behind text using Bootstrap 3

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

Configuring the space beneath a multi-line text with a bottom border distance or shadow

Select a division and retrieve the identification of a different division

What is the correct way to express an object in an array?

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

After filling out the form, the user's entered information is instantly shown on the same page