louisremi / jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.
435 stars 81 forks source link

animations now jerk and splutter ? #18

Open Pushplaybang opened 12 years ago

Pushplaybang commented 12 years ago

Hi, I'm not sure if I'm missing something, but when adding this script it suddenly makes my jQuery animations quite awful.

I'm using the supersized jq plugin for a full screen background slideshow and I'm animating the height of div to create a footer that slides out on a click event and slides back appropriately. This all works spectacularly well on a desktop machine, on a macbook pro, an iphone 3, a variety of blackberries and I've even managed to get it to run quite well under IE8.

To my surprise, the animations are absolute crap on an IPad 2. Thus I have come in search of something in line with this script. (as I understand that one can get far greater results by employing the CSS3 animation methods for ipad )

Unfortunately it seems the animations are now dismal no matter where I view them, am I missing something? are there know conflicts I should be aware of, or something I've overlooked in my ignorance?

any help or insight would be greatly appreciated.

thanks.

Pushplaybang commented 12 years ago

ha, transitions problem one sorted, had the twitter bootstrap plugins installed (the minified version) that I've been keeping around lately in new projects and selecting the bits and pieces I use later on - was testing and commenting out scripts and remembered that it includes some if its own css transition support stuff, wich I'm assuming is the conflict - my custom animations / drop down menu now work perfectly, but supersized still snaps from one to the other rather than smoothly fading.

p:)

louisremi commented 12 years ago

Hi @Pushplaybang, Sorry for not answering earlier, I was on vacation.

To help you solve that problem I will need to experience it myself. You can either build a test-case using a tool such as jsbin.com or jsfiddle.net, or give ma a link to a demo if you fail to reproduce the problem in jsbin/jsfiddle.

One way to improve perf on iPad is to apply a 3D transition on the element you intend to animate, to turn ON hardware acceleration: `#bangpanel { -webkit-transform: translateZ(0); }

Regards, Louis-Rémi

Pushplaybang commented 12 years ago

Hi there Louis-Rémi

thanks for the response, it seems my main issues where with having the twitter bootstrap transition support and this script running simultaneously, and once that was gone this script helped tremendously, but my issue is still with supersized, on SOME ipads it now just stutters to the next slide rather than the smooth transition one would expect. I'll take another crack at it and let you know how I get on, thanks for the advice and the great script.

Regards

Paul.