{"id":3125,"date":"2018-08-13T10:35:16","date_gmt":"2018-08-13T10:35:16","guid":{"rendered":"https:\/\/www.arcwebsmac.in\/?p=3125"},"modified":"2018-08-13T10:35:16","modified_gmt":"2018-08-13T10:35:16","slug":"motion-ui-new-cool-website-transitions","status":"publish","type":"post","link":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/","title":{"rendered":"How Motion UI is the new cool for website transitions"},"content":{"rendered":"

 <\/p>\n

Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don\u2019t worry if you\u2019re new to this coz we\u2019ve got it for you!<\/b><\/p>\n

In recent times websites have a huge difference in designs that go way beyond the conventional definitions of website designs and layout. The simpler and sleek, the better! Having originated from Foundation of Apps as a bundle, this library has an enormous collection of animation and transition effects that is flexible enough to work with almost any Javascript animation library. The best part, you\u2019d ask, will be undoubtedly the availability of the platform to create newer designs!<\/p>\n

Getting Started 101<\/h2>\n

Let\u2019s go about this by one step at a time:<\/p>\n

Installation:<\/h3>\n
    \n
  • Install motion ui with npm and bower with the following codes:
    \nnpm install motion-ui –save-dev<\/b>
    \nbower install motion-ui –save-dev<\/b><\/li>\n
  • The package contains a set of default source files for transitions and animations to help you get the hang of it. Here\u2019s the link of all the source codes https:\/\/github.com\/zurb\/motion-ui\/blob\/master\/docs\/classes.md<\/li>\n
  • For adding a path for Motion UI Library in the compass insert the following code:
    \nadd_import_path ‘node_modules\/motion-ui\/src’<\/b><\/li>\n
  • In case you\u2019ve gulp-sass write:
    \ngulp.src('.\/src\/scss\/app.scss')
    \n.pipe(sass( {
    \nincludePaths: ['node_modules\/motion-ui\/src']
    \n}));
    \n<\/code><\/li>\n
  • For importing the Motion UI in the sass library write:
    \n@import 'motion-ui'
    \n<\/code><\/li>\n<\/ul>\n

    Transitions:<\/h3>\n

    The transitions are the USP of Motion UI which can be implemented on transition to overlays, off-canvas and modules. Examples are enclosed below:<\/p>\n

    Built-in Transitions<\/h4>\n

    These are the type of transitions that comes all set with the package to help you as a reference. Here\u2019s the example:<\/p>\n

    <!doctype html><\/p>\n

    <head><\/p>\n

    <meta charset = “utf-8” \/><\/p>\n

    <meta http-equiv = “x-ua-compatible” content = “ie = edge” \/><\/p>\n

    <meta name = “viewport” content = “width = device-width, initial-scale = 1.0” \/><\/p>\n

    <title>Motion UI Transition<\/title><\/p>\n

    <link rel = “stylesheet” href = “https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.0.1\/css\/foundation.css”><\/p>\n

    <link rel = “stylesheet” href = “https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/motion-ui\/1.1.1\/motion-ui.css”><\/p>\n

    <script src = “https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.0.1\/js\/vendor\/jquery.min.js”><\/script><\/p>\n

    <script src = “https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.0.1\/js\/foundation.min.js”><\/script><\/p>\n

    <\/head><\/p>\n

    <body><\/p>\n

    <h2>Motion UI Transition Example<\/h2><\/p>\n

    <p><a data-toggle = “toggle_panel”>Click here to toggle the panel<\/a><\/p><\/p>\n

    <div class = “callout” id = “toggle_panel” data-toggler data-animate = “hinge-in-from-bottom spin-out”><\/p>\n

    <h2>Foundation<\/h2><\/p>\n

    <p>Foundation is semantic, readable, flexible, and completely customizable.<\/p><\/p>\n

    <\/div><\/p>\n

    <script><\/p>\n

    $(document).ready(function() {<\/p>\n

    $(document).foundation();<\/p>\n

    })<\/p>\n

    <\/script><\/p>\n

    <\/body><\/p>\n

    <\/html><\/code><\/p>\n

    Custom Transitions:<\/h4>\n

    Creating your own transitions is the real fun and is something Motion UI is known for. Here\u2019s an example of how to set custom classes for mui-hinge() transition, which rotates the element.
    \n
    \n@include mui-hinge(
    \n$state: in,
    \n$from: top,
    \n$turn-origin: from-back,
    \n$duration: 0.5s,
    \n$timing: easeInOut
    \n);
    \n<\/code><\/p>\n

    Animations:<\/h3>\n

    Animation effects are the best to play with using CSS and can be implemented with mui – animation( ) mixin. Either you can pass a mixin one or more effects that are created into one keyframes, or you develop it locally.
    \n
    \n\/\/ Use the default slide effect<\/code><\/p>\n

    .slide {
    \n@include mui-animation(slide);
    \n}<\/p>\n

    \/\/ Create a custom slide effect
    \n.slide {
    \n@include mui-animation(slide($direction: up, $amount: 120%));
    \n}<\/p>\n

    \/\/ Combine multiple effects
    \n.slideAndSpinAndFade {
    \n@include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
    \n}<\/p>\n

    For Series Animation, the following code needs to be implemented:
    \n*All animations need to be from a common parent and then needs to have a special class to the parent to trigger animations:<\/i><\/p>\n

    <div class=”parent”>
    \n<div class=”thing-one”><\/div>
    \n<div class=”thing-two”><\/div>
    \n<div class=”thing-three”><\/div>
    \n<\/div><\/p>\n

    <\/code><\/p>\n

    Add the mui-series class,<\/h4>\n


    \n@include mui-series {
    \n\/\/ ...
    \n}<\/code><\/p>\n

    Applying the mui-queue mixin,<\/p>\n

    @include mui-series {
    \n.thing-one {
    \n@include mui-queue(1s, 0s, fade);
    \n}<\/p>\n

    \/\/ A 2s pause will happen after this animation ends
    \n.thing-two {
    \n@include mui-queue(1s, 2s, slide($direction: right));
    \n}<\/p>\n

    \/\/ It works with multiple effects, too!
    \n.thing-three {
    \n@include mui-queue(2s, 0s, spin($direction: ccw), slide($direction: up));
    \n}
    \n}<\/p>\n

    For triggering the queue, add the class .is-animating to a parent query. Doing it in jQuery, the code will be as follows:
    \n$('.parent').addClass('is-animating');<\/code>
    \nAs we mentioned earlier, the motion UI works fine as long as there is seamless jQuery included:
    \n
    \nvar elem = $('#elem-to-animate');<\/code><\/p>\n

    Foundation.Motion.animateIn(elem, animationClass [, callback]);
    \nFoundation.Motion.animateOut(elem, animationClass [, callback]);<\/p>\n

    *Make sure to include the js\/foundation.util.motion.js path and it shall work once the animation is complete.
    \n<\/i>
    \nPhhew. That was some work! Once you get started with these codes, you\u2019re sure gonna roll with it. Share with us how was your Motion UI experience in the comments down below!<\/p>\n","protected":false},"excerpt":{"rendered":"

      Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don\u2019t worry if you\u2019re new to this coz we\u2019ve got […]<\/p>\n","protected":false},"author":1,"featured_media":3126,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":""},"categories":[6,4],"tags":[25],"yoast_head":"\nHow Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC\" \/>\n<meta property=\"og:description\" content=\"  Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don\u2019t worry if you\u2019re new to this coz we\u2019ve got […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\" \/>\n<meta property=\"og:site_name\" content=\"Auroinfo - ArcWeb SMAC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ArcWebSMACIndia\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-13T10:35:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2018\/08\/motion-ui.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"560\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Auroinfo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ArcWebSMAC\" \/>\n<meta name=\"twitter:site\" content=\"@ArcWebSMAC\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Auroinfo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\"},\"author\":{\"name\":\"Auroinfo\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/2c889e7cc38c4111b0f8da0bec2e00b3\"},\"headline\":\"How Motion UI is the new cool for website transitions\",\"datePublished\":\"2018-08-13T10:35:16+00:00\",\"dateModified\":\"2018-08-13T10:35:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\"},\"wordCount\":803,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/#organization\"},\"keywords\":[\"Motion UI\"],\"articleSection\":[\"Responsive Design\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\",\"url\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\",\"name\":\"How Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC\",\"isPartOf\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/#website\"},\"datePublished\":\"2018-08-13T10:35:16+00:00\",\"dateModified\":\"2018-08-13T10:35:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.auroinfo.com\/in\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Motion UI is the new cool for website transitions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#website\",\"url\":\"https:\/\/www.auroinfo.com\/in\/\",\"name\":\"Auroinfo - ArcWeb SMAC\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.auroinfo.com\/in\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#organization\",\"name\":\"Auroifo - ArcWeb SMAC\",\"url\":\"https:\/\/www.auroinfo.com\/in\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/arcwebsmacindia\/?hl=en\",\"https:\/\/www.linkedin.com\/company\/arcwebsmac\/\",\"https:\/\/www.facebook.com\/ArcWebSMACIndia\/\",\"https:\/\/twitter.com\/ArcWebSMAC\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2019\/07\/logo.png\",\"contentUrl\":\"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2019\/07\/logo.png\",\"width\":2290,\"height\":2243,\"caption\":\"Auroifo - ArcWeb SMAC\"},\"image\":{\"@id\":\"https:\/\/www.auroinfo.com\/in\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/2c889e7cc38c4111b0f8da0bec2e00b3\",\"name\":\"Auroinfo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.auroinfo.com\/in\/wp-content\/wphb-cache\/gravatar\/ddc\/ddcedbc738e257f061f452ec5501384dx96.jpg\",\"contentUrl\":\"https:\/\/www.auroinfo.com\/in\/wp-content\/wphb-cache\/gravatar\/ddc\/ddcedbc738e257f061f452ec5501384dx96.jpg\",\"caption\":\"Auroinfo\"},\"url\":\"https:\/\/www.auroinfo.com\/in\/blog\/author\/arcweb\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/","og_locale":"en_US","og_type":"article","og_title":"How Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC","og_description":"  Perhaps the sassiest library that helps in bringing the zing to your website using snappy animations and transition effects. Don\u2019t worry if you\u2019re new to this coz we\u2019ve got […]","og_url":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/","og_site_name":"Auroinfo - ArcWeb SMAC","article_publisher":"https:\/\/www.facebook.com\/ArcWebSMACIndia\/","article_published_time":"2018-08-13T10:35:16+00:00","og_image":[{"width":800,"height":560,"url":"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2018\/08\/motion-ui.jpg","type":"image\/jpeg"}],"author":"Auroinfo","twitter_card":"summary_large_image","twitter_creator":"@ArcWebSMAC","twitter_site":"@ArcWebSMAC","twitter_misc":{"Written by":"Auroinfo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#article","isPartOf":{"@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/"},"author":{"name":"Auroinfo","@id":"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/2c889e7cc38c4111b0f8da0bec2e00b3"},"headline":"How Motion UI is the new cool for website transitions","datePublished":"2018-08-13T10:35:16+00:00","dateModified":"2018-08-13T10:35:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/"},"wordCount":803,"commentCount":0,"publisher":{"@id":"https:\/\/www.auroinfo.com\/in\/#organization"},"keywords":["Motion UI"],"articleSection":["Responsive Design","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/","url":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/","name":"How Motion UI is the new cool for website transitions - Auroinfo - ArcWeb SMAC","isPartOf":{"@id":"https:\/\/www.auroinfo.com\/in\/#website"},"datePublished":"2018-08-13T10:35:16+00:00","dateModified":"2018-08-13T10:35:16+00:00","breadcrumb":{"@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.auroinfo.com\/in\/blog\/motion-ui-new-cool-website-transitions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.auroinfo.com\/in\/"},{"@type":"ListItem","position":2,"name":"How Motion UI is the new cool for website transitions"}]},{"@type":"WebSite","@id":"https:\/\/www.auroinfo.com\/in\/#website","url":"https:\/\/www.auroinfo.com\/in\/","name":"Auroinfo - ArcWeb SMAC","description":"","publisher":{"@id":"https:\/\/www.auroinfo.com\/in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.auroinfo.com\/in\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.auroinfo.com\/in\/#organization","name":"Auroifo - ArcWeb SMAC","url":"https:\/\/www.auroinfo.com\/in\/","sameAs":["https:\/\/www.instagram.com\/arcwebsmacindia\/?hl=en","https:\/\/www.linkedin.com\/company\/arcwebsmac\/","https:\/\/www.facebook.com\/ArcWebSMACIndia\/","https:\/\/twitter.com\/ArcWebSMAC"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.auroinfo.com\/in\/#\/schema\/logo\/image\/","url":"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2019\/07\/logo.png","contentUrl":"https:\/\/www.auroinfo.com\/in\/wp-content\/uploads\/sites\/2\/2019\/07\/logo.png","width":2290,"height":2243,"caption":"Auroifo - ArcWeb SMAC"},"image":{"@id":"https:\/\/www.auroinfo.com\/in\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/2c889e7cc38c4111b0f8da0bec2e00b3","name":"Auroinfo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.auroinfo.com\/in\/#\/schema\/person\/image\/","url":"https:\/\/www.auroinfo.com\/in\/wp-content\/wphb-cache\/gravatar\/ddc\/ddcedbc738e257f061f452ec5501384dx96.jpg","contentUrl":"https:\/\/www.auroinfo.com\/in\/wp-content\/wphb-cache\/gravatar\/ddc\/ddcedbc738e257f061f452ec5501384dx96.jpg","caption":"Auroinfo"},"url":"https:\/\/www.auroinfo.com\/in\/blog\/author\/arcweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/posts\/3125"}],"collection":[{"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/comments?post=3125"}],"version-history":[{"count":0,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/posts\/3125\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/media\/3126"}],"wp:attachment":[{"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/media?parent=3125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/categories?post=3125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.auroinfo.com\/in\/wp-json\/wp\/v2\/tags?post=3125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}