{"id":1664,"date":"2012-05-13T11:59:54","date_gmt":"2012-05-13T16:59:54","guid":{"rendered":"http:\/\/www.wiredprairie.us\/blog\/?p=1664"},"modified":"2012-05-13T11:59:55","modified_gmt":"2012-05-13T16:59:55","slug":"a-bit-of-reflow-using-tweenjs","status":"publish","type":"post","link":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1664","title":{"rendered":"A bit of reflow, using TweenJS"},"content":{"rendered":"

Inspired by some modern applications (especially the \u201cMetro\u201d look and feel), I wanted to put together an animated tile reflow script for an HTML page I was creating. <\/p>\n

As the size of the page changes, the tiles move into their new positions.<\/p>\n

\"SNAGHTML113b633f[4]\"<\/a><\/p>\n

You can try it here<\/a>, if you\u2019re using a modern browser (IE9+, Chrome, FF, Safari, etc.).<\/p>\n

Dependencies:<\/p>\n

    \n
  1. TweenJS<\/a><\/li>\n
  2. EaselJS<\/a> (for the ticker used in TweenJS)<\/li>\n
  3. CSSPlugin (an add on to the the TweenJS library)<\/li>\n
  4. jQuery<\/a> (1.7.2)<\/li>\n<\/ol>\n

    Relayouts are queued (as to prevent multiple from running).<\/p>\n

    Only boxes that will be visible to the end user (either animating to the screen or off the screen) are animated. It does not animate elements that do not start or end in the current viewport including boxes that would animate \u201cthrough\u201d the current viewport. I considered the latter to not add anything to the overall experience and just uses more CPU to perform the animations, so I intentionally left it out.<\/p>\n

    In the layout loop, the code verifies that the animation needs to run:<\/p>\n

    \/\/ here's the final destination\n<\/span>pos = { left: Math.round(x), top: Math.round(y) };\n\n\/\/ check old and new positions, if either are in the viewport, we'll animate\n<\/span>if <\/span>(isScrolledIntoView(pos.top + parentOfBoxesOffsetTop, boxH) || isScrolledIntoView(box.y + parentOfBoxesOffsetTop, boxH)) {\n    Tween.get(box.e).to(pos, 500 + 500 * Math.random(), \n        Ease.quadInOut).call(function <\/span>() {\n            --layoutPending;\n            if <\/span>(!layoutPending && queuedLayout) { queueLayout(); }\n    });\n} else <\/span>{<\/pre>\n
    If it needs to animate, the code uses the static Tween method \u201cget\u201d to start an animation on the current element. <\/p>\n
      \n
    1. Tween.get(box.e) creates a new instance of the Tween class (initialized with the element to tween).<\/li>\n
    2. Using that Tween instance, the CSS attributes (thanks to the handy CSSPlugin), for left and top are animated for at least 500ms and up to a full second. The easing function I chose is quadInOut. Tip: Here\u2019s<\/a> a great way to visualize easing options using TweenJS.<\/li>\n
    3. Finally, when the animation completes, an anonymous function is called which decrements the number of pending animations and if there are no remaining elements to animate, and there\u2019s something queued, another cycle is started.<\/li>\n<\/ol>\n
      All the code used by the demo is in default.html.<\/p>\n
      Colors of the boxes were set using hsl (only available in modern browsers):<\/p>\n
      box.style.backgroundColor = "hsl(" <\/span>+ c + ", 100%, 50%)"<\/span>;<\/pre>\n
      Where \u201cc\u201d is:<\/p>\n
      c = (i \/ boxes * 360).toFixed(1);<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Inspired by some modern applications (especially the \u201cMetro\u201d look and feel), I wanted to put together an animated tile reflow script for an HTML page I was creating. As the size of the page changes, the tiles move into their new positions. You can try it here, if you\u2019re using a modern browser (IE9+, Chrome, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[38,96,98],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pd5QIe-qQ","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1996,"url":"https:\/\/www.wiredprairie.us\/blog\/index.php\/archives\/1996","url_meta":{"origin":1664,"position":0},"title":"Animating an element’s visibility using AngularJS","date":"January 31, 2014","format":false,"excerpt":"There was a question on StackOverflow about animating an element and I wanted to give it a shot, so here goes: http:\/\/jsfiddle.net\/wiredprairie\/5tFCZ\/1\/ \u00a0 Imagine nearly the simplest Angular JS application possible: