v1.1.0 · GSAP 3.15 · Bricks 2.3

Bricks GSAP Animator — Demo-Seite

Alle Animationen auf dieser Seite sind ausschließlich über die Control-Gruppe „GSAP Animation“ im Bricks-Builder konfiguriert — ohne eine Zeile Code. Scrolle durch die Sektionen: Scroll-Reveals starten automatisch, interaktive Demos (Klick, Hover, Maus) sind entsprechend beschriftet.

1 · Fade beim Seiten-Load

Scroll nach unten ↓

2 · Scroll-Reveal: Slide-Up + drei gestaffelte Items

Batch-Item 1

Batch-Item 2

Batch-Item 3

3 · Property-Animation: Opacity + Y + Rotation + Blur (fromTo)

Card A

Card B

Card C

4 · Interaktive Trigger: Click, Hover, Mausposition

▶ Klick mich: Rotation-Toggle

◈ Hover mich: Scale + Farbe

↔ Mausposition X steuert meine Position

5 · Callback-Kette: Klick startet die nächste Timeline

▶ Klick: Ich drehe mich — danach startet automatisch das Element darunter

⭐ Ich laufe NUR über den Callback (Trigger: Manuell)

6 · Scrub + Pin: Scroll steuert die Animation

⬛ Scrub-Item 1

⬛ Scrub-Item 2

⬛ Scrub-Item 3

Kurz durchatmen — unten geht es mit interaktiven Demos weiter ↓

7 · Bound to Trigger: jedes Item startet einzeln

→ Sep-Item 1 (eigener Trigger)

→ Sep-Item 2 (eigener Trigger)

→ Sep-Item 3 (eigener Trigger)

8 · Timeline-Sequenz + eigene toggleActions

▶ Klick: Timeline — Fade, dann Slide gleichzeitig, dann Dreh nach Pause

↕ Scroll-Element mit custom toggleActions (restart bei jedem Enter)

9 · Batch-Stagger, Breakpoint-Override, Custom Ease

■ Batch-Item A

■ Batch-Item B

■ Batch-Item C

10 · Flip (Layout-Wechsel) + Motion Path

⇄ Flip-Item 1 (klick auf den Block)

⇄ Flip-Item 2

⇄ Flip-Item 3

✈ Klick: Ich fliege eine Kurve (Motion Path + Auto-Rotate)

11 · SplitText: Zeilen, Wörter, Buchstaben

Dieser Absatz wird Zeile für Zeile eingeblendet, sobald er in den Viewport scrollt. Jede Zeile gleitet von unten herein und blendet dabei auf. Der Text ist absichtlich lang genug, um über mehrere Zeilen zu laufen, damit der Zeilen-Reveal gut sichtbar wird.

Wort für Wort nach oben — der klassische Hero-Reveal

Klick mich: Buchstaben-Explosion

12 · ScrambleText: Text entschlüsselt sich beim Scrollen

GSAP ANIMATOR ENTSCHLUESSELT SICH

13 · Parallax: Ebenen mit unterschiedlicher Scroll-Geschwindigkeit

langsam · speed 0.2

mittel · speed 0.5

schnell · speed 0.9

14 · Horizontal Scroll → Panel 1

Panel 2

Panel 3

Panel 4 → Ende

15 · Draggable: Zieh die Box (Inertia + Grenzen)

⠿ zieh mich

16 · Presets: fertige Animationen ohne Property-Repeater

Preset: Fade + von unten

Preset: Zoom In

Preset: Blur In

Preset: Slide von rechts

17 · Zahlen-Counter (zählt beim Scrollen hoch)

0

zufriedene Fahrschüler

0

Bestehensquote

0

Google-Bewertung

18 · Draggable-Slider mit Snap (ziehen & werfen → rastet ein)

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

19 · containerAnimation — ich erscheine im Horizontal-Scroll

Panel 2 — an die horizontale Bewegung gekoppelt

Panel 3 — Start „left 65%“ statt vertikalem Scroll

20 · Marquee (nahtloser Endlos-Lauf, Pause bei Hover)

GSAP 3.15

ScrollTrigger

Draggable + Inertia

SplitText

MotionPath

self-hosted · kein CDN

21 · Eigenes Admin-Preset („Fahrschul Reveal“)

Dieses Element nutzt ein im Admin angelegtes Preset — ohne eigene Properties.

22 · SplitText Masking

Der Text wird in Zeilen zerlegt; jede Zeile bekommt eine Clip-Maske und schiebt sich einzeln dahinter hervor (bgaSplit „lines" + bgaSplitMask).

Große Typografie, Zeile für Zeile — jede Zeile schiebt sich einzeln hinter ihrer eigenen Maske sauber hervor.

23 · Counter: Scroll-Scrub & Intl-Formatierung

Links: der Zähler ist an die Scroll-Position gekoppelt (bgaCounterScrub) — er zählt mit, wie du scrollst. Rechts: Formatierung via Intl.NumberFormat (de-DE, EUR).

0 → 100 % · an Scroll-Position gekoppelt

Intl.NumberFormat · de-DE · EUR

0

24 · Timeline-Orchestrator (Flaggschiff)

EINE gsap.timeline über vier Elemente mit Position-Parametern (im Plugin-Manager unter „Timelines" definiert): Box 1 & 2 gleichzeitig von den Seiten, Box 3 skaliert überlappend hinein, Box 4 rotiert zum Schluss.

25 · FLIP bei Query-Loop-Filtern (Flaggschiff)

Beim (AJAX-)Filtern oder Sortieren eines Query-Loops gleiten die verbliebenen Items via GSAP Flip an ihre neuen Positionen — entfernte blenden aus, neue ein. Der Wrapper trägt den FLIP-Übergang; jede Karte hat einen stabilen data-bga-flip-key. (In Produktion filtert ein Bricks-Query-Filter; im Test wird das Filtern simuliert.)

26 · Scroll-Velocity (Verzerrung beim schnellen Scrollen)

Skew bzw. Rotation proportional zur Scroll-Geschwindigkeit — je schneller du scrollst, desto stärker; beim Anhalten federt der Wert weich auf 0 zurück. Scrolle diesen Abschnitt zügig hoch und runter.

skewY · max 18°

skewX · max 18°

rotation · max 12°

27 · Interaktions-Trigger: Tilt & Magnetic (Hover mit der Maus)

Tilt: die Karte neigt sich in 3D zum Cursor. Magnetic: der Button zieht anteilig zum Cursor. Beide federn beim Verlassen sanft zurück. Fahre mit der Maus darüber.

◈ Tilt · neige mich zum Cursor

🧲 Magnetic Button

28 · Horizontal-Snap → Panel 1 (rastet beim Loslassen ein)

Panel 2

Panel 3

Panel 4 → Ende

29 · Scroll-Fortschritt → CSS-Variable

Der Scroll-Fortschritt dieses Abschnitts (0–1) wird laufend in die CSS-Variable --bgf-progress am :root geschrieben. Balken-Füllung und Box-Skalierung unten sind reines CSS, das diese Variable nutzt — keine weitere Animation. Scrolle durch den Abschnitt.

scale = f(progress)

30 · Once-per-Session (Reveal nur einmal pro Sitzung)

Diese Karte spielt ihren Reveal nur beim ERSTEN Aufruf pro Browser-Sitzung. Nach einem Reload (gleiche Sitzung, bis der Tab geschlossen wird) erscheint sie sofort im Endzustand, ohne erneut zu animieren. Merkt sich das über sessionStorage.

✨ Ich animiere nur einmal pro Sitzung

31 · Smooth Scroll zu Ziel (ScrollToPlugin)

Ein Klick scrollt sanft (mit Dauer + Ease) zu einem Ziel — CSS-Selektor/#Anker oder „top"/„bottom", optional mit Offset für sticky Header. Orthogonal zu Animationen; nutzt GSAP ScrollToPlugin (respektiert prefers-reduced-motion).

▲ Ganz nach oben

↓ Springe zur FLIP-Demo (Sektion 25)