Animation

<pc-animation>

0.4.0

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Animate elements declaratively with nearly 100 baked‐in presets, or roll your own with custom keyframes. These animations are powered by the Web Animations API.

To animate an element, wrap it in a <pc-animation> element and set an an animation name. The animation will not start until you add the play attribute. Refer to the properties table for a list of all animation options.

<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

The animation will only be applied to the first child element found in <pc-animation>.

Demos#

Animations and easings#

This demo demonstrates all of the baked‐in animations and easings. Animations are based on those found in the popular Animate.css library.

<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="Playback rate"
            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#

Use an Intersection Observer to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport.

<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

Custom keyframes#

Supply your own keyframes to build custom animations.

<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

Playing animations programmatically#

Animations won’t play until you add the play attribute. You can omit it initially, then apply it programmatically such as after a user interaction. In this demo, the button will animate once every time the button is clicked.

<div class="animation-form">
    <pc-animation name="rubberBand" duration="1000" iterations="1">
        <pc-button appearance="primary">Click me</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
(default)	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, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <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, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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