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 handle javascript & css files across a site?

    Force jQuery show/hide to respect display: table?

    How to make a custom checkbox and radio button in pure css?

    How to split page in half using CSS?

    Using CSS, how can I change the alignment of a click-to-open UL menu?

    How to make this loading overlay effect responsive?

    How to achieve this layout with div and css?

    How can I append the images from this JSON file properly into the correct divs

    how to overwrite global css to div tag which contains different html tags with different style

    iOS How to access Library in CSS Url's?

    How to create page breaks automatically in CSS?

    How can I make my div to remain fixed and no longer change position?

    How to add css to modules in prestashop 1.5?

    views_slideshow controls modification Drupal 7

    How to deal with DIV position and height

    How to apply css in react component when using ES6?

    css how to align a div to the top of a containing div

    How to make smooth animation in css?

    How to reject specify HTML tags by using css or xpath selector

    loading images to show them offline

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to rotate image in relation to mouse position?

    How do I implement CSS + JavaScript scripts on specific pages on our Drupal site? [closed]

    How to correctly style drop-down menu

    How do I correct overlapping spacing error in CSS when it wraps text?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    How to layer a
    element ontop of a other elements

    How to make a themeable web application using CSS?

    How to get css to work in Django [closed]