{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-federnd-verspielt",
 "name": "Animationsstil „Federnd verspielt“",
 "name_en": "Springy playful / elastic motion / Spring / bounce easing with CSS linear()",
 "kurz": "Stickerkarten landen mit Überschwingen, Reiter, Schalter und Knöpfe federn nach; gezogene Karten schwingen per Federphysik zurück.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "verspielt",
  "warm",
  "lebendig",
  "jung",
  "freundlich",
  "modern"
 ],
 "technik": [
  "gsap",
  "css",
  "linear-easing",
  "motion",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Elemente schießen leicht über ihr Ziel hinaus und schwingen aus, statt weich abzubremsen. Karten landen mit Nachschwingen, Hover skaliert mit Überschwinger, gezogene Elemente kehren elastisch zurück. In CSS über cubic-bezier mit Werten über 1 oder linear()-Federkurven, in JS über Federphysik mit Steifigkeit und Dämpfung. Dauern kurz halten, sonst wirkt es albern.",
  "warum_es_wirkt": "Federn fühlen sich physisch an. Die Oberfläche wirkt lebendig, die Marke nahbar und spielerisch. Federn reagieren natürlich auf Unterbrechungen. Sie sind das Bewegungsvokabular moderner UIs wie iOS, Linear oder Raycast. Mit linear() geht das inzwischen auch ohne JavaScript.",
  "wann_einsetzen": "Verspielte Marken, Kreativstudios, Consumer-Apps. Überall, wo etwas ankommt: Karten, Sticker, Badges, Popovers, Toggles, Reiter-Indikatoren, Drück-Feedback und Drag-Interaktionen.",
  "wann_nicht": "Nie auf Opazität, das Überschwingen flackert. Nicht bei großen Flächen oder langen Wegen über den Bildschirm, das macht seekrank und wirkt kindlich. In seriösen Kontexten wie Finanzen, Recht oder Gesundheit höchstens sehr gedämpft.",
  "varianten": [
   "Überschwinger: cubic-bezier(0.34, 1.56, 0.64, 1) bzw. back.out(1.7), einmal über das Ziel, 150–600 ms",
   "Elastisch: elastic.out(1, 0.75), weich und länger, etwa 0,5–1 s; lebhafter mit elastic.out(1.2, 1)",
   "linear()-Feder: ca. 50 Stützpunkte, Spitze 1,585, 0,8 s (Chrome-Beispiel); grobe Kurzform linear(0, 1.1, 0.95, 1.02, 1)",
   "JS-Feder: Steifigkeit 120, Dämpfung 14, für Ziehen und geschwindigkeitsabhängige Effekte",
   "Extrem: cubic-bezier(.34, 4.56, .64, 1) für einzelne Hover-Effekte, 600–700 ms"
  ],
  "umsetzung": "CSS-Token anlegen: --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: linear(…) aus einem Generator (Motion spring oder Online-Generator). Ohne linear()-Unterstützung per @supports not (transition-timing-function: linear(0, 1)) auf cubic-bezier(0.34, 1.56, 0.64, 1) mit 400 ms zurückfallen. Nur transform, translate, scale und rotate federn lassen; Opazität, Farbe und Schatten bekommen eine eigene Kurve ohne Überschwingen. GSAP: 'back.out(1.7)', 'elastic.out(1, 0.75)'. JS-Feder: a = −k·x − d·v mit k 120, d 14, Masse 1, Zeitschritt höchstens 1/30 s (besser Teilschritte). Drück-Feedback: scale 0,95 in 150 ms mit dem Überschwinger. Stagger 40–60 ms.",
  "mobil": "Gut für Touch-Feedback. Amplitude etwas reduzieren, zum Beispiel kürzerer Landeweg und kleinere Skalierung. Hover-Effekte durch Antippen ersetzen.",
  "reduzierte_bewegung": "Überschwingen entfernen. Entweder transition: none oder ease-out mit etwa 200 ms ohne Überschwingen. Wege weglassen, nur kurz einblenden.",
  "barrierefreiheit": "Keine endlos wippenden Elemente, Aufmerksamkeitseffekte nur einmal. Überschwinger dezent halten, weil starke Schwingungen vestibulär belasten. Nie auf Opazität. Ziehbare Elemente zusätzlich per Klick oder Tastatur bedienbar machen."
 },
 "messwerte": {
  "easing": "Produktion: cubic-bezier(0.34,1.56,0.64,1) (Choo-Choo World 49×, Raycast, Unseen); elastic.out(1, 0.75) (Lando Norris 20×, Messenger); Extrem cubic-bezier(.34,4.56,.64,1) (Cuberto Button-Hover .6–.7s); back.out(1.5) (Osmo); Feder k 120 / d 14",
  "dauer_ms": "Produktion: Raycast 150 (Drücken); Choo-Choo 400–700, 1000; Lando 500; Cuberto 600–700. Skala: 300 / 400 / 600 / 800 / 1000",
  "stagger_ms": "Lando 15–30; typisch 40–60",
  "distanz": "Hover scale 1,05–1,2; Rotation ±4–15°",
  "sonstiges": "Rückfedern vor Schwellwert 200–300 ms power1/2.out",
  "herkunft": "beobachtet",
  "quelle": "https://choochooworld.com/index.a886b8d1.css",
  "aus_eintrag": [
   "token-federnd-verspielt"
  ]
 },
 "kurve": {
  "bezier": [
   0.34,
   1.56,
   0.64,
   1.0
  ],
  "css": "cubic-bezier(0.34, 1.56, 0.64, 1)",
  "name": "back.out",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Flick Cards Slider",
   "url": "https://www.osmo.supply/resource/flick-cards-slider",
   "auszeichnung": "",
   "beobachtung": "0,6 s elastic.out(1.2, 1) für Kartenbewegung.",
   "art": "demo"
  },
  {
   "seite": "Osmo – Stacked Cards Slider",
   "url": "https://www.osmo.supply/resource/stacked-cards-slider",
   "auszeichnung": "",
   "beobachtung": "Nach dem Loslassen 1 s elastic.out(1, 0.75); vorher 0,2 s Power2.easeOut.",
   "art": "demo"
  },
  {
   "seite": "Codrops Demo – On-Scroll 3D Carousel",
   "url": "https://tympanus.net/Development/3DCarousel/",
   "auszeichnung": "",
   "beobachtung": "Federn stiffness 120, damping 14 für Spreizung und Neigung nach Scrollgeschwindigkeit.",
   "art": "demo"
  },
  {
   "seite": "Chrome for Developers – Physics-based easing",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/physics-based-easing",
   "auszeichnung": "",
   "beobachtung": "Feder per linear() mit ca. 50 Stützpunkten, 0,8 s; Bounce 0,4 s; Fallback cubic-bezier(0.34, 1.56, 0.64, 1) mit 0,4 s; keine Bounce-Kurven auf opacity.",
   "art": "artikel",
   "weitere_beobachtung": "Offizielle Anleitung mit vollständigen linear()-Werten für Spring (0.8 s) und Bounce (0.4 s), Fallback-Strategien, Warnung vor Opacity-Überschwingern."
  },
  {
   "seite": "Josh W. Comeau: Springs and Bounces in Native CSS",
   "url": "https://www.joshwcomeau.com/animation/linear-timing-function/",
   "auszeichnung": "",
   "beobachtung": "Artikel zu linear() für physikbasierte Bewegung (Titel/Zusammenfassung gesehen).",
   "art": "artikel"
  },
  {
   "seite": "Motion Examples: CSS Spring",
   "url": "https://motion.dev/examples/vue-css-spring",
   "auszeichnung": "",
   "beobachtung": "Motion erzeugt Spring-Kurven für CSS.",
   "art": "demo"
  },
  {
   "seite": "Choo-Choo World (Lusion)",
   "url": "https://choochooworld.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): cubic-bezier(.34,1.56,.64,1) 49× im CSS mit 0.3–1s (häufig .5s/.6s).",
   "art": "website"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Drück-Feedback transform .15s cubic-bezier(.34,1.56,.64,1) mit scale(.95) bzw. .98.",
   "art": "website"
  },
  {
   "seite": "Lando Norris (OFF+BRAND)",
   "url": "https://landonorris.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): GSAP elastic.out(1, 0.75) 20× (z. B. Rotation 0.5s), dazu Stagger 0.015–0.03.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Physics-based easing mit linear()",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/physics-based-easing"
  },
  {
   "titel": "Motion: spring",
   "url": "https://motion.dev/docs/spring"
  },
  {
   "titel": "Josh W. Comeau: Springs and Bounces in Native CSS",
   "url": "https://www.joshwcomeau.com/animation/linear-timing-function/"
  }
 ],
 "kombinierbar_mit": [
  "flick-karten-stapel",
  "radial-bogen-slider",
  "3d-karussell-zylinder",
  "druck-feedback",
  "toggle-switch",
  "einblenden-starting-style",
  "gleitender-indikator"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "hover.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsseiten."
  ],
  "zusammengelegt_aus": [
   "token-federnd-verspielt",
   "federn-linear-easing"
  ],
  "querverweis_kategorien": [
   "Mikroanimationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Stickerkarten landen mit Überschwingen, Reiter, Schalter und Knöpfe federn nach; gezogene Karten schwingen per Federphysik zurück.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "varianten": {
    "ueberschwinger": {
     "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
     "gsap_naeherung": "back.out(1.7)",
     "dauer_karten_ms": 500,
     "dauer_ui_ms": 400
    },
    "feder": {
     "easing": "linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1)",
     "quelle": "Chrome for Developers, Spring 0,8 s, Spitze 1,585",
     "dauer_karten_ms": 800,
     "dauer_ui_ms": 800
    },
    "elastisch": {
     "easing": "linear(0, 0.142 2%, 0.284 4%, 0.422 6%, 0.55 8%, 0.665 10%, 0.767 12%, 0.853 14%, 0.925 16%, 0.982 18%, 1.026 20%, 1.059 22%, 1.081 24%, 1.094 26%, 1.1 28%, 1.101 30%, 1.086 35%, 1.061 40%, 1.036 45%, 1.016 50%, 1.002 55%, 0.995 60%, 0.993 65%, 0.993 70%, 0.994 75%, 0.996 80%, 0.998 85%, 0.999 90%, 1 95%, 1)",
     "gsap": "elastic.out(1, 0.75)",
     "hinweis": "GSAP-Formel gesampelt, Spitze 1,10",
     "dauer_karten_ms": 1000,
     "dauer_ui_ms": 600
    }
   },
   "fallback_ohne_linear": "cubic-bezier(0.34, 1.56, 0.64, 1)",
   "stagger_ms": 50,
   "landen": {
    "translate_y_px": 80,
    "translate_y_touch_px": 48,
    "scale_von": 0.6,
    "rotate_von_deg": 0,
    "rotation_karten_deg": [
     -8,
     6,
     5,
     -7
    ],
    "opacity": "200 ms linear, ohne Feder"
   },
   "plakette": {
    "scale_von": 0,
    "rotate_von_deg": -40,
    "rotate_deg": -12
   },
   "hover_karte": {
    "scale": 1.08,
    "scale_touch": 1.05,
    "rotate": "Grundrotation × −0,6"
   },
   "nach_vorn": {
    "translate_y_px": -14,
    "scale": 1.04,
    "rotate": "Grundrotation × 0,3"
   },
   "druecken": {
    "scale": 0.95,
    "dauer_ms": 150,
    "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)"
   },
   "knopf_hover": {
    "translate_y_px": -3,
    "pfeil_rotate_deg": -45
   },
   "schalter": {
    "knauf_weg_px": 18,
    "druck_scale": "1.12 0.9"
   },
   "farben_und_schatten": "150 ms linear bzw. expo.out, nie Feder",
   "ziehen_feder": {
    "steifigkeit": 120,
    "daempfung": 14,
    "masse": 1,
    "teilschritt_s": 0.0083,
    "kippen_deg_max": 12,
    "kippen_faktor": 0.012,
    "start_schwelle_px": 6
   },
   "reduziert": {
    "easing": "cubic-bezier(0, 0, 0.58, 1)",
    "dauer_ms": 200
   }
  },
  "ausloeser": "klick",
  "touch": "Kein Hover. Antippen holt eine Karte federnd nach vorn, Ziehen mit dem Finger funktioniert wie mit der Maus. Ausschläge kleiner: Landeweg 48 px, Hover-Skalierung 1,05.",
  "reduziert": "Kein Überschwingen und kein Weg: Karten blenden in 200 ms ein, Reiter und Schalter gleiten mit ease-out 200 ms, Drücken skaliert nicht, gezogene Karten gleiten in 200 ms ohne Feder zurück.",
  "korrekturen": {
   "beschreibung": "Elemente schießen leicht über ihr Ziel hinaus und schwingen aus, statt weich abzubremsen. Karten landen mit Nachschwingen, Hover skaliert mit Überschwinger, gezogene Elemente kehren elastisch zurück. In CSS über cubic-bezier mit Werten über 1 oder linear()-Federkurven, in JS über Federphysik mit Steifigkeit und Dämpfung. Dauern kurz halten, sonst wirkt es albern.",
   "warum_es_wirkt": "Federn fühlen sich physisch an. Die Oberfläche wirkt lebendig, die Marke nahbar und spielerisch. Federn reagieren natürlich auf Unterbrechungen. Sie sind das Bewegungsvokabular moderner UIs wie iOS, Linear oder Raycast. Mit linear() geht das inzwischen auch ohne JavaScript.",
   "wann_einsetzen": "Verspielte Marken, Kreativstudios, Consumer-Apps. Überall, wo etwas ankommt: Karten, Sticker, Badges, Popovers, Toggles, Reiter-Indikatoren, Drück-Feedback und Drag-Interaktionen.",
   "wann_nicht": "Nie auf Opazität, das Überschwingen flackert. Nicht bei großen Flächen oder langen Wegen über den Bildschirm, das macht seekrank und wirkt kindlich. In seriösen Kontexten wie Finanzen, Recht oder Gesundheit höchstens sehr gedämpft.",
   "varianten": [
    "Überschwinger: cubic-bezier(0.34, 1.56, 0.64, 1) bzw. back.out(1.7), einmal über das Ziel, 150–600 ms",
    "Elastisch: elastic.out(1, 0.75), weich und länger, etwa 0,5–1 s; lebhafter mit elastic.out(1.2, 1)",
    "linear()-Feder: ca. 50 Stützpunkte, Spitze 1,585, 0,8 s (Chrome-Beispiel); grobe Kurzform linear(0, 1.1, 0.95, 1.02, 1)",
    "JS-Feder: Steifigkeit 120, Dämpfung 14, für Ziehen und geschwindigkeitsabhängige Effekte",
    "Extrem: cubic-bezier(.34, 4.56, .64, 1) für einzelne Hover-Effekte, 600–700 ms"
   ],
   "umsetzung": "CSS-Token anlegen: --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: linear(…) aus einem Generator (Motion spring oder Online-Generator). Ohne linear()-Unterstützung per @supports not (transition-timing-function: linear(0, 1)) auf cubic-bezier(0.34, 1.56, 0.64, 1) mit 400 ms zurückfallen. Nur transform, translate, scale und rotate federn lassen; Opazität, Farbe und Schatten bekommen eine eigene Kurve ohne Überschwingen. GSAP: 'back.out(1.7)', 'elastic.out(1, 0.75)'. JS-Feder: a = −k·x − d·v mit k 120, d 14, Masse 1, Zeitschritt höchstens 1/30 s (besser Teilschritte). Drück-Feedback: scale 0,95 in 150 ms mit dem Überschwinger. Stagger 40–60 ms.",
   "mobil": "Gut für Touch-Feedback. Amplitude etwas reduzieren, zum Beispiel kürzerer Landeweg und kleinere Skalierung. Hover-Effekte durch Antippen ersetzen.",
   "reduzierte_bewegung": "Überschwingen entfernen. Entweder transition: none oder ease-out mit etwa 200 ms ohne Überschwingen. Wege weglassen, nur kurz einblenden.",
   "barrierefreiheit": "Keine endlos wippenden Elemente, Aufmerksamkeitseffekte nur einmal. Überschwinger dezent halten, weil starke Schwingungen vestibulär belasten. Nie auf Opazität. Ziehbare Elemente zusätzlich per Klick oder Tastatur bedienbar machen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Leipziger Gestaltungsstudios: vier Stickerkarten und eine Plakette landen gestaffelt mit der gewählten Kurve, Hover, Reiter-Indikator, Schalter und Knöpfe nutzen dieselbe Kurve. Umschalter zeigt drei Varianten: Überschwinger 500 ms, linear()-Feder 800 ms (Chrome-Werte), elastic.out(1, 0.75) als gesampeltes linear() 1000 ms. Karten lassen sich ziehen und federn per JS-Physik (k 120, d 14) zurück. Opazität und Farben laufen bewusst ohne Feder. Die Vorführung wechselt pro Runde die Variante. Reines CSS/JS, keine Bibliothek. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .58 → .64, Werte-Labels von rgba(…, .4) auf --leise, Tomate der h1-Kursive über --tomate-schrift #e45133 (3,3:1; Flächen bleiben #ff5b3a), Kontrastmodus-Rahmen für Knöpfe."
 }
}