How to implement a "scroll reveal" effect in Ionic-Angular (v5) found on the ionic homepage

@sakotturi wrote:

I would like to implement the effect of showing certain elements/components based on the scroll position. This is similar to the https://ionicframework.com/ page which beautifully reveals elements using a delay and scroll position.

I’ve been able to reproduce something similar using ng-in-viewport but it’s nowhere near as cool as the ionic page.

template:

   <ion-card
      inViewport
      [inViewportOptions]="{ partial: true, threshold: [0.5] }"
      (inViewportAction)="onIntersection($event)"
      class="activateOnScroll"
    >

scss:

.activateOnScroll {
  opacity: 0;
  -webkit-transform: translateY(48px);
  transform: translateY(48px);
  transition: .4s opacity,.8s -webkit-transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95),.8s -webkit-transform cubic-bezier(.07,.89,.79,.95)
}

.activateOnScroll.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1
}

ts:

  public onIntersection({
    target,
    visible
  }: {
    target: Element;
    visible: boolean;
  }): void {
    this.renderer.addClass(target, visible ? 'active' : 'inactive');
    this.renderer.removeClass(target, visible ? 'inactive' : 'active');
  }

I don’t find that the renderer correctly captures these events. It does sometimes, misses them sometimes. I’ve got this wired up on a dozen components, it works on most of them, most of the time but it misses a lot.

My guess is that this is perhaps related to ion-content having it’s own scroll container? I’m guessing this because I’ve used ngx-scrollreveal on pure angular projects and it works great but doesn’t work with ionic projects https://github.com/tinesoft/ngx-scrollreveal

Maybe someone more familiar with the ionic homepage could show us how to do this within an Ionic Angular app?! I tried searching through the homepage source code but couldn’t see where the active class is being applied in js.

Posts: 1

Participants: 1

Read full topic