From 8c47a9a6acc56b2c1c0f941cf0a01e54448b2755 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 28 Aug 2014 18:08:23 +0200 Subject: [PATCH] improve animation performance the reason for a bad animation performance might not have been the scroll animation capabilities of velocity.js but that I forgot to use the hardware accelerated 'translateY' instead of 'top' for the animation. --- .../app/controllers/ticket_zoom.js.coffee | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index 2cd791b81..b6c8909da 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -753,8 +753,8 @@ class ArticleView extends App.Controller easing: 'easeOutQuad' ) - metaTop.velocity({ top: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) - metaBottom.velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) + metaTop.velocity({ translateY: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) + metaBottom.velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide')) metaTopClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad') metaBottomClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad') else @@ -771,11 +771,11 @@ class ArticleView extends App.Controller ) metaTop - .velocity({ top: metaTop.outerHeight(), opacity: 0 }, 0) - .velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad') + .velocity({ translateY: metaTop.outerHeight(), opacity: 0 }, 0) + .velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad') metaBottom - .velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, 0) - .velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad') + .velocity({ translateY: -metaBottom.outerHeight(), opacity: 0 }, 0) + .velocity({ translateY: 0, opacity: 1 }, animSpeed, 'easeOutQuad') metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad') metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad')