Animation lag on android device

ionic-v1
1

I’ve animated in Javascript using TweenLite. Basically, I did this:

.animation("animation",function() {
    return {
        leave: function(element,done) {
            TweenLite.to(element,0.5,{"margin-left":"-100%","margin-right":"100%", ease:Power4.easeInOut, onComplete:done});
        }, enter: function(element,done) {
            TweenLite.fromTo(element,0.5,
            {"margin-left":"-100%","margin-right":"100%",ease:Power4.easeInOut},
            {"margin-left":"0%","margin-right":"0%",ease:Power4.easeInOut, onComplete:done});
        }
    }
})

When I apply to a div, which is inside an ion-content, which is inside an ion-nav-view (the index.html one, used to inject templates), the animation is fired, it works as intended. However, it is soooo laggy. Seems like I’m watching the animation run at 10fps or so. Is there a way to fix this?

Oh, and is there a way to apply animations to ion-tabs? Thanks!

2

I revisited this code. Using pure CSS instead of TweenLite helped the performance. It’s still laggy and definitely not optimal.

3

What kind of animation are you trying to achieve?
Could you provide a demo of this?

4

It’s a simple animation using ng-if.

I have 2 divs, which only one is visible at a time. Both divs have an ng-if condition. So when one is supposed to be showing, the other one is hid. The animations are working, however, they are just laggy. I’ve done them in CSS:

.tab-slide-right-left, .tab-slide-top-bot, .tab-slide-left-right {

	-webkit-transition-duration: 0.500s;
	-moz-transition-duration: 0.500s;
	-o-transition-duration: 0.500s;
	transition-duration: 0.500s;

	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;

	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}

.tab-slide-top-bot.ng-enter {

	margin-top: -100%;
	margin-bottom: 100%;
}

.tab-slide-top-bot.ng-enter-active {

	margin-top: 0%;
	margin-bottom: 0%;
}

.tab-slide-top-bot.ng-leave {

	margin-top: 0%;
	margin-bottom: 0%;	
}

.tab-slide-top-bot.ng-leave-active {

	margin-top: -100%;
	margin-bottom: 100%;
}

.tab-slide-right-left.ng-enter {

	margin-left: 100%;
	margin-right: -100%;
}

.tab-slide-right-left.ng-enter-active {

	margin-left: 0%;
	margin-right: 0%;
}

.tab-slide-right-left.ng-leave {

	margin-left: 0%;
	margin-right: 0%;
}

.tab-slide-right-left.ng-leave-active {

	margin-left: 100%;
	margin-right: -100%;
}

So, the issue is:

They run slow. They run as intended, but slow.

5

I mean, its no wonder why they’re slow/laggy, the animations aren’t hardware accelerated.
Animating the margin property is done on the cpu, along with all the other app processes.
But if you switch to use translate3d, it gets forced onto the GPU, and will be much smoother.

2 Likes
6

Thanks a lot. This solved the issue completely.

3 Likes