{"id":26187,"date":"2016-03-10T21:01:14","date_gmt":"2016-03-10T13:01:14","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26187"},"modified":"2024-06-20T20:06:48","modified_gmt":"2024-06-20T12:06:48","slug":"animations-transitions-motion-ui","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/animations-transitions-motion-ui\/","title":{"rendered":"How to Use Motion UI to Enhance Animations and Transitions in Web Design"},"content":{"rendered":"

Animations and transitions enable designers to showcase changes<\/a> and distinguish between different types of content. These moving effects are crucial as they assist users in recognizing changes<\/strong> on a website; for instance, when a button is clicked and new information is displayed. Incorporating movement<\/a> into apps and websites not only enhances the visual appeal but also makes the content more intuitive to understand.<\/p>\n

Creating animations and transitions can be done from scratch or through the use of libraries or frameworks<\/a>. For those of us in frontend development, the good news is that Zurb, the creators of Foundation<\/a>, in October<\/a> released Motion UI<\/a>, their animation and transition library based on Sass<\/a>.<\/p>\n

Originally part of Foundation for Apps<\/a>, the standalone release of Motion UI has been revamped<\/a>, featuring an animation queueing system<\/strong> and flexible CSS patterns<\/strong>. It also enhances certain components<\/a> within the Foundation framework, like the Orbit<\/a> slider, the Toggler<\/a> switch, and the Reveal<\/a> modal, making it a robust tool.<\/p>\n

By the end, you will have a fully dynamic and customizable contact form.<\/p>\n

Start building your advanced contact form today!<\/p>\n

<\/i> Download files <\/span><\/a><\/p>\n

Introduction to Motion UI<\/h2>\n

While Motion UI is a Sass library, it isn\u2019t necessary to use it with Sass. Zurb offers developers a convenient starter kit that includes just the compiled CSS. This can be downloaded from Motion UI\u2019s home page<\/a>, allowing you to immediately begin prototyping using predefined CSS animation and transition classes.<\/p>\n

This starter kit includes not only Motion UI but also the entire Foundation framework. This means you can utilize the Foundation grid<\/a> and all other features of Foundation for Sites<\/a> as needed.<\/p>\n

Additionally, the starter kit comes with an index.html<\/code> file that facilitates quick testing of the framework.<\/p>\n

\"Motion<\/figure>\n

If you require more complex customization and wish to utilize Motion UI\u2019s extensive Sass mixins, you can opt for the full version, which includes the source .scss<\/code> files. Installation can be done using npm or Bower<\/a>.<\/p>\n

The documentation for Motion UI is still in development. You can access the existing guides here<\/a> on Github, or even contribute to its improvement.<\/p>\n

Rapid Prototyping Techniques<\/h2>\n

To begin prototyping, you can either modify the index.html<\/code> file included in the starter kit or create a new HTML file. While you can develop the layout using the Foundation grid<\/a>, Motion UI can also function independently without the Foundation framework.<\/p>\n

Motion UI includes three primary types of predefined CSS classes:<\/p>\n

    \n
  1. Transition Classes<\/a> \u2013 These allow for the addition of transitions such as sliding, fading, and hinging effects to HTML elements.<\/li>\n
  2. Animation Classes<\/a> \u2013 These enable the implementation of various movements like shaking, wiggling, and spinning.<\/li>\n
  3. Modifier Classes<\/a> \u2013 These are used in conjunction with transition and animation classes to modify aspects such as speed, timing, and delay of animations.<\/li>\n<\/ol>\n
    \"List<\/a><\/figure>\n

    Constructing the HTML Structure<\/h3>\n

    One of the unique aspects of predefined CSS classes is their versatility beyond just class attributes. For instance, you can incorporate them into the value<\/code> attribute of the <option><\/code> tag<\/strong>, or utilize them in your own custom data-*<\/code><\/a> attributes.<\/p>\n

    In the example below, I\u2019ve opted to differentiate behavior and modifier classes<\/strong>. I\u2019ve applied the slow<\/code> and ease<\/code> modifiers as classes, and established a custom data-animation<\/code> attribute for the scale-in-up<\/code> transition. The effect is triggered by the Click me<\/code> button.<\/p>\n

    \r\n<div class=\"transitions\">\r\n    <button type=\"button\">Click Me<\/button>\r\n    <img id=\"boom\" data-animation=\"scale-in-up\" class=\"slow ease\" src=\"#\" alt=\"#\">\r\n<\/div>\r\n<\/pre>\n
    Activating Animations and Transitions with jQuery<\/h3>\n
    Motion UI also includes a compact JavaScript library<\/a> that can trigger transitions and animations based on specific events.<\/p>\n
    This library is included in the starter kit under the motion-ui-starter > js > vendor > motion-ui.js<\/code> directory.<\/p>\n
    It provides a MotionUI<\/code> object with two methods<\/a>: animateIn()<\/code> and animateOut()<\/code>. These methods can be used to initiate transitions or animations on specific HTML elements, like the <img id=\"boom\"><\/code> in our example, using jQuery as follows:<\/p>\n
    \r\n$(function() {\r\n    $(\".button\").click(function() {\r\n        var $animation = $(\"#boom\").data(\"animation\");\r\n        MotionUI.animateIn($(\"#boom\"), $animation);\r\n    });\r\n});\r\n<\/pre>\n
    The code snippet above retrieves the data-animation<\/code> attribute using jQuery\u2019s data()<\/code><\/a> method, and then invokes the animateIn()<\/code> method of the MotionUI<\/code> object.<\/p>\n
    The following iframe showcases the complete code and its output, employing Foundation framework\u2019s built-in button classes<\/a> for the Click me<\/code> button along with some basic CSS.<\/p>\n