Animation

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->



        
            <!-- Documentation only -->
<section class="doc-section">

    <h2 class="doc-section-title">Animationen und Transitions</h2>

    <div class="doc-notes">
        <h3>Grundsätzliches</h3>
        <ul>
            <li>Damit das Interface nicht träge wirkt, Animationen und Transitions möglichst schnell ausführen.</li>
            <li>Elemente erscheinen schneller als sie verschwinden (z.B. <code>mouseenter</code>: schnell, <code>mouseleave</code>: langsamer)</li>
            <li>Blockiert eine Animation den Ablauf (z.B. das Schließen eines Modal-Dialogs), diese ebenfalls möglichst schnell ausführen.</li>
            <li>Animation sollten das verhalten physischer Elemente nachahmen (siehe Abschnitt „Beschleunigung“ unten).</li>
        </ul>
        <p><strong>Vorgegebene Werte für Geschwindigkeiten:</strong></p>
        <ul>
            <li>Einblenden: .1s</li>
            <li>Ausblenden: .3s</li>
        </ul>
    </div>

    <div class="doc-animation">

        <div class="doc-animation-samples">

            <div class="doc-animation-sample" style="transition-duration: .1s;">
                <span style="transition-duration: .3s;">Beispiel</span>
            </div>

        </div>

    </div>

</section>

<section class="doc-section">

    <h2 class="doc-section-title">Beschleunigung (Easing)</h2>

    <div class="doc-animation">

        <div class="doc-notes">
            <h3>Arten der Beschleunigung</h3>
            <p>Es gibt verschiedenen vordefinierte Timing-Functions (siehe unten), die jeweils mit unterschiedlichen Beschleun</p>
            <p>Da lineare Bewegungen unnatürlich wirken, gibt es gibt verschiedene vordefinierte Funktionen für die Beschleunigung bei Animationen und Transitions. Die unten gezeigten Beispiele illustrieren nur die Bewegung mit einer Beschleunigung zum Beginn und einer Verzögerung am Ende der Animation (<code>ease-in-out</code>). Es kann aber jeweils auch nur der Start (<code>ease-in</code>) oder das Ende (<code>ease-out</code>) verzögert.</p>
            <p><strong>Regeln für die Auswahl der richtige Beschleunigung:</strong></p>
            <ul>
                <li>Erscheint ein Element (z.B. kommt in den sichtbaren Bereich), wird die Bewegung am Ende verzögert (<code>ease-out</code>).</li>
                <li>Verschwindet ein Element (z.B. aus dem aus dem sichtbaren Bereich), wird die Bewegung am Start verzögert (<code>ease-in</code>).</li>
                <li>Bleibt das Element sichtbar, werden Start und Ende verzögert (<code>ease-in-out</code>).</li>
            </ul>

            <div class="doc-animation-toggle-container">

                <hr>

                <p class="doc-animation"><input type="checkbox" class="doc-animation-toggle" id="doc-animation-loop"> <label for="doc-animation-loop"><strong>Alle Beispiele kontinuierlich abspielen</strong></label></p>

            </div>

        </div>

        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Default</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> default</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Sine</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> sine</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-sine);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Cubic</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> cubic</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-cubic);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Quart</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> quart</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-quart);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Quint</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> quint</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-quint);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Expo</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> expo</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-expo);"></div>

        </div>
        <div class="doc-variant">

            <header class="doc-variant-header">

                <h2 class="doc-variant-title">Back</h2>

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> back</li>
                        <li><strong>Acceleration:</strong> in-out</li>
                    </ul>

                </div>

            </header>

            <div style="animation-timing-function: var(--tf-in-out-back);"></div>

        </div>
    </div>

</section>

Handle: @animation
Variants (2): Default , Documentation only
Preview:
- With layout
- Component only
Filesystem Path: components/01-base/animation/animation.html


        <!-- Default -->


<!-- Documentation only -->
<section class="doc-section">

    <h2 class="doc-section-title">Animationen und Transitions</h2>

    <div class="doc-notes">
{{#markdown}}
### Grundsätzliches

- Damit das Interface nicht träge wirkt, Animationen und Transitions möglichst schnell ausführen.
- Elemente erscheinen schneller als sie verschwinden (z.B. `mouseenter`: schnell, `mouseleave`: langsamer)
- Blockiert eine Animation den Ablauf (z.B. das Schließen eines Modal-Dialogs), diese ebenfalls möglichst schnell ausführen.
- Animation sollten das verhalten physischer Elemente nachahmen (siehe Abschnitt „Beschleunigung“ unten).

{{#if durations}}
**Vorgegebene Werte für Geschwindigkeiten:**

- Einblenden: {{durations.in}}
- Ausblenden: {{durations.out}}
{{/if}}
{{/markdown}}
    </div>

        {{#if durations}}
    <div class="doc-animation">

        <div class="doc-animation-samples">

            <div class="doc-animation-sample" style="transition-duration: {{durations.in}};">
                <span style="transition-duration: {{durations.out}};">Beispiel</span>
            </div>

        </div>

    </div>
        {{/if}}

</section>

<section class="doc-section">

    <h2 class="doc-section-title">Beschleunigung (Easing)</h2>

        {{#if samples}}
    <div class="doc-animation">

        <div class="doc-notes">
{{#markdown}}
### Arten der Beschleunigung

Es gibt verschiedenen vordefinierte Timing-Functions (siehe unten), die jeweils mit unterschiedlichen Beschleun

Da lineare Bewegungen unnatürlich wirken, gibt es gibt verschiedene vordefinierte Funktionen für die Beschleunigung bei Animationen und Transitions. Die unten gezeigten Beispiele illustrieren nur die Bewegung mit einer Beschleunigung zum Beginn und einer Verzögerung am Ende der Animation (`ease-in-out`). Es kann aber jeweils auch nur der Start (`ease-in`) oder das Ende (`ease-out`) verzögert.

**Regeln für die Auswahl der richtige Beschleunigung:**

- Erscheint ein Element (z.B. kommt in den sichtbaren Bereich), wird die Bewegung am Ende verzögert (`ease-out`).
- Verschwindet ein Element (z.B. aus dem aus dem sichtbaren Bereich), wird die Bewegung am Start verzögert (`ease-in`).
- Bleibt das Element sichtbar, werden Start und Ende verzögert (`ease-in-out`).
{{/markdown}}

            <div class="doc-animation-toggle-container">

                <hr>

                <p class="doc-animation"><input type="checkbox" class="doc-animation-toggle" id="doc-animation-loop"> <label for="doc-animation-loop"><strong>Alle Beispiele kontinuierlich abspielen</strong></label></p>

            </div>

        </div>

            {{#samples}}
        <div class="doc-variant">

            <header class="doc-variant-header">

                    {{#title}}
                <h2 class="doc-variant-title">{{{.}}}</h2>
                    {{/title}}

                <div class="doc-variant-configuration">

                    <ul class="doc-variant-specifications">
                        <li><strong>Timing Function:</strong> {{#timing-function}}{{.}}{{/timing-function}}{{#unless timing-function}}default{{/unless}}</li>
                        <li><strong>Acceleration:</strong> {{#acceleration}}{{.}}{{/acceleration}}{{#unless acceleration}}in-out{{/unless}}</li>
                            {{#specifications}}
                        <li>{{{.}}}</li>
                            {{/specifications}}
                    </ul>

                </div>

                    {{#annotations}}
                <div class="doc-notes">{{{.}}}</div>
                    {{/annotations}}

            </header>

            <div style="animation-timing-function: var(--tf-{{#acceleration}}{{.}}{{/acceleration}}{{#unless acceleration}}in-out{{/unless}}{{#timing-function}}-{{.}}{{/timing-function}});"></div>

        </div>
            {{/samples}}
    </div>
        {{/if}}

</section>


        
        
            /* Default: No context defined. */


        
            /* Documentation only */
{
  "durations": {
    "in": ".1s",
    "out": ".3s"
  },
  "samples": [
    {
      "title": "Default"
    },
    {
      "title": "Sine",
      "timing-function": "sine"
    },
    {
      "title": "Cubic",
      "timing-function": "cubic"
    },
    {
      "title": "Quart",
      "timing-function": "quart"
    },
    {
      "title": "Quint",
      "timing-function": "quint"
    },
    {
      "title": "Expo",
      "timing-function": "expo"
    },
    {
      "title": "Back",
      "timing-function": "back"
    }
  ]
}

File:

Content:


                                @mixin base-transition(
    $direction: out,
    $properties: all,
    $duration: false,
    $easing: ease
){

    @if $duration == false {

        $duration: .3s;

        @if $direction == in and global_variable_exists(_transition-duration--in) {
            $duration: $_transition-duration--in;
        }

        @if $direction == out and global_variable_exists(_transition-duration--out) {
            $duration: $_transition-duration--out;
        }

    }

    @if length($properties) > 1 {

        $list: ();

        @each $property in $properties {
            $list: append($list, $property, "comma");
        }

        transition-duration: $duration;
        transition-property: $list;
        transition-timing-function: $easing;

    } @else {

        transition: $properties $duration $easing;

    }

}

@function easing(
    $type: default,
    $direction: in-out,
) {
    @return map-get(map-get($_timing-functions, $direction), $type);
}

URL: /components/raw/animation/_animation.helpers.scss
Filesystem Path: components/01-base/animation/_animation.helpers.scss
Size: 963 Bytes

Content:


                                @import "_animation.helpers";
@import "_animation.settings";
@import "_animation.styles";

URL: /components/raw/animation/_animation.scss
Filesystem Path: components/01-base/animation/_animation.scss
Size: 90 Bytes

Content:


                                $_transition-duration: .3s !default;
$_transition-duration--out: $_transition-duration !default;
$_transition-duration--in: .1s !default;

    //** Easing functions
    //** Thanks to https://easings.co/

$_timing-functions: (
    in-out: (
        default: ease-in-out,
        sine: cubic-bezier(.45, .05, .55, .95),
        cubic: cubic-bezier(.65, .05, .36,1),
        quart: cubic-bezier(.77,0, .18,1),
        quint: cubic-bezier(.86,0, .07,1),
        expo: cubic-bezier(1,0,0,1),
        back: cubic-bezier(.68,-.55, .27,1.55),
    ),
    in: (
        default: ease-in,
        sine: cubic-bezier(.47,0, .75, .72),
        cubic: cubic-bezier(.55, .06, .68, .19),
        quart: cubic-bezier(.9, .03, .69, .22),
        quint: cubic-bezier(.95, .05, .8, .04),
        expo: cubic-bezier(.6, .04, .98, .34),
        back: cubic-bezier(.6,-.28, .74, .05),
    ),
    out: (
        default: ease-out,
        sine: cubic-bezier(.39, .57, .56,1),
        cubic: cubic-bezier(.22, .61, .36,1),
        quart: cubic-bezier(.17, .84, .44,1),
        quint: cubic-bezier(.19,1, .22,1),
        expo: cubic-bezier(.08, .82, .17,1),
        back: cubic-bezier(.18, .89, .32,1.27),
    ),
) !default;

URL: /components/raw/animation/_animation.settings.scss
Filesystem Path: components/01-base/animation/_animation.settings.scss
Size: 1.2 KB

Content:


                                @keyframes loading-spinner {

    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

%animation--loading-spinner {
    animation: 800ms linear infinite loading-spinner;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: initial;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}

:root {

    @each $direction, $variants in $_timing-functions {

        @each $key, $value in $variants {

            $name: --tf-#{$direction};

            @if ($key != default){
                $name: #{$name}-#{$key};
            }

            #{$name}: $value;

        }

    }

}

URL: /components/raw/animation/_animation.styles.scss
Filesystem Path: components/01-base/animation/_animation.styles.scss
Size: 930 Bytes