Animations

Animate elements, or sub elements to a container. You can choose from multiple predefined effects, defined by the styleguide. All animations in done with anime-js.

Effects

  • fade
  • fadeUp (Left, Right, Down)
  • bounce

Bind

Two types of bind can be done, they are the following:

  • Scroll: Will animate in and out near the edges of the viewport (compatible with modern browsers)
  • Onload: Will animate on load of the page.

Other

All animations will be triggerd automatically when toggling display: none, display: block.

Library

We have chosen anime.js to create advanced animations swiftly. Like all javascript animation librarys it's always as performant that you would want. Therefore this library should be utilized where css-animations can't create the same effect.

Parameters (Blade)

Key Default value Type Available values Description
js-bind
scroll/onload string - Event to bind on (onload = init animation, scroll = in view animation)
js-action
animate string - Animate keyword for animations.
js-animate-target
li.list-element string - A sub element of the bound target, if left blank bound target will be animated. The target element is automatically prefixed by the dom-node of the bound element.
js-animate-type
fade/fadeUp/fadeLeft/bounce string - Type of animation
js-animate-stagger
300 string - Stagger (delay) each item in list of items (ms). Use 0 or false to turn off staggering.
js-animate-time
50 string - Time to complete animation.
id
string - The DOM id of the component.
classList
[] array - Array containing wrapping classes array
attributeList
[] array - Array containing keys and values rendered as attributes