Animations

<!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed6137a3ee">
    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>
            <br />
<b>Warning</b>:  Element "h2" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="673ed6137a498">
    Effects
</h2>
            <!-- listing.blade.php -->
    <ul class="c-listing" data-uid="673ed6137a504">

                    
                                                <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>
    
            <br />
<b>Warning</b>:  Element "h3" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="673ed6137a5b0">
    Bind
</h3>
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed6137a5e5">
    Two types of bind can be done, they are the following:
</p>


            <!-- listing.blade.php -->
    <ul class="c-listing" data-uid="673ed6137a60f">

                    
                                                <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>
    
            <br />
<b>Warning</b>:  Element "h4" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="673ed6137a692">
    Other
</h4>
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed6137a6ce">
    All animations will be triggerd automatically when toggling display: none, display: block.
</p>


            <br />
<b>Warning</b>:  Element "h4" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="673ed6137a70f">
    Library
</h4>
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed6137a73a">
    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>