SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to smooth my animation

    Hi there,

    Currently working on a very simple project which shows/hides divs depending on their class name. At the moment I have probably about 30 divs being controlled by four buttons. However, when it comes to "showing all" of them at once, the animation slows down (most likely because of the data involved) and is only set to be worse on Internet Explorer and other, slower browsers I expect.

    Anyway, is there a way in which I could make my animation more responsive in terms of animation time so that it becomes a much smoother transition between switching around the divs? At the moment some divs are playing catch up and just popping in. Please see the example at the address below.

    http://www.andrewcourtney.co.uk/test...querywall.html

    Any thoughts on how I could improve the look of the animation would also be welcome

    Cheers,

    Shoxt3r

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so I've looked into applying easing into my jquery to smooth out the animation which seems to have improved it slightly but it is still very glitchy on the "show all" as the animation fails to work on some divs even though they are targetted (see the third div along at the top to see what I mean). Presumably this is happening because of the maths involved with altering 20 elements at once. Ideally I'm going to have many more than this figure eventually though.

    http://www.andrewcourtney.co.uk/test...querywall.html

    Any thoughts on how I could improve it? Would lazy loading the elements help at all so that it can cope with altering multiple elements at once? Any other methods of creating the sorting option? I know that isotope.js uses CSS3 transforms but this isn't ideal as it isn't cross-browser compatible.

    Cheers,

    Shoxt3r


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •