Ionic 2 trigger animation when element is in visible on phone

Question

I'm building a hybrid app with Ionic https://ionicframework.com/ . Now a have added some fancy charts with http://chartjs.org . All works perfect except that that some charts are not visible yet because the content is too large to display. So if the user scrolls down the chart is displayed correctly but I want it to animate once the chart is in within the visible area of the viewport.

I have tried various plugins out there but none of them seem to work.

https://www.npmjs.com/package/ng2-inview

https://www.npmjs.com/package/angular2-viewport

Some of those plugins simple do not registerer any scroll event and therefore do not work. Some only get triggered once (once the page is loaded).

So either I am using this plugins the wrong way, or they do not work properly on a smartphones virtual browser. Anyway If someone has some good idea, a better plugin or any input how I could make this work I would very appreciate it!

If there is no better way I would consider to implement this with pure javascript / jquery but not knowing if this works for each platform. (eg https://www.sitepoint.com/scroll-based-animations-jquery-css3/ )

Thanks a lot folks!

Answer 1

Sorry if I come here too late, but maybe I have a solution for you.

I had a similar case and needed to trigger a function when a div is visible on screen. I tried the plugins you posted and couldn't make them work, so I did some tests and found out that on my <ion-content> element I can do the following:

<ion-content (ionScroll)="functionToTriggerOnScroll()">

And this works like a charm!

For your specific situation I suggest to give an id to the div that contains the charts you want to animate and do the following:

functionToTriggerOnScroll() {
    if (this.isElementInViewport(document.getElementById('charts-container'))) {
        // animate charts...
    }
}

isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Hope this can help!

Answer 2

If you use Waypointsjs with Ionic 4 , you can try a configuration similar to this:

const homeContent = document.querySelector('.homeContent')
const innerScroll = homeContent.shadowRoot.querySelector('.inner-scroll')
const element = homeContent.querySelector('.my-element')
const waypoint = new Waypoint({
  context: innerScroll,
  offset: '30%',
  element: element,
  handler: function (direction) {
    console.log('on scrolling', direction, this.element)
  }
})

It works very well, check this website of example => https://proyecto26.com/

Regards, Nicholls