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.

<!-- typography.blade.php  -->
<p id="62beda6e0b93d" class="c-typography c-typography__variant--p" data-uid="62beda6e0b934">
    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.
</p>
        <!-- typography.blade.php  -->
<h4 id="62beda6e0b9c6" class="c-typography c-typography__variant--subtitle" data-uid="62beda6e0b9c1">
    Effects
</h4>
        <!-- pagination.blade.php -->
  <ul id="62beda6e0ba95" class="c-listing" data-uid="62beda6e0ba90">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <span class="c-listing__label">
                        fade
                      </span>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-1">
          <span class="c-listing__label">
                        fadeUp (Left, Right, Down)
                      </span>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-2">
          <span class="c-listing__label">
                        bounce
                      </span>
           
        </li>
        
      
  </ul>

        <!-- typography.blade.php  -->
<h4 id="62beda6e0bc0c" class="c-typography c-typography__variant--subtitle" data-uid="62beda6e0bc06">
    Bind
</h4>
        <!-- typography.blade.php  -->
<p id="62beda6e0bc6a" class="c-typography c-typography__variant--p" data-uid="62beda6e0bc65">
    Two types of bind can be done, they are the following:
</p>


        <!-- pagination.blade.php -->
  <ul id="62beda6e0bcc4" class="c-listing" data-uid="62beda6e0bcbd">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <span class="c-listing__label">
                        Scroll: Will animate in and out near the edges of the viewport (compatible with modern browsers)
                      </span>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-1">
          <span class="c-listing__label">
                        Onload: Will animate on load of the page. 
                      </span>
           
        </li>
        
      
  </ul>

        <!-- typography.blade.php  -->
<h4 id="62beda6e0bd80" class="c-typography c-typography__variant--subtitle" data-uid="62beda6e0bd7b">
    Other
</h4>
        <!-- typography.blade.php  -->
<p id="62beda6e0bdd6" class="c-typography c-typography__variant--p" data-uid="62beda6e0bdd3">
    All animations will be triggerd automatically when toggling display: none, display: block.
</p>


        <!-- typography.blade.php  -->
<h4 id="62beda6e0be27" class="c-typography c-typography__variant--subtitle" data-uid="62beda6e0be23">
    Library
</h4>
    <!-- typography.blade.php  -->
<p id="62beda6e0be72" class="c-typography c-typography__variant--p" data-uid="62beda6e0be6f">
    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.
</p>

Attributes

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.

Blade component parameters

Attributes Description Values
js-bind Event to bind on (onload = init animation, scroll = in view animation) scroll/onload
js-action Animate keyword for animations. animate
js-animate-target 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. li.list-element
js-animate-type Type of animation fade/fadeUp/fadeLeft/bounce
js-animate-stagger Stagger (delay) each item in list of items (ms). Use 0 or false to turn off staggering. 300
js-animate-time Time to complete animation. 50