Moderne Websites müssen sich gut anfühlen
Motion is Meaning – Wie echte Animationen Websites transformieren
Visuelles Design bringt Aufmerksamkeit.
Aber Bewegung sorgt für Erinnerung.
Gute Animation ist kein Zuckerguss, sondern Teil der Funktion.
Sie führt, beruhigt, erklärt – und bringt Seele ins Interface.
📚 Die 4 Arten von Webanimation, die Sinn machen
- Entrance Animation (Reveal):
Inhalte werden eingeblendet (fade, slide, scale) → Fokus & Kontext - Hover Feedback / Microinteraction:
Buttons, Links, Icons reagieren auf Interaktion → UX, Kontrolle - Page Transition / Route Animation:
Seitenwechsel ohne Hardcut → App-Feeling, Flow - Scroll-based Storytelling:
Inhalte verändern sich beim Scroll → Spannung, Kontrolle
🎨 Easing Curves – Der Flow entscheidet
Ein linearer Übergang ist wie ein Fahrstuhl.
Ein natürliches Ease-in-out fühlt sich wie ein Tanz an.
🧮 Gängige Curves:
| Name | CSS/GSAP Code | Feeling |
|---|---|---|
| ease-in | cubic-bezier(0.42, 0, 1, 1) |
startet weich, endet schnell |
| ease-out | cubic-bezier(0, 0, 0.58, 1) |
startet schnell, endet weich |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
weich beidseitig |
| spring | type: "spring" (Framer) |
natürlich, reaktiv |
Tipp: Nutze cubic-bezier.com zum Feintuning.
💻 Codebeispiele
🔧 Framer Motion (React)
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.42, 0, 0.58, 1] }}
>
<h1>Dein Heldensatz hier</h1>
</motion.div>
gsap.from(".headline", {
y: 80,
opacity: 0,
duration: 1.2,
ease: "power3.out",
scrollTrigger: {
trigger: ".headline",
start: "top 80%",
toggleActions: "play none none none",
},
});🧵 Smooth Scroll mit Lenis (inkl. ScrollTrigger-Sync)
const lenis = new Lenis();
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);Pro-Tipp: ScrollTrigger.scrollerProxy() mit Lenis verbinden, um GSAP+SmoothScroll zu kombinieren⚠️ Performance-Regeln
- Max. 60 FPS → GPU-friendly (transform/opacity statt top/left)
- Hardware Acceleration:
will-change: transform - Lazyload animierbarer Content (IntersectionObserver / ScrollTrigger)
- Vermeide Layout Thrashing (Reflow durch JS-Style-Manipulation)
🧠 Motion Psychology – Was Animation mit Nutzern macht
| Effekt | Animationstyp | Nutzen für UX |
|---|---|---|
| Orientierung | Page Transition, Scroll Reveal | „Wo bin ich, wo geh ich hin?“ |
| Feedback | Button Hover, Icon Animation | „Ich hab geklickt, es reagiert“ |
| Hierarchie | Delayed Reveal, Scaling Sections | „Was ist wichtig?“ |
| Emotion | Soft Easing, Custom Timing | „Fühlt sich hochwertig an“ |
🔥 Beispiele aus der Praxis
- https://obys.agency/ – weicher Scroll, animierte Layoutstruktur
- https://papsn.de – (bald auch bei dir 😉)
Fazit: Beweg dich. Oder du wirkst wie 2010.
Wenn du den Unterschied zwischen einer Standardseite und einer „Awwward-würdigen“ Seite suchst –
es ist die Bewegung.
Motion ist kein Feature. Es ist Sprache.
Und wir sprechen sie fließend.
Epsilon – Webdesign, das sich anfühlt.
→ Projekt starten