Direkt zum Katalog
Andreas Schwarzer WebdesignMOTION
LAB 05.2
AS WEBDESIGN / EXPERIENCE CATALOGUE

Gutes Design
bleibt nicht stehen.

Entdecke Details, die aus einer Website ein Erlebnis machen. Kein Video, keine Attrappe: Jeder Effekt läuft direkt hier in deinem Browser.

Effekte entdecken ↗So funktioniert die Auswahl ↓
48Live-Effekte
08Disziplinen
01Deine Wunschliste
01 / EFFECT LIBRARY

Finde deinen Stil.

Bewege den Zeiger über die Vorschauen, klicke auf Bedienelemente oder öffne den Effekt in groß.

48 Effekte
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C01 / Cursor & Pointermoderat

Magnetic Focus

Ein Ziel reagiert auf deine Zeigerposition.

Mobil: jaAufwand: mittel
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C02 / Cursor & Pointermoderat

Orbit Cursor

Ein kleiner Satellit folgt dem Zeiger.

Mobil: eingeschränktAufwand: mittel
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C03 / Cursor & Pointerleicht

Precision Crosshair

Fadenkreuz mit präziser Positionsreaktion.

Mobil: eingeschränktAufwand: gering
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C04 / Cursor & Pointermoderat

Liquid Cursor

Weicher, leicht verzögerter Fokuspunkt.

Mobil: eingeschränktAufwand: mittel
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C05 / Cursor & Pointermoderat

Spotlight Reveal

Der Zeiger lenkt einen fokussierten Lichtkegel.

Mobil: eingeschränktAufwand: mittel
MOVE
HERE
AS / MOTION LAB
LIVE PREVIEW
C06 / Cursor & Pointeranspruchsvoll

Cursor Echo

Mehrere versetzte Punkte bilden eine kurze Spur.

Mobil: eingeschränktAufwand: hoch
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H01 / Hero & Bühnemoderat

Cinematic Iris

Eine große runde Maske gibt die Bühne frei.

Mobil: jaAufwand: mittel
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H02 / Hero & Bühnemoderat

Split Horizon

Zwei Ebenen bewegen sich gegeneinander.

Mobil: jaAufwand: mittel
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H03 / Hero & Bühnemoderat

Parallax Depth

Mehrere Tiefenebenen erzeugen Räumlichkeit.

Mobil: jaAufwand: mittel
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H04 / Hero & Bühneanspruchsvoll

Perspective Fold

Eine Fläche klappt perspektivisch auf.

Mobil: eingeschränktAufwand: hoch
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H05 / Hero & Bühneleicht

Scan Reveal

Ein Lichtscan legt ein Motiv frei.

Mobil: jaAufwand: gering
CREATIVE / STUDIOBEYOND
STATIC.CONCEPT IN MOTION — 05
AS / MOTION LAB
LIVE PREVIEW
H06 / Hero & Bühnemoderat

Blueprint Grid

Technisches Raster wird schrittweise aufgebaut.

Mobil: jaAufwand: mittel
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T01 / Typografieleicht

Split Reveal

Die Schrift erscheint zeilenweise aus einer Maske.

Mobil: jaAufwand: gering
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T02 / Typografieleicht

Outline Shift

Kontur und Füllung schieben sich übereinander.

Mobil: jaAufwand: gering
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T03 / Typografiemoderat

Kinetic Stagger

Einzelne Buchstaben tanzen leicht versetzt.

Mobil: jaAufwand: mittel
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T04 / Typografieleicht

Gradient Sweep

Ein Farbschimmer wandert durch die Typografie.

Mobil: jaAufwand: gering
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T05 / Typografieleicht

Typewriter Signal

Text wird schrittweise eingegeben.

Mobil: jaAufwand: gering
TYPE STUDIES — 2026
MOTIONMOTION
IDEAS / IN ACTION
AS / MOTION LAB
LIVE PREVIEW
T06 / Typografiemoderat

3D Type Flip

Die Schlagzeile rotiert in der Tiefe.

Mobil: eingeschränktAufwand: mittel
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S01 / Scroll & Storyleicht

Progress Rail

Eine animierte Linie zeigt Lesefortschritt.

Mobil: jaAufwand: gering
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S02 / Scroll & Storymoderat

Mask Rise

Ein Bild wird mit wandernder Maske enthüllt.

Mobil: jaAufwand: mittel
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S03 / Scroll & Storymoderat

Stacked Cards

Karten rücken gestaffelt nach vorn.

Mobil: jaAufwand: mittel
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S04 / Scroll & Storyanspruchsvoll

Pinned Story

Eine Erzählfläche bleibt visuell im Fokus.

Mobil: eingeschränktAufwand: hoch
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S05 / Scroll & Storyleicht

Timeline Draw

Eine Zeitlinie wächst mit dem Fortschritt.

Mobil: jaAufwand: gering
01 Discover
02 Imagine
03 Create
STORY / 03
AS / MOTION LAB
LIVE PREVIEW
S06 / Scroll & Storymoderat

Photo Slice

Ein Motiv baut sich in Streifen auf.

Mobil: jaAufwand: mittel
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B01 / Buttons & Interaktionmoderat

Magnetic Button

Der Knopf folgt dem Zeiger subtil.

Mobil: jaAufwand: mittel
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B02 / Buttons & Interaktionleicht

Liquid Fill

Eine Farbfläche fließt durch den Button.

Mobil: jaAufwand: gering
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B03 / Buttons & Interaktionleicht

Border Trace

Die Umrandung wird animiert nachgezeichnet.

Mobil: jaAufwand: gering
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B04 / Buttons & Interaktionleicht

Arrow Launch

Ein Pfeil beschleunigt beim Interagieren.

Mobil: jaAufwand: gering
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B05 / Buttons & Interaktionleicht

Ripple Signal

Ein Klick startet eine sichtbare Welle.

Mobil: jaAufwand: gering
INTERACTION / 01HOVER · FOCUS · CLICK
AS / MOTION LAB
LIVE PREVIEW
B06 / Buttons & Interaktionmoderat

Neon Circuit

Feine Signalspuren umranden das Element.

Mobil: jaAufwand: mittel
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X01 / Übergängemoderat

Curtain Wipe

Ein Vorhang schiebt sich über die Ansicht.

Mobil: jaAufwand: mittel
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X02 / Übergängeanspruchsvoll

Pixel Dissolve

Ein Motiv zerfällt in kleine Rasterzellen.

Mobil: eingeschränktAufwand: hoch
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X03 / Übergängemoderat

Circular Portal

Eine runde Öffnung wechselt die Szene.

Mobil: jaAufwand: mittel
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X04 / Übergängemoderat

Diagonal Slice

Die Szene verschiebt sich diagonal.

Mobil: jaAufwand: mittel
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X05 / Übergängemoderat

Glitch Frame

Ein kurzer Signalversatz leitet den Wechsel ein.

Mobil: eingeschränktAufwand: mittel
01DISCOVER
02CREATE
AS / MOTION LAB
LIVE PREVIEW
X06 / Übergängemoderat

Soft Morph

Eine Fläche wandelt weich ihre Form.

Mobil: jaAufwand: mittel
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M01 / Material & Oberflächenanspruchsvoll

Liquid Chrome

Licht läuft über eine spiegelnde Oberfläche.

Mobil: eingeschränktAufwand: hoch
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M02 / Material & Oberflächenleicht

Frosted Glass

Eine klare Milchglasfläche bewegt sich im Licht.

Mobil: jaAufwand: gering
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M03 / Material & Oberflächenmoderat

Metal Brushing

Feine Bürstspuren werden plastisch beleuchtet.

Mobil: jaAufwand: mittel
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M04 / Material & Oberflächenmoderat

Holographic Foil

Irisierende Farbkanten wandern über die Fläche.

Mobil: jaAufwand: mittel
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M05 / Material & Oberflächenleicht

Soft Emboss

Ein Symbol wirkt sanft ins Material geprägt.

Mobil: jaAufwand: gering
AS01 / STUDIO
SURFACE / STUDY
AS / MOTION LAB
LIVE PREVIEW
M06 / Material & Oberflächenleicht

Paper Layer

Mehrere Papierflächen schichten sich realistisch.

Mobil: jaAufwand: gering
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G01 / Hintergründemoderat

Aurora Flow

Sanfte Lichtbänder bewegen sich im Hintergrund.

Mobil: jaAufwand: mittel
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G02 / Hintergründeleicht

Dot Matrix

Technisches Punkteraster mit wanderndem Signal.

Mobil: jaAufwand: gering
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G03 / Hintergründemoderat

Mesh Drift

Große farbige Lichtfelder verschieben sich.

Mobil: jaAufwand: mittel
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G04 / Hintergründeleicht

Pulse Rings

Konzentrische Signalkreise breiten sich aus.

Mobil: jaAufwand: gering
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G05 / Hintergründemoderat

Grid Perspective

Ein perspektivisches Raster erzeugt Tiefe.

Mobil: jaAufwand: mittel
ATMOSPHERE 001 AS / MOTION LAB
LIVE PREVIEW
G06 / Hintergründeleicht

Film Grain Light

Körnung und Lichtgradient formen eine Textur.

Mobil: jaAufwand: gering
02 / DEIN DESIGN-BOARD

Was darf es
für dich sein?

Stelle deine Favoriten zusammen. Die Auswahl wird in deiner gemeinsamen Projektmappe gespeichert und kann ohne Login zusammen mit deinen Designwünschen angefragt werden.

Website dazu gestalten ↗Meine gesamte Auswahl ↗
Keine automatische Beauftragung. Die Effekte werden auf Eignung, Aufwand und Performance geprüft.
YOUR SELECTION / AS STUDIO00 / 20

Wähle Effekte über „Merken“.

DEINE PROJEKTMAPPE
03 / VON DER IDEE ZUR WEBSITE

Ausprobieren. Auswählen. Abstimmen.

01

Live erleben

Teste einzelne Animationen auf dem Desktop oder Smartphone und öffne sie in voller Größe.

02

Favoriten sammeln

Markiere bis zu 20 Ideen. Deine Wunschliste bleibt lokal in deinem Browser erhalten.

03

Machbarkeit prüfen

In der Projektmappe kannst du alle Effekte und Designwünsche zusammen anfragen – auch ohne Kundenkonto.

DEIN PROJEKT. DEIN STIL.Website-Konfigurator entdecken ↗
AS / MOTION EXPLORER

Zeiger bewegen · klicken · scrollen