Warning: Use of undefined constant W3TC_POWERED_BY - assumed 'W3TC_POWERED_BY' (this will throw an Error in a future version of PHP) in /homepages/0/d623459042/htdocs/wp-content/plugins/google-webfont-optimizer/google-webfont-optimizer.php on line 342
What is Motion UI? | Bitlab

What is Motion UI?

by Tom / Website Design

If you’ve ever built or worked on a website before, you’re fully aware of the seemingly endless list of things that need to be accomplished. Of course, ensuring that you have a site that is functional and responsive is absolutely critical. If your users have trouble navigating through your site, it doesn’t look good on a mobile device, or it isn’t compatible with all of the major browsers, you’re sure to run into some big trouble. Keeping your site functioning and easy to use for all of your visitors should always be your main goal and focus. However, after you’ve accomplished that, you should have a little fun with some of the little extra bits that go along with building a website. While function is absolutely necessary, throwing in some extra touches here and there can go a long way to improving the overall experience your current and potential customers will have. This can be achieved through a number of different ways. However, one of our favorites comes in the form of transitions and subtle animations. Transitions and animations are great tools that can help add some much-needed flair to your site, but it is possible to use too many of these. You don’t want to go overboard, but using these in a sparingly manner can turn out to be incredibly beneficial for your site.


Motion UI – What is it and What Does it Have to Offer?


One such way to add these transitions and animations to your site comes by the way of ZURB Studios. ZURB has been in the business of creating awesome-looking web design tools for quite a while now, and one of their most popular ones comes by the name of Motion UI. Motion UI is ZURB’s own Sass library that offers nothing but customizable transitions and animations for your site. All of these effects are built directly into Motion UI, and this helps to make the animation process extremely simple and time-effective. A full breakdown of everything that’s included is as follows –


  • Transitions – Just like with transitions you would use in a slide show or video, the ones here are meant to help the transition process of components that are coming both in and out of your site. These can be used on a great assortment of things, included modals, overlays, and so much more.
  • Animations – What’s cool about the way Motion UI handles animations, is that the exact same effects found for the transitions can be used here as well. And, as a general rule of thumb, all animations used within Motion UI are initially created with the mixin mui-animation().
  • Series Animations – Along with standard, one-time animations, Motion UI also gives you the ability to animate multiple items in a set order that you create. It’s an incredibly hand tool if you want to animate multiple items at once in a specific order, and it can actually be quite fun to play around with.


How to get Started?


If all of this sounds like something you’d like to have on your site, getting Motion UI is incredibly simple. It can be downloaded from ZURB Studio’s website, and can then be installed with npm or Bower. It’s a pretty straightforward process, and if you’re familiar with this kind of work, it should be a pretty cut and dry process for you.


All in all, Motion UI is certainly one of the most intuitive and easy-to-use solutions out there if you want to spruce up your website a bit. The animations and transitions included look incredibly nice, and the ability to string together a set of animations is a really nice inclusion that can further enhance your site that standard transitions. While it’s important to not go overboard with these things, a few here and there can add a nice breath of fresh air to any site.

Tags: , , , , , ,

Fatal error: Uncaught ArgumentCountError: Too few arguments to function Minify_HTML::__construct(), 0 passed in /homepages/0/d623459042/htdocs/wp-content/plugins/autoptimize/classes/autoptimizeHTML.php on line 51 and at least 1 expected in /homepages/0/d623459042/htdocs/wp-content/plugins/autoptimize/classes/external/php/minify-html.php:69 Stack trace: #0 /homepages/0/d623459042/htdocs/wp-content/plugins/autoptimize/classes/autoptimizeHTML.php(51): Minify_HTML->__construct() #1 /homepages/0/d623459042/htdocs/wp-content/plugins/autoptimize/autoptimize.php(250): autoptimizeHTML->minify() #2 [internal function]: autoptimize_end_buffering('<br />\n<b>Warni...', 9) #3 /homepages/0/d623459042/htdocs/wp-includes/functions.php(3658): ob_end_flush() #4 /homepages/0/d623459042/htdocs/wp-includes/plugin.php(525): wp_ob_end_flush_all('') #5 /homepages/0/d623459042/htdocs/wp-includes/load.php(638): do_action('shutdown') #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /homepages/0/d623459042/htdocs/wp-content/plugins/autoptimize/classes/external/php/minify-html.php on line 69