AngularMotion

Fancy CSS3 animations for AngularJS 1.2+.

About the project

AngularMotion is an animation starter-kit built for AngularJS#^1.2.

Wt's a spin off from AngularStrap v2 release work.

Quick Start

Install and manage AngularMotion with Bower.

      $ bower install angular-motion --save

    

Load the required javascript libraries.

      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css">

    

Custom builds

AngularMotion provides independently built modules that can be loaded separately

        <link rel="stylesheet" href="bower_components/angular-motion/dist/modules/collapse.min.css">

      

Contribute

Build and work on AngularMotion with Gulp.

      // Serve and watch docs, ideal to hack!
$ gulp serve
// Build AngularMotion
$ gulp build

    

Basic fade animation that leverages CSS3 keyframes, see browser support.

This animation works with opacity animating respectively from 0 to 1.

Live demo plunker

fade


<h5>fade</h5>

<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="left" bs-popover="popover">popover from left<br><small>(am-fade)</small></button>

<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="right" bs-popover="popover">popover from right<br><small>(am-fade)</small></button><br><br>

<button type="button" class="btn btn-primary" data-animation="am-fade" data-placement="top" bs-tooltip="tooltip">tooltip from top<br><small>(am-fade)</small></button>

<button type="button" class="btn btn-success" data-animation="am-fade" data-placement="bottom" bs-tooltip="tooltip">tooltip from bottom<br><small>(am-fade)</small></button>

Usage

Append one of theses classes am-fade to enable theses transitions.

AngularStrap integration

You should use the data-animation attribute with AngularStrap.

Basic slide animation that leverages CSS3 keyframes, see browser support.

This animation works with translateX/Y animating from 0% to 100%.

Live demo plunker

slide
<h5>slide</h5>

<button type="button" class="btn btn-primary" data-animation="am-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(slide-left)</small></button>

<button type="button" class="btn btn-success" data-animation="am-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(slide-right)</small></button>

<button type="button" class="btn btn-primary" data-animation="am-slide-top" bs-modal="modal">modal from top<br><small>(am-slide-top)</small></button>

<button type="button" class="btn btn-success" data-animation="am-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-slide-bottom)</small></button>

Usage

Append one of theses classes am-slide-top, am-slide-right, am-slide-bottom, am-slide-left to enable theses transitions,

AngularStrap integration

You should use the data-animation attribute with AngularStrap.

Basic collapse animation that leverages CSS3 keyframes, see browser support.

This animation works with opacity animating respectively from 0 to 1.

Live demo plunker

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
<div class="panel-group" role="tablist" aria-multiselectable="true" bs-collapse>
  <div class="panel panel-default" ng-repeat="panel in panels">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a bs-collapse-toggle>
          {{ panel.title }}
        </a>
      </h4>
    </div>
    <div class="panel-collapse" role="tabpanel" bs-collapse-target>
      <div class="panel-body">
        {{ panel.body }}
      </div>
    </div>
  </div>
</div>

Usage

Append one of theses classes am-collapse to enable theses transitions.

AngularStrap integration

You should use the data-animation attribute with AngularStrap.

Fancy slide animation that leverages CSS3 keyframes, see browser support.

This animation works with translateX/Y, opacity animating respectively from 0% to 20%, 0 to 1.

Live demo plunker

fade-and-slide


<h5>fade-and-slide</h5>

<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-left" data-placement="left" bs-aside="aside">aside from left<br><small>(am-fade-and-slide-left)</small></button>

<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-right" data-placement="right" bs-aside="aside">aside from right<br><small>(am-fade-and-slide-right)</small></button><br><br>

<button type="button" class="btn btn-primary" data-animation="am-fade-and-slide-top" bs-modal="modal">modal from top<br><small>(am-fade-and-slide-top)</small></button>

<button type="button" class="btn btn-success" data-animation="am-fade-and-slide-bottom" data-placement="center" bs-modal="modal">modal from bottom<br><small>(am-fade-and-slide-bottom)</small></button>

Usage

Append one of theses classes am-fade-and-slide-top, am-fade-and-slide-right, am-fade-and-slide-bottom, am-fade-and-slide-left to enable theses transitions.

AngularStrap integration

You should use the data-animation attribute with AngularStrap.

Fancy scale animation that leverages CSS3 keyframes, see browser support.

This animation works with scale, opacity animating respectively from .7 to 1, 0 to 1.

Live demo plunker

fade-and-scale
<h5>fade-and-scale</h5>

<button type="button" class="btn btn-danger" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">modal from center<br><small>(am-fade-and-scale)</small></button>

Usage

Append one of theses classes am-fade-and-scale to enable theses transitions.

AngularStrap integration

You should use the data-animation attribute with AngularStrap.

Fancy flip animation that leverages CSS3 keyframes, see browser support.

This animation works with perspective, rotate animating respectively from to 400px, 90 to 0.

Live demo plunker

flip
<h5>flip</h5>

<button type="button" class="btn btn-primary" data-animation="am-flip-x" data-placement="bottom" bs-popover="popover">popover from bottom<br><small>(am-flip-x)</small></button>

<button type="button" class="btn btn-success" data-animation="am-flip-x" data-placement="center" bs-modal="modal">modal from center<br><small>(am-flip-x)</small></button>

Usage

Append one of theses classes am-flip-x to enable theses transitions.

AngularStrap integration

You should use the data-animation attribute with AngularStrap.