Animation Handler

Der Animation Handler bietet eine einheitliche Schnittstelle zur Erstellung und Steuerung von Animationen innerhalb der Anwendung. Er basiert vollständig auf der nativen Web Animations API und benötigt keine zusätzlichen Bibliotheken oder CSS-Frameworks. Animationen können registriert und anschließend automatisch oder manuell ausgelöst werden.

Die API unterstützt verschiedene Trigger wie Sichtbarkeit im Viewport, Hover- oder Click-Interaktionen sowie die programmgesteuerte Steuerung über JavaScript. Zusätzlich stehen Events für Start, Ende und Abbruch einer Animation zur Verfügung, wodurch sich komplexe Interaktionsabläufe und Animation-Chains einfach umsetzen lassen. Da die Verarbeitung vollständig auf nativen Browser-APIs basiert, profitieren Animationen von einer hohen Performance und einer direkten Integration in bestehende DOM-Strukturen und Komponenten.

Initialisierung

document.addEventListener('kryzo:ready', ({ detail: { ANIM } }) => {
    /* Ab hier stellen alle Animation Funktionen zur Verfügung */
});

Animation setzen

// Zu verwendendes Element selektieren
const el = document.querySelector('.myElement');

// Registrieren (spielt noch nicht ab)
ANIM.add(el, {
/*  
    Integrierte Presets: 

    fadeIn, fadeOut, slideUp, slideDown, slideLeft, slideRight, zoomIn, zoomOut, shake, pulse, spin, flipX, flipY,
    popIn, riseUp, swingIn, burst, tumbleIn, flicker, perspectiveIn, rubberBand, bounceIn, blurIn, dropIn, stamp, 
    attention, quantumIn, quantumOut, genieIn, genieOut
*/
    preset:   'slideUp',     
    duration: 400,           // Dauer der Animation in ms
    delay:    100,           // Verzögerung bis zum Start der Animation in ms
    easing:   'spring',      // linear, ease, easeIn, easeOut, easeInOut, spring, snappy, smooth, bounce
    on:       'visible',     // visible, hover, click, null
});

Manuell steuern

ANIM.play(el);          // Animation abspielen
ANIM.pause(el);         // Animation pausieren
ANIM.remove(el);        // Animation entfernen

Events

/*
    detail: Nur in start gefüllt
        { timing: { duration, delay, easing, fill, iterations, direction } }
*/
ANIM.listener(el, 'start',  (el, detail) => {});    // Funktion ausführen bei Start der Animation
ANIM.listener(el, 'end',    (el, detail) => {});    // Funktion ausführen bei Ende der Animation
ANIM.listener(el, 'cancel', (el, detail) => {});    // Funktion ausführen nach Entfernen der Animation

Loop

ANIM.listener(el, 'end',    (el, detail) => {
    ANIM.play(el);  // Wiederholt die Animation bei Ende
                    // Counter hinzufügen für limitierte Loops
});

Eigenes Preset hinzufügen

ANIM.addPreset('glitch', [
    { transform: 'skewX(0deg)'  },
    { transform: 'skewX(-5deg)' },
    { transform: 'skewX(4deg)'  },
    { transform: 'skewX(0deg)'  },
]);

Beispiele

Kryzo Animation