Ionic trigger animation when element is in visible on phone

Ionic Framework ionic-v3
1

Hi Folks,

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

Here is what I want to achieve:

I have multiple charts on my page. Each of them has some very nice animation (fancy pie chart animation and so on). Now I face the problem, that my content is to large to display on a mobile display. Yes a common problem. So to improve the user experience I want to trigger the animation when the user scrolls down to the specific chart.

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)

What I need:

I do not want you guys to write my code, but I really need some fresh input how to resolve this problem. Maybe there is some “ionic” way to do this or a plugin someone is already using in his project.

Please let me know if anyone of you have some great input.

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!
Cheers Phil

1 Like
2

As there was no answer for a couple of days I created a stackoverflow ticket:

3

Me too, tried using AOS.js or wowjs or scoll-out.js, and none of them worked due to unable to detect scroll events using the traditional window.addEventListener…