--- name: motion-ui url: /motion-ui controller: MotionUIController --- ## Motion UI

Now you can rapidly prototype animated elements that integrate seamlessly into your site! We're using Sass mixins, CSS animations and transitions to make some really neat effects.

***

Constructor

***


Ease Spin


Linear Spin
*** ### Basic HTML You can create [Item] with this basic HTML
      
        [html]
      
    
[Demo of item]
### Advanced HTML You can create advanced versions of [Item] with this HTML
      
        [html]
      
    
[Demo of item]
### Sass Variables You can customize with... ```scss [Sass] ```

#### Base Motion Quickly addding motion to an element is easy! 1. Use the attribute `data-motion` to describe how we want an element to move. 2. Use the class `motion` to trigger the animation. 3. [There's no step 3!](http://youtu.be/6uXJlX50Lj8)
Examples
Slide
Hinge
Spin
You can choose from a number of basic motions: **Slide** `slide-from-top`, `slide-from-right`, `slide-from-bottom`, `slide-from-left`, **Hinge** `hinge-from-top`, `hinge-from-right`, `hinge-from-bottom`, `hinge-from-left`, `hinge-from-middle-x`, `hinge-from-middle-y` **Scale** `drop`, `pop` **Spin** `spin`, `spin ccw` **Fade** `fade` **Prefabricated Animations** `shake`, `spin-cw`, `spin-ccw`, `wiggle` ###### Example Usage ```html
```

#### Modifiers Don't want an out-of-the-box animation? No problemo! You have several modifiers at your disposal to get exactly the animation you want!
##### Speed You have three speeds to choose from. By default, animations will execute in **700ms**. You can pass `slow` or `fast` modifiers to change the speed to **1.5s** or **300ms** respectively. ###### Markup ```html
```
Fast
Normal
Slow

##### Iteration Count **This only applies to prefabricated animations.** Animations will only run once by default, but you can make them repeat infinitely if you want them to! Just add the `infinite` modifier! ###### Markup ```html
```
Infinite Animation!

##### Timing Function By default all animations and transitions use `ease` for the timing function. However, this isn't always desirable so we've made other timing function modifiers available! Choose from: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear` ###### Markup ```html
```


Ease Spin


Linear Spin

##### Delay You can add a delay to your animation with the `delay` modifier. By default, this is the length of the base motion duration, which is 700ms. You can also use `fast-delay` and `short-delay`. ###### Markup ```html
```
Short Delay
Delay
Long Delay

#### Usage Examples You can include `data-animation` values in any order to craft complex animations!
##### Examples
Spinner




Attention Grabber


Hey! Listen!
Form Feedback
shake, slide-in-from-north initially-hidden

Sorry, invalid input
Submit to See Feedback

#### Build with Mixins You can add motion directly with our Sass mixins for more semantic code and a finer level of control.
##### Motion Variables ```scss $transition-normal-duration: 700ms; $motion-class: "motion"; $motion-default-origin: left; $slide-default-dir: left; $include-html-motion-attributes: true; $auto-adjust-opacity: true; $motion-default-property: transform; $motion-default-timing: ease; $motion-default-delay: 0; $motion-slow-duration: 1.4s; $motion-default-duration: 700ms; $motion-fast-duration: 300ms; ``` ##### Basic Mixin Usage ```scss // Include a transition in your element // // transition-name: name of a transition mixin. // [ slide | fade | hinge | scale | spin ] @include transition-name(); ``` ###### Global Arguments **$duration**
Default: `$motion-default-duration // 300ms`
*Length of time in which animation executes*
Options: `