AngularMotion

  • Fancy slide animation that leverages CSS3 keyframes , see browser support .
  • You should use the data-animation attribute with AngularStrap.
  • Basic collapse animation that leverages CSS3 keyframes , see browser support .
  • Append one of theses classes am-slide-top , am-slide-right , am-slide-bottom , am-slide-left to enable theses transitions,
  • 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.

Fancy CSS3 animations for AngularJS 1.2+.

@sittimalairut: AngularMotion – Fancy CSS3 animations for AngularJS 1.2+.

AngularMotion – Fancy CSS3 animations for AngularJS 1.2+.

Toggle navigation AngularMotion

Animations

 GitHub

 

AngularMotion

Fancy CSS3 animations for AngularJS 1.2+.

Getting started

Fade Examples

Usage

Slide Examples

Usage

Collapse Examples

Usage

FadeAndSlide Examples

Usage

FadeAndScale Examples

Usage

Flip Examples

Usage

Getting started readme.md

mgcrea.ngMotion

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.

Custom builds

AngularMotion provides independently built modules that can be loaded separately

Contribute

Build and work on AngularMotion with Gulp.

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

Fade fade.less

mgcrea.ngMotion.fade

Basic fade animation that leverages CSS3 keyframes

, see browser support.

This animation works with opacity

animating respectively from 0 to 1

.

Live demo

fade

popover from left

(am-fade) popover from right

(am-fade)

tooltip from top

(am-fade) tooltip from bottom

(am-fade)

Usage

Append one of theses classes am-fade

to enable theses transitions.

AngularStrap integration

You should use the data-animation

attribute with AngularStrap.

Slide slide.less

mgcrea.ngMotion.slide

Basic slide animation that leverages CSS3 keyframes

, see browser support.

This animation works with translateX/Y

animating from 0% to 100%

.

Live demo

slide

aside from left

(slide-left) aside from right

(slide-right) modal from top

(am-slide-top) modal from bottom

(am-slide-bottom)

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.

Collapse collapse.less

mgcrea.ngMotion.collapse

Basic collapse animation that leverages CSS3 keyframes

, see browser support.

This animation works with opacity

animating respectively from 0 to 1

.

Live demo

{{ panel.title }}

{{ panel.body }}

Usage

Append one of theses classes am-collapse

to enable theses transitions.

AngularStrap integration

You should use the data-animation

attribute with AngularStrap.

FadeAndSlide fade-and-slide.less

mgcrea.ngMotion.fade-and-slide

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

fade-and-slide

aside from left

(am-fade-and-slide-left) aside from right

(am-fade-and-slide-right)

modal from top

(am-fade-and-slide-top) modal from bottom

(am-fade-and-slide-bottom)

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.

FadeAndScale fade-and-scale.less

mgcrea.ngMotion.fade-and-scale

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

fade-and-scale

modal from center

(am-fade-and-scale)

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.

FadeAndScale flip.less

mgcrea.ngMotion.flip

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

flip

popover from bottom

(am-flip-x) modal from center

(am-flip-x)

Usage

Append one of theses classes am-flip-x

to enable theses transitions.

AngularStrap integration

You should use the data-animation

attribute with AngularStrap.

Back to top

Designed and built by Olivier Louvignes. Follow @olouv

Using Twitter Bootstrap and the Bootstrap’s docs styles designed and built by @mdo and @fat.

Code licensed under The MIT License, documentation under CC BY 3.0.

Issues

·

Roadmap and changelog

·

Releases

AngularMotion

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.