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.
Transitions
Animations
class="square linear {{animateSquare}}"
Animating Components
Modals, notifications, and panels can be animated with the above motion classes. To add animation, use the `animation-in` and `animation-out` attributes.
If you don't speficy an animation, the component will use a default. For example, a left-oriented panel will animate in to the right, and out to the left.
Animating Views
Views can be animated in and out as the user moves between pages. There are two ways to define these transitions. To set it using our routing plugin, add the animation classes to the front matter of your view template.
---
name: home
url: /
animationIn: slideInRight
animationOut: slideOutRight
---
Both properties are optional, but the effects look their best when both views have an in and out animation.
If you're using ui-router directly, you can pass in these same parameters when defining a state.
Our motion classes also work with any built-in Angular directive that supports ngAnimate, such as ng-show, ng-hide, ng-if, and ng-repeat Just add a motion class to the element with the directive.
Click me:
This text will slide in and out.
Sass Mixins
All of our motion classes are built using mixins, which you can use yourself to write custom, fine-tuned animations.
Slide
A sliding element can originate from any of the element's four sides, and optionally fade in and out as it slides.
.customSlideIn {
@include slide(
$dir: in, // Specify in or out
$from: left, // Can be top, right, bottom, or left
$fade: true, // If true, the element fades simultaneously
$duration: 0.5s,
$timing: easeIn,
$delay: 0.25s
);
}
Fade
Fading in and out works how you'd expect.
.customFadeIn {
@include fade(
$dir: in, // Specify in or out
$from: 0, // Should be an opacity value between 0 and 1
$to: 1, // Same as above
$duration: 0.5s,
$timing: easeIn,
$delay: 0.25s
);
}
Hinge
To create a hinge swing effect, specify the direction of the hinge, the axis to swing on, and the direction to swing.
.customHingeIn {
@include hinge(
$dir: in, // Specify in or out
$from: left, // Can be top, right, bottom, or left
$axis: edge, // The swing can happen from the edge or center
$perspective: 2000px, // A higher number will make the effect more pronounced
$turn-origin: from-back, // The element can swing from its front or back side
$fade: true, // If true, the element fades simultaneously
$duration: 0.5s,
$timing: easeIn,
$delay: 0.25s
);
}
Scale
Specify a start and end amount to scale, and optionally have the element fade in or out as well.
.customScaleIn {
@include scale(
$dir: in, // Specify in or out
$from: 0.5, // 0.5 = 50% of the element's normal size
$to: 1.5, // 1.5 = 150%
$fade: true, // If true, the element fades simultaneously
$duration: 0.5s,
$timing: easeIn,
$delay: 0.25s
);
}
Spin
To create a spinning element, specify the distance the element spins and what direction it goes. The turn amount uses the turn unit—
.customSpinIn {
@include spin(
$dir: in, // Specify in or out
$amount: 0.75turn,
$ccw: false, // True makes the element spin counterclockwise
$fade: true, // If true, the element fades simultaneously
$duration: 0.5s,
$timing: easeIn,
$delay: 0.25s
);
}
Sass Variables
The mixins allow you to fine-tune each animation, but you can also use the Sass settings variables to adjust global motion settings.