Animations

There are a collection of different on-load-animations to spice things up with.
If you for some reason want multiple animations on a single element, you can write them all in the same data-animate. Separated with a space.

Uses GSAP by Greensock

Animations

Component status: WIP

Fade in

Put this on an element and it will fade in, when it appears in the viewport.

Fade in

Component status: WIP

Put this on an element and it will fade in, when it appears in the viewport.



<div data-animate="fade-in">
    <div style="width:100%;height:300px;background:lightgrey;"></div>
</div>

Se mere

Stagger

Put this on a parent element and its children with fade in, in a staggering motion, when it appears in the viewport.

Stagger

Component status: WIP

Put this on a parent element and its children with fade in, in a staggering motion, when it appears in the viewport.



<div class="css-grid css-grid--collapse" data-animate="stagger">
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
    <div style="width:100%;height:100px;background:lightgrey;"></div>
</div>

Se mere

Se mere

[title]