Animation with gsap on ionic is choppy on android


#1

I have been trying to make a tinder style swipe with some dragging and sticking by listening on drag event to update an object position using gsap (TweenMax).

Somehow when I do the profiling on chrome devtools, I found that the events are taking up a ton of time that ultimate leads to choppy animation when tested on my galaxy nexus.

It is slow especially in the beginning of dragging, it doesn’t feel native at all.

I wonder if there is a better way to do this.

This is an example screenshot where I try to drag really fast in the beginning.

This is the time that takes from dragstart to dragend. I filter out rendering and layout for clarity.

I see a lot of repetition where ionic and TweenMax keep calling install and remove timer. I wonder if it is possible to reduce the amount of time ionic or gsap could spend in timers? Or is it the culprit?

Is there a better way to write this?

---------------- Edit --------------------

Just made a different graph this time, I notice that although it might be helpful to reduce the timer from ionic, gsap is actually taking more time than it should. Maybe I should move to a different animation library?