Clip Reveal

Ein Bild wird freigelegt, indem eine Abdeckung schrumpft oder eine Maskenkante sich ausdehnt.

Füge bei [wo] einen „Image Reveal Wipe“ hinzu (auch mask reveal oder clip-path reveal genannt).
Wenn das Bild ins Sichtfeld scrollt, soll eine Abdeckung von einer Seite wegwischen und es im Takt des Scrollens sanft freilegen, sodass es lange vor dem Verlassen des Bildschirms ganz offen ist.
Reserviere den Platz des Bildes, damit das Layout nicht springt, und zeige das Bild bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.

Der Text gleitet hinter einer Schnittkante nach oben, als tauche er aus dem Nichts auf.

Füge bei [wo] einen „Mask Reveal“-Texteinstieg hinzu (auch line mask reveal oder text masking genannt).
Jede Zeile soll hinter einer unsichtbaren Kante nach oben gleiten, als tauche sie aus dem Nichts auf, eine nach der anderen, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn der Text ins Bild scrollt, und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Animation.

Massive Paneele wischen über den Bildschirm, verdecken die alte Seite und ziehen sich dann zurück, um die neue freizugeben.

Füge bei [wo] einen „Curtain / Panel Wipe“-Seitenübergang hinzu (auch Page Wipe oder Staggered Panels genannt).
Massive Paneele sollen nacheinander hereinwischen und die alte Seite verdecken, die Seite soll wechseln, während sie ganz verdeckt ist, und die Paneele sollen dann weiter aus dem Bild ziehen und die neue freigeben: kraftvoll und flüssig.
Zeige die neue Seite nie, bevor die Paneele die alte verdeckt haben, und nutze bei reduzierter Bewegung (prefers-reduced-motion) stattdessen eine einfache Überblendung.

Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.

Füge bei [wo] eine „Fade In / Fade Out“-Animation hinzu (auch fade genannt).
Das Element soll beim Erscheinen an seinem Platz von völlig transparent zu völlig sichtbar übergehen und beim Verschwinden genauso wieder ausblenden: sanft, ohne Bewegung oder Skalierung.
Sorge dafür, dass es nach dem Ausblenden weder anklickbar noch per Tastatur erreichbar ist, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.

Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.

Füge bei [wo] eine „Fade In Directional“-Einblendanimation hinzu (auch fade in left, fade in right oder fade in down genannt).
Das Element soll einblenden und dabei ein kurzes Stück von einer Seite an seine endgültige Position gleiten: schnell und fließend, beim Ankommen abbremsend, ohne Nachfedern.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Das Element blendet aus und gleitet dabei in eine Richtung davon.

Füge bei [wo] eine „Fade Out Directional“-Ausblendanimation hinzu (auch fade out up oder fade out down genannt).
Das Element soll ausblenden und dabei ein kurzes Stück in eine Richtung gleiten: schnell, beim Hinausgehen beschleunigend.
Nimm es erst nach dem Ausblenden aus dem Layout, damit benachbarte Inhalte nicht zu früh springen, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.