Examples

Slide Animations

Customize this animation

duration: delay: staggerDelay: easing: maintainSpace: dimensionsTransition: overflowHidden:

jsCssAnimations.init

If you want an animation to be triggered by a DOM Event, use the 'init' property followed by the desired animation function. The animation function receives an Object that should contain the CSS selector for the element(s) that will trigger the animation and a 'targetSelector' to specify the element(s) to be animated.

You can specify any valid CSS selector, meaning that you can have multiple elements being animated by multiple triggers, but all attached to the same event. By default, the 'click' event will trigger the animation, but you can choose any other DOM event by specifying the 'on' option in the animation function's argument.

Fade In / Out

Customize this animation

duration: delay: staggerDelay: blur: easing: maintainSpace: dimensionsTransition: iteration: 12345infinitedirection: normalreversealternatealternate-reverse

Trigger and Target Selectors

The 'trigger' option can be omitted from the animation function if the 'js-anim--trigger' class is added to the trigger element. But if you have different triggers for different animations, you should specify the 'trigger' option to each animation function.

The 'target-selector' HTML attribute can also be passed directly to the trigger element, instead of being passed as an option to the javascript animation function.

Maintain Space

Passing 'maintainSpace: true' to the animation function, will just hide the element being animated, maintaining the area it occupies in the layout.

TIP

Setting 'maintainSpace: true' will automatically set 'dimensionsTransition' to false.

It's important to note that, when 'dimensionsTransition' is set to true, it can have an impact on the performance of the page, as it will trigger browser's Paint and Layout steps which can be costly.

<button class="js-anim--trigger" target-selector=".fade__example">
  Fade Out
</button>
<div class="fade__example"><p>...</p></div>

Collapse/Expand

Customize this animation

duration: delay: staggerDelay: easing: maintainSpace: dimensionsTransition: transfOrigin: centertopbottom

Staggered Animation

If you have more than one element being target of an animation, you can easily have a staggered animation by specifying a 'staggerDelay' option.

The 'staggerDelay', 'delay' and 'duration' options can either be specified as a number, representing the total time in milliseconds, or as a string. If passed as a string, it should contain the time unit: 's' for second, or 'ms' for milliseconds, exactly as you would use in the CSS 'animation-delay' property, for example.

Rotate

Customize this animation

duration: delay: easing: transfOrigin: centertopbottom

↑

Predefined Rotations

A set of predefined rotation animations is available to choose from:

• rotateUp: will always bring the element to its original position by setting rotation angle to 0 degrees.
• rotateDown: rotation angle will be set to 180 degrees.
• rotateLeft: 270 degrees.
• rotateRight: 90 degrees.

Counter Clockwise

There's also a set of predefined counter clockwise rotations:

• rotateDownCCW: rotation angle will be set to -180 degrees.
• rotateLeftCCW: -90 degrees.
• rotateRightCCW: -180 degrees.

TIP

Notice that when toggling back up from any rotation, the element will rotate in the opposite direction of the initial rotation. For example: when using rotateLeftCCW to rotate an element by clicking a button, the first time the button is clicked the element will rotate -90 degrees (counter clockwise), then, in the next button click, the element will toggle back up by rotating clockwise back to zero degrees.

Custom Rotation

Customize this animation

duration: delay: angle: easing: transfOrigin: centertopbottom

↑

Choose any angle of rotation

If you want to rotate by a specific angle, use the rotate() method passing the 'angle' option.

The angle can either be passed as a number representing the amount in degrees, or as a string in the format '<angle>deg'