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}}"
Motion Classes
Transitions
.{{class}}
Animations
.shake
.spin-cw
.spin-ccw
.shake
.wiggle
Modifiers
.slow
.fast
Easing
.{{speed}}
Delay
.delay
.long-delay
Duration
.slow
.fast
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.