Submit your widget

Animations and transitions Magic Move effect

Created 5 years ago   Views 13529   downloads 1676    Author maccman
Animations and transitions Magic Move effect
View DemoDownload 3.7 KB
80
Share |

This is an animations and transitions are fairly crucial to the look and feel of modern applications, and can be a good way of indicating to a user what their interactions are doing. Indeed, the best interfaces have been clued up on this for a while now -- pretty much every interaction you have with iOS involves an animation.

However animations can get convoluted really fast, especially if you have a lot of different states which require different transitions depending on which states are being entered or left. This is a problem I've struggled with in more complex UIs, specifically figuring out the position of elements - (we ended up using position absolute for everything, and having a huge amount of conditional code).

$('.containers').magicMove({
    easing: 'ease',
    duration: 300
  },
  function(){
    var $el = $('<section>Third</section>');
    $(this).find('.second').after($el);
  }
);

Read more:https://github.com/maccman/jquery.magicmove