[{"data":1,"prerenderedAt":98},["ShallowReactive",2],{"blog-en-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\u002Fen\u002Fscrollytelling-and-motion.md","Scrollytelling: stories that unfold",{"type":7,"value":8,"toc":76},"minimark",[9,13,18,21,27,30,34,37,40,73],[10,11,12],"p",{},"Scrolling is the most natural gesture on the web. That's exactly why I love scrollytelling so\nmuch: it takes something everyone already does and turns it into the rhythm of a story. When\nit's done well, scrolling doesn't feel like navigation — it feels like turning a page.",[14,15,17],"h2",{"id":16},"motion-belongs-to-the-content","Motion belongs to the content",[10,19,20],{},"The most common mistake is to start with the animation. I start with the story. Only once I know\nwhat needs to be said, and in what order, do I ask which motion supports it. A diagram that\nbuilds up layer by layer as you scroll explains itself. A passage of text that slowly reveals an\nimage guides the eye exactly where it should go.",[22,23,24],"blockquote",{},[10,25,26],{},"Animation that tells you nothing is decoration. Animation that tells you something is language.",[10,28,29],{},"Motion should answer a question the content is raising right now — not one that distracts from\nit. The moment the effect is louder than the point, I've reached too far.",[14,31,33],{"id":32},"rhythm-and-restraint","Rhythm and restraint",[10,35,36],{},"A good scroll narrative lives on pacing. It needs quiet stretches where nothing happens, so the\nmoving moments carry weight. I think of it like music: the rests are part of the composition.",[10,38,39],{},"Technically, a little discipline keeps me honest:",[41,42,43,51,57,67],"ul",{},[44,45,46,50],"li",{},[47,48,49],"strong",{},"Tie to scroll progress, not to time"," — that keeps the person in control",[44,52,53,56],{},[47,54,55],{},"Be sparing with simultaneous motion"," — one thing at a time reads more clearly",[44,58,59,66],{},[47,60,61,62],{},"Respect ",[63,64,65],"code",{},"prefers-reduced-motion"," — the story must work without animation too",[44,68,69,72],{},[47,70,71],{},"Stay reversible on scroll-up",", so nothing feels broken",[10,74,75],{},"In the end, scrollytelling is a matter of attitude for me: I trust that less motion, but the\nright motion, moves people more. The most elegant projects are the ones where, afterwards,\nnobody talks about the animation — they talk about what they understood.",{"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","How scroll-driven storytelling ties motion to content — through pacing, restraint, and the courage to occasionally stand still.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Fscrollytelling-and-motion",{"title":5,"description":84},"blog\u002Fen\u002Fscrollytelling-and-motion",[94,95,96],"Motion","Design","UX","DioTvmlNARZhGLDu5amP9SNdx8kNTBLuEODPrL-Ukbk",1781691288300]