search

malihu / malihu-custom-scrollbar-plugin

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
http://manos.malihu.gr/jquery-custom-content-scroller
MIT License
4.11k stars 1.51k forks source link

CSS Transforms instead of positioning #35

Closed uuf6429 closed 11 years ago

uuf6429 commented 11 years ago

I must admit this got me stumped for a while. I thought this plugin required GSAP to make use of CSS transforms; but it seems it uses positioning to move viewport content.

I'm not sure if this is a bug or if I'm doing something wrong.

What I mean is, using transform: translate(<x>,<y>) instead of top/left: <pos>; dramatically increases performance.

malihu commented 11 years ago

Hello,

GSAP does not use CSS transitions. Still, it out-performs CSS transforms and provides precise control over animations. See more info here: http://www.greensock.com/transitions/ (speed tests: http://www.greensock.com/js/speed.html).

Before using GSAP, I tried CSS transform directly, as well as other libs like Zepto (http://zeptojs.com/) which animates via CSS transitions and performance was way below Greensock's tweens.

Later today, I'll post the new plugin version that does not require GSAP anymore. I decided to create my own vanilla-js tween function in order to decrease plugin size and keep it completely free (GPL/CC). I've made the animation perform as good as possible using requestAnimationFrame, performance.now etc. Again, I tried a rough comparison with translate(x,y) and the lightweight-pure js tween performs better.

I'll keep experimenting with js and CSS transitions and apply the one that performs best :)