How to Design Animations and Transitions using Motion UI

Beginner's kit

Hello friends today we gonna learn about How to Design Animations and Transitions using Motion UI. So read this article, How to Design Animations and Transitions using Motion UI step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Design Animations and Transitions using Motion UI

With animations and transitions, designers can visualize changes and differentiate content. Animations and transitions are moving effects help users recognize when something changes on the site, for example, they click on a button and a new piece of information appears on the screen. Adding motion to apps and websites improves the user experience because users can too understand content in a more intuitive way

We can create animations and transitions from scratch or using libraries or frameworks. Good news for us frontend folks is that Zurb, the creator of Foundation, last October opened the open source Motion UI, the animation and transition library based on Sass.

It was originally bundled with Foundation for Apps, and now it got a facelift for the standalone release, including a animation queue system and flexible CSS patternsMotion UI also supports some components of the Foundation framework, such as the Orbit slider, the Toggler switch, and the Reveal modal, so it’s a pretty robust tool.

back to menu ↑

To start

While Motion UI is a Sass library, you don’t necessarily need to use it with Sass as Zurb provides developers with a handy starter kit that contains only the compiled CSS. You can download it through Motion UIs home page and quickly start prototyping using the predefined CSS animation and transition classes.

The starter kit includes not only the Motion UI, but also the Foundation framework, which means you can use the Foundation grid and all other Foundation for Sites functionality if you want.

The starter kit also comes with an index.html file that allows you to quickly test the framework.

If you need more advanced customization and want to take advantage of Motion UI’s powerful Sass mixins, you can install the full version with the .scss source files using npm or Bower.

Motion UI’s documentation is currently still half-baked. You can find it here on Github or contribute to it if you want.

back to menu ↑

Rapid prototyping

To get started with prototypes, you can edit the starter kit index.html file or create your own HTML file. You can build the layout using the Foundation grid, but Motion UI can also be used as a standalone library without the Foundation framework.

There are 3 main types of predefined CSS classes in Motion UI:

  1. Transition classes – allow you to add transitions, such as sliding, blurring, and hinging effects to an HTML element.
  2. Animation Classes – allows you to use various shake, wiggle, and rotate effects
  3. Modifier classes – work with both transition classes and animation classes, and they let you adjust the speed, timing, and delay of a movement.

Motion UI Effects List

back to menu ↑

Building the HTML

The great thing about predefined CSS classes is that they can be used not only as classes but also as other HTML attributes. For example, you can add them to the value attribute of the, or you can use them in your own custom data * attribute also.

In the code snippet below, I chose this latter option separate behavior and modification classesI have used the slow and easy modifier attributes as classes and created a custom data animation attribute for the scale-inup transition. The Click me button is intended to activate the effect.

button type = ”button”> Click on me

back to menu ↑

Play animations and transitions with jQuery

Motion UI also includes a small JavaScript library that can play transitions and animations when a particular event occurs.

The library itself can be found in the starter kit in the path motion-ui-starter> js> vendor> motion-ui.js.

It creates a MotionUI object with two methods: animateIn () and animateOut (). The transition or animation associated with the specific HTML element (the Element in the following way:

boom’) .addClass (‘ scale-inup

back to menu ↑

Customization with Sass

Motion UI’s pre-made CSS classes use default values ​​that can be easily modified using Sass. Behind every transition and animation is a Sass mixin, which makes it possible to change the settings of the effect. This way you can easily create a completely customized animation or transition.

Customization does not work with the starter kit, you must install the Sass version if you want to configure the effects to your own needs.

To adjust a transition or animation, you must do this first find the related mixinThe _classes.scss file contains the names of the compiled CSS classes with the respective mixins.

In our example, we have the .scale-inup attribute, and by looking at _classes.scss we can quickly discover that it uses the mui-zoom-mixin:

// Transitions @ mixin motion-ui-transitions {

// Scale.scale-inup {@ including mui-zoom (in, 0.5, 1);

Motion UI uses the mui prefix for mixing, and each mix has its own file. Motion UI has pretty straightforward naming conventions, so we can quickly find the mui-zoom mixin in the _zoom.scss file:

@mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) {…}

With the same technique, you can do any feature of an animation or transition by changing the values ​​of the respective Sass variables.

back to menu ↑

Configure modification classes

Modification classes that control the behavior (speed, timing, and delay) of animations and transitions can also be configured with Sass by changing the values ​​of the respective variables in the _settings.scss file.

After you make your changes, Motion UI will do that use the new values ​​as default in every animation and transition, so you don’t have to configure the related mixins one by one.

back to menu ↑

How to Design Animations and Transitions using Motion UI: benefits

  • The How to Design Animations and Transitions using Motion UI tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Design Animations and Transitions using Motion UI guide is free.

back to menu ↑

Faq

Tutorial summary of How to Design Animations and Transitions using Motion UI

In this guide, we told you about the How to Design Animations and Transitions using Motion UI; please read all steps so that you understand How to Design Animations and Transitions using Motion UI in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design Animations and Transitions using Motion UI, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design Animations and Transitions using Motion UI tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Design Animations and Transitions using Motion UI. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Design Animations and Transitions using Motion UI, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Design Animations and Transitions using Motion UI”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Design Animations and Transitions using Motion UI, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart