How to make this slider more fluid?


Tags: jquery,css3,css-transitions

Problem :

I just built a custom slider based on CSS scale, blur and position transitions.

Demo : https://jsfiddle.net/Paf_Sebastien/sjxrtny8/

Don't focus on functionality, I'd just like to make it more fluid.

The idea is to have a set of "cards". The 1st is sharp and has a normal size, the followings are smaller, blurred and downscaled. The more they are far, the more they are blurred and small.

enter image description here

How is animation handled : jQuery checks and update positions, then give to each card a new position, blur and scale. So CSS changes are made instantly, and the animations are made by CSS transition property.

  • What are suggestions to make it more fluid?
  • Should I use something else like jQuery animation?


Solution :

CSS animation has limitations in terms of performance. For simple things like transforms, CSS does well. But anything more complicated, IMO, combining with blurs and other transitions will slow down.

jQuery is has animating features, but it's not an animation library. So it's animate() methods are sometimes pretty slow.

For your purposes, I'd recommend using a true animation library that is more performant. Two libraries come to mind: GSAP and Velocity.

Why jQuery is not Good for Animation
http://davidwalsh.name/css-js-animation

GSAP
http://greensock.com/gsap
GSAP vs CSS3 performance: https://greensock.com/transitions/

Velocity.js
http://julian.com/research/velocity/

Both their syntaxes are pretty easy to follow and in my experience, they perform very well, even on mobile devices.


    CSS Howto..

    How to make horizontal lines with words in the middle using CSS?

    Show popout bubble above when no space available below

    How to make CSS input range thumb not appear at first

    how to set menu to activate always hover effect on [closed]

    How can I prevent this plugin from popping up from behind the content area?

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    How to offset div columns in CSS grid system

    How can I hide a style element in html

    After ul li's float left ,how can I make text-align center?

    how to use text-indent only with element not ont it's :before Selector?

    How to select two elements with “> span” in CSS?

    Symfony2 Form Type - how to set form CSS class as attribute?

    How to output different images depend on user screen?

    How to center align text over CSS shape?

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How to override default css style rule of Bootstrap

    How do I get this CSS to work in safari

    how to read value of style[“display”] property of webcontrol

    How to position tables in ie 9 using css?

    How can I get a jquery css container to pop up letting the user know data was successfully entered?

    How would you design the css and html to divide up this rounded widget?

    How to let users have the latest non cached code?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How to remove default document style from an element using Javascript

    How to select first a element of li with CSS?

    How to style a outgoing email from contact form with CSS

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to apply css to an iframe

    how to make image in over than other like this

    How can I make a fluid width, fluid height, fixed header table with jQuery?