Grow your CSS skills. Land your dream job.

Animation totally sucks in Firefox

  • # January 7, 2014 at 1:50 pm

    Hi guys,

    I have been developing this for about a month and trying out different setups. What I have learnt so far that jQuery animation sucks and CSS also can’t handle well big transitions.

    I came across GASP which improved performance somewhat, however not as smooth as the client expects and I also would like to achieve better result.

    The slideshow is this one – http://zerobrainwash.com/sandbox/pixeleyes/?p=145 .

    It works by simply animating change in absolute position. So if I click on next slide, the whole wrapper div will move to left so new slide is in the middle.

    I know there are many more experienced people on this forum than I am so I would appreciate any kind of help or suggestions :)

    As a food for thought, would it be feasible to try this as HTML5 canvas? Or there are some acceleration hacks which I am not aware of? Performance is especially bad on Firefox which is really unfortunate since that’s also the browser that the client uses.

    # January 7, 2014 at 6:56 pm

    Are you sure the client has “Use hardware acceleration when available” checked (Firefox > Options > Options > Advanced > Browsing)?

    Other than that, show your client the difference between Firefox & Chrome, then show them IE. You can’t work miracles!

    There are other options besides jQuery animation.

    • GSAP is nice, I just haven’t had time to learn it.
    • Maybe you can try this plugin which replaces the built-in jQuery animation with css3 enhanced animation.

    Actually, I just checked out that slider and I think there might be a memory leak in the code somewhere… the amount of memory that page is using keeps increasing, even when the page is idle – it’s due to TweenMax.

    # January 12, 2014 at 4:56 am

    Hi mtotie,

    Thanks for your reply. I now also investigated further rendering and painting times of these images and realized that there is nothing I can do to improve them since this is simply how long rendering and painting of full-screen images takes. I guess Flash is still the best for such thing.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".