31 Animationsideen. Jedes Teil findet seinen Platz.
Zweite Fassung der Skizze «Passform» mit Bewegungen aus «Allgemeines» und aus dem Netz. Jede Idee lässt sich hier einzeln ausschalten; die Wahl gilt für alle Seiten dieses Browsers.
1. Kopfleiste setzt sich kompakt
Sobald der Kopf beim Scrollen seine Fläche bekommt, rückt das Logo mit einer kurzen Feder auf 88 % – ganz oben wird es wieder gross. Nur transform, die Höhe der Leiste bleibt gleich.
Ansehen: Startseite · Dienstleistungen – Desktop ab 901 px, etwas scrollen
Quelle: Allgemeines: Kopfleiste · Allgemeines: Headroom-Header
2. Farbwolke bleibt beim Scrollen zurück
Scrollt der Seitenkopf weg, sinkt die leise Farbwolke dahinter langsamer und verblasst; der Inhalt gleitet in einer eigenen Ebene darüber.
Ansehen: Prozessmanagement · Insights · Datenschutz – alle Unterseiten; Chrome/Safari 26, Firefox ohne Effekt
Quelle: Allgemeines: Parallaxe in Ebenen
3. Menü-Symbole rasten ein
Öffnet sich ein Dropdown zum ersten Mal, springen die Symbolkreise nacheinander auf, die Texte gleiten nach. Beim Wechsel zwischen Menüs gibt es keinen Versatz. Überfahren macht aus dem Kreis ein Squircle.
Ansehen: Startseite – Desktop: «Dienstleistungen», «Branchen» oder «MINT» öffnen
Quelle: Allgemeines: Shape Morphing · Allgemeines: Stagger-Timing · Allgemeines: Frequenz vor Animation
4. Handy-Menü: Linien ziehen, Einträge rasten ein
Im bisherigen Menü (?mnav=liste) ziehen sich die Trennlinien von links, die Titel steigen mit Feder auf, «Kontakt» wächst aus der Mitte. Öffnet eine Gruppe, dreht der Pfeil mit Nachfedern und die Einträge kommen gestaffelt.
Ansehen: Startseite mit bisherigem Handy-Menü – Handy-Breite, Burger antippen; die vier anderen Navigationen bleiben unberührt
Quelle: Allgemeines: Menü-Overlay · Allgemeines: Stagger-Timing
5. Referenzkarte wird zum Kopf der Detailseite
Klickt man ein Projekt an, wandert das farbige Logo-Feld der Karte an seinen Platz in der Kundenkarte der Detailseite und wächst dabei; der Rest blendet über. Zurück fliegt es in die Karte.
Ansehen: Referenzen · Startseite – Chrome/Edge 126+, Safari 18.2+; Firefox wechselt normal
Quelle: Allgemeines: Cross-Document View Transitions · Allgemeines: Container Transform · Chrome: Cross-document view transitions
6. Kundenkarte setzt sich ein
Beim Laden gleitet die Karte neben dem Titel aus 18 px und −1,5° in ihre Lage und rastet mit leichter Feder ein; danach stecken sich die Schwerpunkt-Pillen nacheinander ein. Sie startet erst, wenn Poppins geladen ist (spätestens nach 0,7 s), damit ein neuer Titelumbruch sie nicht mitten im Einrasten verschiebt. Nur transform, nichts blitzt auf.
Ansehen: BKW · Helvetia · Über MINT · Business Analyse – beim Laden der Seite
Quelle: Allgemeines: Motion – Federn · Allgemeines: Auftritt beim Scrollen
7. Abschnittstitel steigt aus der Fuge
Titel der Abschnitte heben sich aus einer unsichtbaren Fuge: Die Maske öffnet in Lesereihenfolge von oben, der Text steigt 0,25 em, der Einleitungssatz folgt. Blöcke statt Buchstaben; nicht bei Titeln mit Wortfüllung (Idee 8) und nicht in den Rechtstexten.
Ansehen: Über MINT · Technologie · Referenzen – alle Unterseiten ausser Impressum und Datenschutz
Quelle: Chrome: Scroll-triggered animations · Adrian Roselli: Don’t split words into letters
8. Zweiton-Satz wird beim Lesen deutlich
Der graue Nachsatz der Zwischentitel steht zuerst blasser und wird Wort für Wort zu seinem Grau, während der Satz ins Bild läuft; einmal gelesen, bleibt er so. Nur Deckkraft; der Screenreader liest den Satz unzerteilt.
Ansehen: Startseite · Dienstleistungen – Chrome/Safari 26; Firefox zeigt den Endzustand
Quelle: Allgemeines: Scroll-Textfüllung · Chrome: Scroll-driven animations
9. Kacheln rasten ins Raster ein
Jede Kachel kommt leicht schief (±1°) und 26 px tiefer und rastet mit Feder auf ihr Rasterfeld, 60 ms Versatz pro Spalte, Zeilen gemeinsam.
Ansehen: Dienstleistungen · Über MINT · Insights · Technologie
Quelle: Allgemeines: Auftritt beim Scrollen · Allgemeines: Stagger-Timing
10. Licht wandert über das Kachelraster
Ein weiches Licht folgt dem Zeiger über das ganze Raster und erscheint nur innerhalb der Kacheln; wo es eine Kachel berührt, leuchtet ihre Kante. So liest sich das Raster als ein zusammengesetztes Ganzes.
Ansehen: Dienstleistungen · Technologie – Desktop mit Maus; in der empfohlenen Auswahl aus
Quelle: Allgemeines: Spotlight-Karten · Allgemeines: Glanzlicht folgt dem Zeiger · Cruip: Spotlight card
11. Linie läuft in den Pfeil
Beim Überfahren läuft unter «Projekt ansehen», «Alle Beiträge» usw. eine Linie ein und endet im Pfeilschaft. Textlinks im Fliesstext (Kontakt, Impressum, Datenschutz) schliessen ihren Unterstrich von beiden Seiten zur Mitte.
Ansehen: Referenzen · Kontakt · Impressum – Maus oder Tastatur-Fokus
Quelle: Allgemeines: Verweis · Temani Afif: Underline-Animationen
12. Druck federt nach
Beim Antippen gibt eine Fläche etwas deutlicher nach als bisher und kehrt beim Loslassen weich in rund 0,7 s zurück, statt in 0,2 s zurückzuschnellen; alle übrigen Übergänge bleiben wie in der Passform. Gilt jetzt auch für Kacheln, Branchen-Knöpfe, Reiter und die Einträge der Dropdown-Menüs – am Handy die spürbare Rückmeldung. Die Handy-Menüs bleiben unberührt.
Ansehen: Startseite · Dienstleistungen – drücken und loslassen
Quelle: Allgemeines: Squash und Stretch · Allgemeines: Motion – Federn · Emil Kowalski: Great animations
13. Füllung ab Zeiger
Bei den hellen und weissen Knöpfen wächst die Farbe genau dort, wo der Zeiger hineinkommt, und zieht sich beim Verlassen zum Austrittspunkt zurück.
Ansehen: Startseite · Über MINT · Dienstleistungen – Maus
Quelle: Allgemeines: Knopf (Füllung ab Zeiger) · Allgemeines: Ursprungsbewusste Animation
14. Fläche kommt aus der Richtung des Zeigers
Beim Überfahren schiebt sich eine helle Fläche von der Kante herein, über die der Zeiger kam, und verlässt die Zeile Richtung Austritt – wie ein Schieber in seiner Führung.
Ansehen: Startseite · Prozessmanagement – Maus, von oben oder unten in eine Zeile fahren
Quelle: Allgemeines: Liste · Allgemeines: Ursprungsbewusste Animation
15. Logo-Band folgt dem Scroll
Das Kundenband läuft wie bisher, beschleunigt aber kurz mit dem Scrolltempo (bis 4×), läuft beim Hochscrollen rückwärts und klingt dann weich auf sein Grundtempo aus.
Ansehen: Startseite – schnell scrollen
Quelle: Allgemeines: Laufband mit Richtungswechsel · MDN: updatePlaybackRate
16. Leuchtstift unter das Ergebnis
Kommt eine Phasenkarte ins Bild oder wird eine Phase gewählt, zieht ein Mint-Marker einmal unter dem Ergebnissatz durch, Zeile für Zeile in Leserichtung.
Ansehen: Startseite · Prozessmanagement – PM: Phasen wechseln
17. Markenfeld öffnet sich aus der Maske
Das farbige Logo-Feld der Referenzen ist beim Hereinscrollen auf ein gerundetes Fenster beschnitten und öffnet sich bis an die Kartenkanten; das Logo bleibt ruhig. Läuft beim Zurückscrollen rückwärts.
Ansehen: Startseite · Referenzen · Branchen – Chrome/Safari 26; Firefox zeigt den Endzustand
Quelle: Allgemeines: Bild-Maskenöffnung
18. Prozesslandkarte: Pfeile greifen ineinander
Der mittlere Kernprozess erscheint zuerst, dann gleiten die beiden äusseren Pfeile waagrecht heran, bis Spitze und Kerbe ineinandergreifen; erst dann wird «Leistung erbringen» Mint, Führung und Unterstützung schieben sich von oben und unten an.
Ansehen: Prozessmanagement
Quelle: Josh Comeau: linear() timing
19. Nummern rasten ein, wenn die Linie ankommt
Die Ablauflinie fährt Segment für Segment; jede Nummer springt genau beim Eintreffen der Linie kurz auf (nach einem winzigen Halt) und sendet einen Mint-Ring aus.
Ansehen: Technologie · BKW · Kontakt
Quelle: Allgemeines: Hit-Stop · Allgemeines: Zeitleiste
20. Haken setzen sich nacheinander
Kommt eine Themenliste ins Bild, springen die Mint-Kreise der Reihe nach auf und die Haken zeichnen sich darin.
Ansehen: Branchen
Quelle: Allgemeines: Häkchen · CSS-Tricks: SVG line animation
21. Sprungmarke mit Ankunft
Nach dem Sprung zu einer Branche leuchtet ihre Pille einmal auf und vor dem Titel erscheint kurz ein Mint-Strich – auch bei Ankunft über die Branchen-Knöpfe der Startseite.
Ansehen: Branchen #banken · Branchen #verwaltung – Reiter oben auf der Branchen-Seite antippen
Quelle: Allgemeines: Sprungmarken · Allgemeines: Anker-Offset unter fixem Header
22. Logos legen sich in ihre Mulden
Zuerst stehen acht gestrichelte Mulden da, die Logo-Felder liegen als leicht verdrehter Stapel in der Mitte und werden nacheinander in genau ihr Fach gelegt.
Ansehen: Referenzen
Quelle: Allgemeines: Haufen entfalten
23. Projektfoto weitet sich beim Scrollen
Das breite Projektfoto beginnt als schmaleres, stärker gerundetes Fenster und weitet sich mit dem Scrollen auf die volle Breite; das Bild geht dabei von 1,1 auf 1 wie eine Kamera, die einrastet.
Ansehen: BKW · Zuger Kantonalbank – Chrome/Safari 26
Quelle: Allgemeines: Bild-Maskenöffnung · Bramus: Image Reveal
24. Zitat wird Wort für Wort hell, der Ring schliesst sich
Im dunklen Band ist das Kundenzitat zuerst gedämpft und wird im Lesetempo Wort für Wort hell, spätestens wenn der Kasten ganz im Bild steht; danach bleibt es hell. Gleichzeitig schliesst sich ein Mint-Ring um das Porträt, Name und Funktion gleiten nach. Der Wortlaut bleibt unverändert.
Ansehen: BKW · Helvetia · Zuger Kantonalbank
Quelle: Allgemeines: Scroll-Textfüllung · Allgemeines: Zitat mit Anführungszeichen
25. Porträts treten in den Rahmen
Die Teamfotos steigen beim Hereinscrollen innerhalb ihres festen Rahmens und gehen von 1,08 auf 1; der Rahmen bleibt stehen. Beim Überfahren rückt das Foto leicht heran.
Ansehen: Über MINT
Quelle: Allgemeines: Parallaxe in Ebenen · Allgemeines: Team-Karte
26. Feld zeigt, wenn es passt
Sobald ein Pflichtfeld gültig ist, setzt sich rechts darin ein kleiner Mint-Haken (Lob sofort). Fehler erscheinen erst nach dem Verlassen eines Felds oder beim Absenden und gleiten herein (Tadel spät).
Ansehen: Kontakt – Formular ausfüllen
Quelle: Allgemeines: Eingabefeld · Allgemeines: Reward early, punish late · MDN: :user-valid
27. Knopf wird zum Haken
Nach gültigem Absenden zieht sich die Pille zum Kreis mit drehendem Ring zusammen, wird Mint mit gezeichnetem Haken, und die Bestätigung wächst kreisförmig aus der Stelle des Knopfs. Gesendet wird weiterhin nichts.
Ansehen: Kontakt – Formular gültig ausfüllen und «Anfrage senden»
Quelle: Allgemeines: Bestätigungsknopf · Allgemeines: Ursprungsbewusste Animation
28. Lesemarke im Inhaltsverzeichnis
In der Datenschutzerklärung sitzt neben dem Kapitel, das gerade gelesen wird, eine schmale Mint-Marke; beim Weiterlesen gleitet sie mit Feder zum nächsten Eintrag. Der Eintrag ist als aktuelle Stelle ausgezeichnet.
Ansehen: Datenschutz – Desktop: Verzeichnis klebt links
Quelle: ICS MEDIA: scroll-target-group · Una Kravets: Follow the anchor
29. Licht folgt im dunklen Aufruf
Im dunklen Kontakt-Aufruf folgt eine Mint-Wolke dem Zeiger mit Feder und gleitet beim Verlassen an ihren Ruheplatz zurück. Am Handy wandert sie stattdessen leise mit dem Scrollen.
Ansehen: Dienstleistungen · Startseite – in der empfohlenen Auswahl aus
30. Fusszeile fügt sich beim Erreichen
Am Seitenende steigen die vier Spalten gestaffelt in ihre Lage, die Trennlinie zieht sich von der Mitte nach aussen, und das Logo spielt einmal seinen Schnitt durch das «I». Die Unterstriche der Fusslinks wachsen aus der Richtung des Zeigers.
Ansehen: Impressum · Kontakt – ganz nach unten scrollen
Quelle: Chrome: Scroll-triggered animations · Allgemeines: Ursprungsbewusste Animation
31. Navigations-Pille zieht zum Ziel
Die helle Pille hinter «Dienstleistungen», «Branchen» und «MINT» gleitet schon in der Passform mit. Neu zieht beim Wechsel die Kante in Laufrichtung voraus und die hintere folgt nach: Die Pille dehnt sich kurz zum nächsten Menüpunkt und setzt sich dort – beim Überfahren, beim Wechsel zwischen offenen Menüs und mit der Tastatur. Kein neues Element, nur die vorhandene Pille.
Ansehen: Startseite · Dienstleistungen – Desktop ab 901 px: mit Maus oder Tab zwischen den Menüpunkten wechseln
Quelle: Allgemeines: Navigations-Pille · Allgemeines: Objektkonstanz · Codeshack: Sliding Tab Indicator
Geprüft und nicht umgesetzt.
- Magnet am Hauptknopf – Pascal hat die magnetischen Knöpfe in «neu» entfernt (UEBERGABE, 11.10.).
- Referenzkarten neigen sich zum Zeiger – Kein 3D-Neigen (Pascal, 11.10.).
- Seitenkopf baut sich in Lesereihenfolge auf – Kein Text-Reveal im ersten Bildschirm (Layer-Pflicht) und besser für den grössten sichtbaren Inhalt (LCP).
- Ziffern-Walze / Kennzahl stellt scharf – Kennzahlen bleiben ruhig; die Walze gehört dem Einstiegstitel.
- Seite hebt sich von der Fusszeile – Bräuchte einen eigenen Seitengrund samt Punkt-Raster; zu viel Eingriff für die Skizze.
- Zeiger-Bubble «Projekt ansehen» – Ein zweiter Zeiger neben dem Systemzeiger; Pascal fand Zeiger-Spielereien fragwürdig.
- Laufweite schliesst sich (Buchstaben) – Titel würden in Buchstaben zerlegt; Titel bleiben ganz (Roselli 2026), es gibt schon die Walze im Einstieg.
- Gewählter Titel wird zur Brotkrume – Mehrzeiliger Text kann keinen view-transition-name tragen, der Übergang würde abgebrochen.
- Brotkrumen wandern in die Kopfleiste / Rubrik-Marke – Im Kopf «Mitte» fehlt zwischen Logo und Navigation der Platz; eine Marke wäre ein neues Gestaltungselement.
- Handy: Referenzkarten stapeln sich; Branchen: Kundenkarte bleibt stehen – Kleben (sticky) ändert den Seitenaufbau und stört die Rhythmus-Messung.
- Zyklus-Reiter mit gleitender Platte – Griffe in die Reiter-Logik von stripe.js ein, die unverändert bleiben muss.
- Prozessmodell: Weg bis zur Aufgabe leuchtet – Überlagert den laufenden Probelauf-Lichtpunkt der BPMN-Grafik.
- Tastaturfokus gleitet / Feldrahmen aus Ecken – Der Fokus muss sofort vollständig sichtbar sein.
- Kennzahlen setzen auf eine Grundlinie – Die Startseite trägt schon viele Bewegungen; die Kennzahlen bleiben ruhig.
- Leuchtstift auf den Referenzkarten – Markierte jeden Ergebnissatz im ohnehin hinterlegten Kasten und las sich wie eine Link-Unterstreichung (Design-Kritik); bleibt bei den Phasen.
- Kapitel der Rechtstexte aus der Fuge – In Impressum und Datenschutz zählt sofortige Orientierung, auch nach einem Sprung aus dem Inhaltsverzeichnis (Design-Kritik).