How to make this slider more fluid?
I just built a custom slider based on CSS scale, blur and position transitions.
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.
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
- What are suggestions to make it more fluid?
- Should I use something else like jQuery animation?
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
Both their syntaxes are pretty easy to follow and in my experience, they perform very well, even on mobile devices.