Use CSS transitions

[ivandotv]

Cycle2 is a great slideshow, but animations on handheld devices are very jerky. Is there a way to use CSS3 transition for animations?

[malsup]

That's something I'll add at some point, but it's not currently supported.

[ivandotv]

I've tried to overwrite the animations and use https://github.com/benbarnett/jQuery-Animate-Enhanced for transitions, but I haven't had much luck.

[keeganbrown]

ikixxx, add -webkit-transform: translate3d(0,0,0) to the style of the cycle container itself and see if that solves your problem. There's more than one way to skin that cat.

[joeworkman]

I agree... this would be awesome.

[wonderment]

I wanted to note keeganbrown's suggestion on my overall wrapper for the carousel improved the sliding smoothness ten fold. Thank you!

[bbmatt]

As a long-term user of jquery cycle, I've been looking into css transition alternatives myself, but beware, here be dragons right at the moment!

Check Paul Irish on moving elements and translate, in particular the comments: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ It's fairly clear there's no level playing field regarding performance increases / rendering issues and just plain bugginess.

Then we have alex maccaw with his excellent article about css transitions: http://blog.alexmaccaw.com/css-transitions Note the warnings in the hardware acceleration section and in particular, note how recent builds of Chrome are already using the GPU for opacity and 2d. Finally, there's iOS issues with translate3d.

In short, it's a fast moving target at the moment.

If your keen on experimenting, a great 'shortcut' to get you into css transitions, is jquery.transit - http://ricostacruz.com/jquery.transit/

[willfaulds]

I saw this http://lab.tylergaw.com/css-slideshows/ and remembered this thread. Its a entirely CSS animation approach but might be of use

[ddimaria]

I know this is an old thread, but for anyone searching for using CSS3 transitions with Cycle2, just include jQuery transit (http://ricostacruz.com/jquery.transit/) and replace the 3 'animate' calls with 'transition'. For the first 2, you'll need to remove the easing params to get it to work.

[nyc-derek]

Using Transit worked perfectly. I was already using it on my site for sidebar animations and replacing animate with transition and deleting the two easings did the trick!

[tadywankenobi]

@keeganbrown that solution worked fantastic. But... why?! I don't know enough about the plugin to understand why this helps? Is this a browser or plugin targetted solution?

Either way, thanks a million.

[keeganbrown]

@tadywankenobi It's a browser targeted solution, and should help in many instances where jQuery animation is choppy. If you want a technical explanation: adding transform3d(0,0,0) to the container causes that container to be rendered by the GPU instead of the CPU (essentially because you're telling the browser that it will have 3d effects, and 3d effects are GPU hardware accelerated in mobile phones that support them). It's very easy to over use this technique, so be warned -- use it judiciously on targeted areas. Using that technique too many times on the page can cause animation to look worse, or cause weird blinking or visual errors -- basically because the GPU on the phone is running out of memory. Hope that makes sense.

[tadywankenobi]

@keeganbrown That's absolutely perfect, thanks a million. I just need it for a client who wouldn't accept the advice of http://shouldiuseacarousel.com. It's a weird design and the carousel itself is not standard, so I'm just looking to get them to go away!!!

Thanks again, makes perfect sense now.

[shirotech]

Here is a simple gist to have this as a plugin: https://gist.github.com/van-nguyen/c5b278271a768531eeb3

Then just need to make { swipeFx: 'cssTransition', fx: 'cssTransition' }

Hope this helps.

[richgcook]

Hi folks, I even find fade animation on iOS devices really choppy. Would CSS3 transforms/transitions help with that too?