[{"data":1,"prerenderedAt":98},["ShallowReactive",2],{"blog-de-scrollytelling-and-motion":3},{"id":4,"title":5,"body":6,"cover":82,"date":83,"description":84,"draft":85,"extension":86,"locale":87,"meta":88,"navigation":89,"path":90,"seo":91,"stem":92,"tags":93,"__hash__":97},"blog\u002Fblog\u002Fde\u002Fscrollytelling-and-motion.md","Scrollytelling: Geschichten, die sich entfalten",{"type":7,"value":8,"toc":76},"minimark",[9,13,18,21,27,30,34,37,40,73],[10,11,12],"p",{},"Scrollen ist die natürlichste Geste im Web. Genau deshalb mag ich Scrollytelling so sehr: Es\nnimmt etwas, das ohnehin jede:r tut, und macht daraus den Takt einer Geschichte. Wenn es gut\ngemacht ist, fühlt sich Scrollen nicht wie Navigation an, sondern wie Umblättern.",[14,15,17],"h2",{"id":16},"bewegung-gehört-dem-inhalt","Bewegung gehört dem Inhalt",[10,19,20],{},"Der häufigste Fehler ist, mit Animation anzufangen. Ich fange mit der Geschichte an. Erst wenn\nich weiß, was gesagt werden soll und in welcher Reihenfolge, frage ich, welche Bewegung das\nunterstützt. Eine Grafik, die beim Scrollen Schicht für Schicht aufbaut, erklärt von selbst.\nEin Text, der ein Bild langsam freigibt, lenkt den Blick genau dorthin, wo er hingehört.",[22,23,24],"blockquote",{},[10,25,26],{},"Animation, die nichts erzählt, ist Dekoration. Animation, die etwas erzählt, ist Sprache.",[10,28,29],{},"Bewegung sollte eine Frage beantworten, die der Inhalt gerade aufwirft — nicht eine, die ihn\nablenkt. Sobald der Effekt lauter ist als die Aussage, habe ich zu viel gewollt.",[14,31,33],{"id":32},"rhythmus-und-zurückhaltung","Rhythmus und Zurückhaltung",[10,35,36],{},"Eine gute Scroll-Erzählung lebt vom Tempo. Es braucht ruhige Passagen, in denen nichts\npassiert, damit die bewegten Momente Gewicht bekommen. Ich denke das wie Musik: Pausen sind\nTeil der Komposition.",[10,38,39],{},"Technisch hilft mir dabei ein paar Disziplin:",[41,42,43,51,57,67],"ul",{},[44,45,46,50],"li",{},[47,48,49],"strong",{},"An den Scroll-Fortschritt binden, nicht an Zeit"," — so behält der Mensch die Kontrolle",[44,52,53,56],{},[47,54,55],{},"Sparsam mit gleichzeitiger Bewegung"," — eine Sache zur Zeit liest sich klarer",[44,58,59,66],{},[47,60,61,65],{},[62,63,64],"code",{},"prefers-reduced-motion"," respektieren"," — die Geschichte muss auch ohne Animation funktionieren",[44,68,69,72],{},[47,70,71],{},"Beim Zurückscrollen umkehrbar bleiben",", damit nichts kaputt wirkt",[10,74,75],{},"Am Ende ist Scrollytelling für mich eine Frage der Haltung: Ich vertraue darauf, dass weniger\nBewegung, dafür die richtige, mehr bewegt. Die elegantesten Projekte sind die, bei denen am\nSchluss niemand über die Animation spricht — sondern über das, was sie verstanden haben.",{"title":77,"searchDepth":78,"depth":78,"links":79},"",2,[80,81],{"id":16,"depth":78,"text":17},{"id":32,"depth":78,"text":33},null,"2021-09-01","Wie scrollgesteuertes Erzählen Bewegung an Inhalt bindet — mit Rhythmus, Zurückhaltung und dem Mut, auch mal stillzustehen.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fscrollytelling-and-motion",{"title":5,"description":84},"blog\u002Fde\u002Fscrollytelling-and-motion",[94,95,96],"Motion","Design","UX","xkd703EAA5weoRmDIQJEUcBX-eHjA8XWZalqvFw-7xw",1781691287079]