Animation

<pc-animation>

0.4.0

experimental

Animiere Elemente deklarativ mit fast 100 integrierten Presets oder erstelle deine eigenen Animationen mit benutzerdefinierten Keyframes. Diese Animationen basieren auf der Web Animations API.

Um ein Element zu animieren, umschließe es mit einem <pc-animation>‐Element und lege einen Animationsnamen fest. Diese Animation startet erst, wenn du das play‐Attribut hinzufügst. In der Eigenschaften‐Tabelle findest du eine Liste aller Optionen.

<div class="animation-overview">
    <pc-animation name="bounce" duration="2000" play>
        <div class="box"></div>
    </pc-animation>
    <pc-animation name="jello" duration="2000" play>
        <div class="box"></div>
    </pc-animation>
    <pc-animation name="heartBeat" duration="2000" play>
        <div class="box"></div>
    </pc-animation>
    <pc-animation name="flip" duration="2000" play>
        <div class="box"></div>
    </pc-animation>
</div>

<style>
    .animation-overview .box {
        display: inline-block;
        inline-size: 100px;
        block-size: 100px;
        margin: 1.5rem;
        background-color: var(--pc-color-primary-fill-loud);
        border-radius: var(--pc-border-radius-l);
    }
</style>

Code

Edit

Diese Animation wird nur auf das erste Kindelement innerhalb von <pc-animation> angewendet.

Demos

Animationen und Easings

Diese Demo zeigt alle integrierten Animationen und Easings. Die Animationen basieren auf der beliebten Animate.css‐Bibliothek.

<div class="animation-sandbox">
    <pc-animation name="bounce" easing="ease-in-out" duration="2000" play>
        <div class="box"></div>
    </pc-animation>

    <div class="controls">
        <pc-select label="Animation" value="bounce"></pc-select>
        <pc-select label="Easing" value="easeInOut"></pc-select>
        <pc-input
            type="number"
            label="Wiedergabegeschwindigkeit"
            min="0"
            max="2"
            step="0.25"
            value="1"
        ></pc-input>
    </div>
</div>

<script type="module">
    import { getAnimationNames, getEasingNames } from "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/utilities/animation.js";

    const container = document.querySelector(".animation-sandbox");
    const animation = container.querySelector("pc-animation");
    const animationName = container.querySelector(".controls pc-select:nth-child(1)");
    const easingName = container.querySelector(".controls pc-select:nth-child(2)");
    const playbackRate = container.querySelector('pc-input[type="number"]');
    const animations = getAnimationNames();
    const easings = getEasingNames();

    animations.map((name) => {
        const option = Object.assign(document.createElement("pc-option"), {
            textContent: name,
            value: name
        });
        animationName.appendChild(option);
    });

    easings.map((name) => {
        const option = Object.assign(document.createElement("pc-option"), {
            textContent: name,
            value: name
        });
        easingName.appendChild(option);
    });

    animationName.addEventListener("pc-change", () => (animation.name = animationName.value));
    easingName.addEventListener("pc-change", () => (animation.easing = easingName.value));
    playbackRate.addEventListener("pc-input", () => (animation.playbackRate = playbackRate.value));
</script>

<style>
    .animation-sandbox .box {
        inline-size: 100px;
        block-size: 100px;
        background-color: var(--pc-color-primary-fill-loud);
        border-radius: var(--pc-border-radius-l);
    }

    .animation-sandbox .controls {
        max-inline-size: 300px;
        margin-block-start: var(--pc-spacing-xxxl);
    }

    .animation-sandbox .controls pc-select {
        margin-block-end: var(--pc-spacing-l);
    }
</style>

Code

Edit

Intersection Observer

Nutze einen Intersection Observer, um die Animation zu steuern, sobald ein Element in den Viewport eintritt oder ihn verlässt. Scrolle zum Beispiel die Box unten in den Bildschirm hinein und wieder heraus. Die Animation stoppt, wenn die Box den Viewport verlässt und startet bei jedem Eintritt neu.

<div class="animation-scroll">
    <pc-animation
        name="jackInTheBox"
        duration="2000"
        iterations="1"
    >
        <div class="box"></div>
    </pc-animation>
</div>

<script>
    const container = document.querySelector(".animation-scroll");
    const animation = container.querySelector("pc-animation");
    const box = animation.querySelector(".box");

    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            animation.play = true;
        } else {
            animation.play = false;
            animation.currentTime = 0;
        }
    });

    observer.observe(box);
</script>

<style>
    .animation-scroll .box {
        display: inline-block;
        inline-size: 100px;
        block-size: 100px;
        background-color: var(--pc-color-primary-fill-loud);
        border-radius: var(--pc-border-radius-l);
    }
</style>

Code

Edit

Benutzerdefinierte Keyframes

Füge deine eigene Keyframes hinzu, damit du benutzerdefinierte Animationen erstellen kannst.

<div class="animation-keyframes">
    <pc-animation easing="ease-in-out" duration="2000" play>
        <div class="box"></div>
    </pc-animation>
</div>

<script>
    const animation = document.querySelector(".animation-keyframes pc-animation");

    animation.keyframes = [
        {
            offset: 0,
            easing: "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            fillMode: "both",
            transformOrigin: "center center",
            transform: "rotate(0deg)",
        },
        {
            offset: 1,
            easing: "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
            fillMode: "both",
            transformOrigin: "center center",
            transform: "rotate(90deg)",
        },
    ];
</script>

<style>
    .animation-keyframes .box {
        inline-size: 100px;
        block-size: 100px;
        background-color: var(--pc-color-primary-fill-loud);
        border-radius: var(--pc-border-radius-l);
    }
</style>

Code

Edit

Animationen programmatisch starten

Animationen werden erst abgespielt, wenn du das play‐Attribut hinzufügst. Du kannst es anfangs weglassen und erst programmatisch hinzufügen, z. B. nach einer Benutzerinteraktion. In dieser Demo animiert der Button bei jedem Klick genau einmal.

<div class="animation-form">
    <pc-animation name="rubberBand" duration="1000" iterations="1">
        <pc-button appearance="primary">Klick mich</pc-button>
    </pc-animation>
</div>

<script>
    const container = document.querySelector(".animation-form");
    const animation = container.querySelector("pc-animation");
    const button = container.querySelector("pc-button");

    button.addEventListener("click", () => {
        animation.play = true;
    });
</script>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`name`	The name of the built‐in animation to use. For custom animations, use the `keyframes` prop. Typ: `string`	`"none"`
`play`	Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets cancelled. Typ: `boolean`	`false`
`delay`	The number of milliseconds to delay the start of the animation. Typ: `number`	`0`
`direction`	Determines the direction of playback as well as the behaviour when reaching the end of an iteration. Learn more about the CSS `animation-direction` property. Typ: `PlaybackDirection`	`"normal"`
`duration`	The number of milliseconds each iteration of the animation takes to complete. Typ: `number`	`1000`
`easing`	The easing function to use for the animation. This can be an easing function name like `easeInSine` or a custom easing function like `cubic-bezier(0.12, 0, 0.39, 0)`. Typ: `string`	`"ease-in-out"`
`endDelay` `end-delay`	The number of milliseconds to delay after the active period of an animation sequence. Typ: `number`	`0`
`fill`	Sets how the animation applies styles to its target before and after its execution. Typ: `FillMode`	`"auto"`
`iterations`	The number of iterations to run before the animation completes.	`Infinity`
`iterationStart` `iteration-start`	The offset at which to start the animation, usually between 0 (start) and 1 (end). Typ: `number`	`0`
`keyframes`	The keyframes to use for the animation. If this is set, the `name` attribute and property will be ignored. Typ: `Keyframe[] \| undefined`	‐
`playbackRate` `playback-rate`	Sets the animation’s playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation’s speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart. Typ: `number`	`1`
`currentTime`	Gets and sets the current animation time. Typ: `CSSNumberish`	‐
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Slots

Name	Beschreibung
(Standard)	The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<pc-animation>` elements.

Erfahre mehr über die Benutzung von Slots.

Methoden

Name	Beschreibung	Argumente
`cancel()`	Clears all keyframes caused by this animation and aborts its playback.	‐
`finish()`	Sets the playback time to the end of the animation corresponding to the current playback direction.	‐

Erfahre mehr über Methoden.

Events

Name	Beschreibung	Event‐Detail
`pc-cancel`	Emitted when the animation is cancelled.	‐
`pc-finish`	Emitted when the animation finishes.	‐
`pc‐start`	Emitted when the animation starts or restarts.	‐

Erfahre mehr über Events.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/animation/animation.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/animation/animation.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/animation/animation.js";