[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"sanity-mW5qoc2tXNpo2zZrHIRFOuFa0sX4xS-rdPPadYw-CMc":3,"sanity-qNi_2HmG8RQeMCmZYzxUoFGVwQY8h86iKKb8uRQWf1A":777},{"data":4,"sourceMap":-1},{"latestPodcast":5,"latestReleases":14,"post":39,"recent":752},[6],{"_id":7,"publishedAt":8,"slug":9,"sponsored":12,"title":13},"50f4509c-4f55-4f11-8adc-5556e821ea77","2026-06-30T07:40:00.000Z",{"_type":10,"current":11},"slug","why-intent-prediction-needs-more-than-an-llm",null,"Why intent prediction needs more than an LLM",[15,21,27,33],{"_id":16,"publishedAt":17,"slug":18,"title":20},"eb5b66eb-9410-4329-83bb-22bbff39402a","2026-04-28T13:00:00.000Z",{"_type":10,"current":19},"turn-scattered-knowledge-into-trusted-intelligence","Turning scattered knowledge into trusted intelligence: Stack Internal 2026.3",{"_id":22,"publishedAt":23,"slug":24,"title":26},"369c2401-b62e-4a37-8ff8-bf603023ecad","2026-03-02T15:03:00.988Z",{"_type":10,"current":25},"what-s-new-at-stack-overflow-march-2026","What’s new at Stack Overflow: March 2026",{"_id":28,"publishedAt":29,"slug":30,"title":32},"5e9053a4-07ea-447c-91ea-29e0b6228537","2026-02-02T15:00:00.000Z",{"_type":10,"current":31},"what-s-new-at-stack-overflow-february-2026","What’s new at Stack Overflow: February 2026",{"_id":34,"publishedAt":35,"slug":36,"title":38},"a1b538eb-a8a6-46d0-80a1-ac70ec9bb935","2026-01-05T10:00:00.000-05:00",{"_type":10,"current":37},"what-s-new-at-stack-overflow-january-2026","What’s new at Stack Overflow: January 2026",{"_createdAt":40,"_id":41,"_rev":42,"_type":43,"_updatedAt":44,"author":45,"body":61,"comments":709,"dateUrl":710,"excerpt":711,"image":712,"legacyBody":715,"product":12,"publishedAt":718,"slug":719,"sponsored":12,"tags":721,"title":751,"visible":709},"2023-05-25T09:39:13Z","wp-post-14747","dgl3SCUzppW3U2LvCpu2sO","blogPost","2023-08-30T11:19:10Z",[46],{"_createdAt":47,"_id":48,"_rev":49,"_type":50,"_updatedAt":51,"avatar":52,"employee":57,"name":58,"slug":59},"2023-05-23T16:27:18Z","wp-author-259","dgl3SCUzppW3U2LvCoP35A","blogAuthor","2023-06-20T15:05:08Z",{"_type":53,"asset":54},"image",{"_ref":55,"_type":56},"image-231ef12e1df977904aed454c6251dca1b541297b-1024x1024-jpg","reference","none","Emma Bostian",{"current":60},"ebostian",[62,73,90,98,106,115,134,142,150,158,166,174,182,190,203,214,225,233,241,249,258,298,306,314,332,340,348,356,364,375,386,397,405,413,420,431,442,450,458,475,483,491,505,513,524,535,543,551,559,567,575,583,591,599,607,615,623,632,640,648,655,663,670,678,685,693,701],{"_key":63,"_type":64,"children":65,"markDefs":71,"style":72},"371eda85f24e","block",[66],{"_key":67,"_type":68,"marks":69,"text":70},"371eda85f24e0","span",[],"How often have you looked at the application you just built and thought to yourself “I really wish I knew how to add animations”?",[],"normal",{"_key":74,"_type":64,"children":75,"markDefs":89,"style":72},"0978d0374a1f",[76,80,85],{"_key":77,"_type":68,"marks":78,"text":79},"0978d0374a1f0",[],"I had this thought for a long time. I would build something really great, yet the interactions were minimal at best (the most I could do is a ",{"_key":81,"_type":68,"marks":82,"text":84},"0978d0374a1f1",[83],"code","transition: background .1s linear",{"_key":86,"_type":68,"marks":87,"text":88},"0978d0374a1f2",[],"), yet I always wanted more.\n",[],{"_key":91,"_type":64,"children":92,"markDefs":97,"style":72},"f1c8c0e6330a",[93],{"_key":94,"_type":68,"marks":95,"text":96},"f1c8c0e6330a0",[],"Animations not only take your application from good to exceptional, they’re often expected by users. But animations don’t just make your application look and feel nicer, they can be a useful tool for improving perceived performance, giving users updates on the status of a task, and guiding a user through your application.\n",[],{"_key":99,"_type":64,"children":100,"markDefs":105,"style":72},"b1a9772cf1e0",[101],{"_key":102,"_type":68,"marks":103,"text":104},"b1a9772cf1e00",[],"In this series, we’ll examine how to take your application from ordinary to exceptional by implementing micro-interactions with react-spring so you won’t be stuck thinking “I really wish I knew how to add animations” any more.\n",[],{"_key":107,"_type":64,"children":108,"markDefs":113,"style":114},"4ba9d6d09602",[109],{"_key":110,"_type":68,"marks":111,"text":112},"4ba9d6d096020",[],"react-spring",[],"h1",{"_key":116,"_type":64,"children":117,"markDefs":130,"style":72},"eaa81dfcc8af",[118,122,126],{"_key":119,"_type":68,"marks":120,"text":121},"eaa81dfcc8af0",[],"For this series of tutorials, we’ll be learning ",{"_key":123,"_type":68,"marks":124,"text":112},"eaa81dfcc8af1",[125],"d218f0552b14",{"_key":127,"_type":68,"marks":128,"text":129},"eaa81dfcc8af2",[],".",[131],{"_key":125,"_type":132,"href":133,"reference":12},"link","https://www.react-spring.io/",{"_key":135,"_type":64,"children":136,"markDefs":141,"style":72},"60c6fef6e97d",[137],{"_key":138,"_type":68,"marks":139,"text":140},"60c6fef6e97d0",[],"react-spring is a hooks-based animation library, but what differentiates it from its competition is the fact that it’s also a physics-based library.\n",[],{"_key":143,"_type":64,"children":144,"markDefs":149,"style":72},"986b753649a5",[145],{"_key":146,"_type":68,"marks":147,"text":148},"986b753649a50",[],"Typically we use CSS animation libraries with transition timing functions and bezier curves to animate elements in the UI. However, it’s truly difficult to make elements transition in a natural manner. Elements in real life don’t transition linearly through different states, and your UI elements shouldn’t either.\n",[],{"_key":151,"_type":64,"children":152,"markDefs":157,"style":72},"3f59e63afde1",[153],{"_key":154,"_type":68,"marks":155,"text":156},"3f59e63afde10",[],"Enter react-spring.\n",[],{"_key":159,"_type":64,"children":160,"markDefs":165,"style":72},"aeda0e6a4ad3",[161],{"_key":162,"_type":68,"marks":163,"text":164},"aeda0e6a4ad30",[],"We’ll learn more about this amazing technology in the second and third installments of the blog series, but if you don’t know React or haven’t worked with Hooks I would recommend taking an introductory course first.\n",[],{"_key":167,"_type":64,"children":168,"markDefs":173,"style":114},"734d6a6b4e33",[169],{"_key":170,"_type":68,"marks":171,"text":172},"734d6a6b4e330",[],"What are micro-interactions?",[],{"_key":175,"_type":64,"children":176,"markDefs":181,"style":72},"d6ded614249f",[177],{"_key":178,"_type":68,"marks":179,"text":180},"d6ded614249f0",[],"Micro-interactions are small animations whose purpose is to delight the user by providing feedback in regards to a task or inform the user about the status of a process or task.\n",[],{"_key":183,"_type":64,"children":184,"markDefs":189,"style":72},"519f25bbf8bb",[185],{"_key":186,"_type":68,"marks":187,"text":188},"519f25bbf8bb0",[],"Here are a few examples of micro-interactions:",[],{"_key":191,"_type":64,"children":192,"level":198,"listItem":199,"markDefs":200,"style":72},"f93a55d54f62",[193],{"_key":194,"_type":68,"marks":195,"text":197},"f93a55d54f620",[196],"a504ddd810e0","Dribbble buttons",1,"bullet",[201],{"_key":196,"_type":132,"href":202,"reference":12},"https://dribbble.com/shots/7299868-Download-Buttons",{"_key":204,"_type":64,"children":205,"level":198,"listItem":199,"markDefs":211,"style":72},"251e93882a61",[206],{"_key":207,"_type":68,"marks":208,"text":210},"251e93882a610",[209],"8f4e01e97a72","Mobile app onboarding",[212],{"_key":209,"_type":132,"href":213,"reference":12},"https://dribbble.com/shots/6833910-Mobile-App-Onboarding",{"_key":215,"_type":64,"children":216,"level":198,"listItem":199,"markDefs":222,"style":72},"91ebf4857031",[217],{"_key":218,"_type":68,"marks":219,"text":221},"91ebf48570310",[220],"ee7a948e5d98","Activate button",[223],{"_key":220,"_type":132,"href":224,"reference":12},"https://dribbble.com/shots/5709751-Activate-Button",{"_key":226,"_type":64,"children":227,"markDefs":232,"style":72},"aaf839a7a059",[228],{"_key":229,"_type":68,"marks":230,"text":231},"aaf839a7a0590",[],"By incorporating micro-interactions we will take our applications from ordinary to exceptional. We can think of the structure of your application—the HTML—as the body, the CSS as the physical appearance, and animations as the body language.\n",[],{"_key":234,"_type":64,"children":235,"markDefs":240,"style":114},"52f900ae218e",[236],{"_key":237,"_type":68,"marks":238,"text":239},"52f900ae218e0",[],"Why use micro-interactions?",[],{"_key":242,"_type":64,"children":243,"markDefs":248,"style":72},"0cf9a8d2e3ef",[244],{"_key":245,"_type":68,"marks":246,"text":247},"0cf9a8d2e3ef0",[],"Here are a few reasons why you should use micro-interactions throughout your application.\n",[],{"_key":250,"_type":64,"children":251,"markDefs":256,"style":257},"7efb8d7474ff",[252],{"_key":253,"_type":68,"marks":254,"text":255},"7efb8d7474ff0",[],"Enhancing perceived performance",[],"h2",{"_key":259,"_type":64,"children":260,"markDefs":295,"style":72},"c91928d6ab8d",[261,266,271,275,279,283,287,291],{"_key":262,"_type":68,"marks":263,"text":265},"c91928d6ab8d0",[264],"bf35d223b82d","“There are two kinds of time: ",{"_key":267,"_type":68,"marks":268,"text":270},"c91928d6ab8d1",[264,269],"em","clock time",{"_key":272,"_type":68,"marks":273,"text":274},"c91928d6ab8d2",[264]," and ",{"_key":276,"_type":68,"marks":277,"text":278},"c91928d6ab8d3",[264,269],"brain time",{"_key":280,"_type":68,"marks":281,"text":282},"c91928d6ab8d4",[264],". The former is the objective measure of time; the latter is how a person ",{"_key":284,"_type":68,"marks":285,"text":286},"c91928d6ab8d5",[264,269],"perceives",{"_key":288,"_type":68,"marks":289,"text":290},"c91928d6ab8d6",[264]," time.”",{"_key":292,"_type":68,"marks":293,"text":294},"c91928d6ab8d7",[],"\n",[296],{"_key":264,"_type":132,"href":297,"reference":12},"https://blog.marvelapp.com/a-designers-guide-to-perceived-performance/",{"_key":299,"_type":64,"children":300,"markDefs":305,"style":72},"1b7d74a790f4",[301],{"_key":302,"_type":68,"marks":303,"text":304},"1b7d74a790f40",[],"Adding micro-interactions, such as a custom progress bar or an animated setup dialog which guides the user through a process, can change the way users perceive the time it takes to complete a task.\n",[],{"_key":307,"_type":64,"children":308,"markDefs":313,"style":72},"c12579c07aea",[309],{"_key":310,"_type":68,"marks":311,"text":312},"c12579c07aea0",[],"We can alter our user's sense of time with animations and this can work in our favor if our performance budget needs some refactoring.\n",[],{"_key":315,"_type":64,"children":316,"markDefs":329,"style":72},"99b0892969a2",[317,321,326],{"_key":318,"_type":68,"marks":319,"text":320},"99b0892969a20",[],"Example: ",{"_key":322,"_type":68,"marks":323,"text":325},"99b0892969a21",[324],"07b1070bfa1c","Form Entry",{"_key":327,"_type":68,"marks":328,"text":294},"99b0892969a22",[],[330],{"_key":324,"_type":132,"href":331,"reference":12},"https://dribbble.com/shots/3982257-Neo-Kids-Onboarding-Concept",{"_key":333,"_type":64,"children":334,"markDefs":339,"style":257},"704959a5ec9b",[335],{"_key":336,"_type":68,"marks":337,"text":338},"704959a5ec9b0",[],"Inform users about the status of a task",[],{"_key":341,"_type":64,"children":342,"markDefs":347,"style":72},"da5d0f76a62a",[343],{"_key":344,"_type":68,"marks":345,"text":346},"da5d0f76a62a0",[],"As a user’s request is processing or as their data is loading, we can use a micro-interaction to inform them of its status.\n",[],{"_key":349,"_type":64,"children":350,"markDefs":355,"style":72},"3c104f882b25",[351],{"_key":352,"_type":68,"marks":353,"text":354},"3c104f882b250",[],"Custom progress bars are a great way to keep your users from getting frustrated and will stretch the amount of time they’re willing to wait for a process to finish.\n",[],{"_key":357,"_type":64,"children":358,"markDefs":363,"style":72},"7ace6fdc3388",[359],{"_key":360,"_type":68,"marks":361,"text":362},"7ace6fdc33880",[],"Examples:",[],{"_key":365,"_type":64,"children":366,"level":198,"listItem":199,"markDefs":372,"style":72},"a11034784857",[367],{"_key":368,"_type":68,"marks":369,"text":371},"a110347848570",[370],"95679a4afc72","Avocado Loader",[373],{"_key":370,"_type":132,"href":374,"reference":12},"https://dribbble.com/shots/7184429-Avocado-loader-interaction",{"_key":376,"_type":64,"children":377,"level":198,"listItem":199,"markDefs":383,"style":72},"18253dbda2b8",[378],{"_key":379,"_type":68,"marks":380,"text":382},"18253dbda2b80",[381],"19d91dec6b23","Book Loader",[384],{"_key":381,"_type":132,"href":385,"reference":12},"https://dribbble.com/shots/7199149-Book-Loader",{"_key":387,"_type":64,"children":388,"level":198,"listItem":199,"markDefs":394,"style":72},"80695d2b84e0",[389],{"_key":390,"_type":68,"marks":391,"text":393},"80695d2b84e00",[392],"8d30e0d29a63","Progress Bar",[395],{"_key":392,"_type":132,"href":396,"reference":12},"https://dribbble.com/shots/5334120-Progress-Bar-Animation-UX-Concept",{"_key":398,"_type":64,"children":399,"markDefs":404,"style":257},"91122f5dee3d",[400],{"_key":401,"_type":68,"marks":402,"text":403},"91122f5dee3d0",[],"Illustrate a state change",[],{"_key":406,"_type":64,"children":407,"markDefs":412,"style":72},"a7fb952bf3f5",[408],{"_key":409,"_type":68,"marks":410,"text":411},"a7fb952bf3f50",[],"If a user is filling out a form and incorrectly enters their password, we can use micro-interactions to illustrate that this form needs to be fixed prior to submission.",[],{"_key":414,"_type":64,"children":415,"markDefs":419,"style":72},"a5b5337c7837",[416],{"_key":417,"_type":68,"marks":418,"text":362},"a5b5337c78370",[],[],{"_key":421,"_type":64,"children":422,"level":198,"listItem":199,"markDefs":428,"style":72},"440def20eb66",[423],{"_key":424,"_type":68,"marks":425,"text":427},"440def20eb660",[426],"829241218054","Form Error",[429],{"_key":426,"_type":132,"href":430,"reference":12},"https://dribbble.com/shots/4908813-Invalid-Email-Error",{"_key":432,"_type":64,"children":433,"level":198,"listItem":199,"markDefs":439,"style":72},"448fe2e9948b",[434],{"_key":435,"_type":68,"marks":436,"text":438},"448fe2e9948b0",[437],"01f78f67be95","Password Incorrect",[440],{"_key":437,"_type":132,"href":441,"reference":12},"https://dribbble.com/shots/5310205-Password-error-animation-2",{"_key":443,"_type":64,"children":444,"markDefs":449,"style":257},"475b5b82e673",[445],{"_key":446,"_type":68,"marks":447,"text":448},"475b5b82e6730",[],"Draw a user’s attention to something",[],{"_key":451,"_type":64,"children":452,"markDefs":457,"style":72},"d7a19e3c9f93",[453],{"_key":454,"_type":68,"marks":455,"text":456},"d7a19e3c9f930",[],"Using micro-interactions to capture a user’s attention and indicate that there is something of importance is a useful tool for onboarding or to indicate someone is typing.\n",[],{"_key":459,"_type":64,"children":460,"markDefs":472,"style":72},"e0f23c5dbb1e",[461,464,469],{"_key":462,"_type":68,"marks":463,"text":320},"e0f23c5dbb1e0",[],{"_key":465,"_type":68,"marks":466,"text":468},"e0f23c5dbb1e1",[467],"6f5f9362dc70","Chat",{"_key":470,"_type":68,"marks":471,"text":294},"e0f23c5dbb1e2",[],[473],{"_key":467,"_type":132,"href":474,"reference":12},"https://dribbble.com/shots/4622464-Chat",{"_key":476,"_type":64,"children":477,"markDefs":482,"style":257},"8c01f3ba83be",[478],{"_key":479,"_type":68,"marks":480,"text":481},"8c01f3ba83be0",[],"To create habits",[],{"_key":484,"_type":64,"children":485,"markDefs":490,"style":72},"242bfcdee6c8",[486],{"_key":487,"_type":68,"marks":488,"text":489},"242bfcdee6c80",[],"Social media applications are really good at getting their uses to form habits, and they do so with micro-interactions. Facebook’s like button is a prime example of this, as is Instagram’s heart animation.These small interactions delight users and keep them coming back for more.\n",[],{"_key":492,"_type":64,"children":493,"markDefs":502,"style":72},"96e86d7c0830",[494,497],{"_key":495,"_type":68,"marks":496,"text":320},"96e86d7c08300",[],{"_key":498,"_type":68,"marks":499,"text":501},"96e86d7c08301",[500],"c10aaa4c36dd","Reactions",[503],{"_key":500,"_type":132,"href":504,"reference":12},"https://dribbble.com/shots/6415659-Reactions-2-0",{"_key":506,"_type":64,"children":507,"markDefs":512,"style":72},"acf0ec1375fd",[508],{"_key":509,"_type":68,"marks":510,"text":511},"acf0ec1375fd0",[],"Further reading:",[],{"_key":514,"_type":64,"children":515,"level":198,"listItem":199,"markDefs":521,"style":72},"0e18ee0e128d",[516],{"_key":517,"_type":68,"marks":518,"text":520},"0e18ee0e128d0",[519],"ace47ab50642","Jakob Nielsen’s Heuristics",[522],{"_key":519,"_type":132,"href":523,"reference":12},"https://www.nngroup.com/articles/ten-usability-heuristics/",{"_key":525,"_type":64,"children":526,"level":198,"listItem":199,"markDefs":532,"style":72},"80f4967c1096",[527],{"_key":528,"_type":68,"marks":529,"text":531},"80f4967c10960",[530],"c4d97e7d6f8a","Disney’s 12 Principles Of Animation",[533],{"_key":530,"_type":132,"href":534,"reference":12},"https://www.creativebloq.com/advice/understand-the-12-principles-of-animation",{"_key":536,"_type":64,"children":537,"markDefs":542,"style":114},"90be35032d93",[538],{"_key":539,"_type":68,"marks":540,"text":541},"90be35032d930",[],"Do’s and don’ts",[],{"_key":544,"_type":64,"children":545,"markDefs":550,"style":72},"ae129c452378",[546],{"_key":547,"_type":68,"marks":548,"text":549},"ae129c4523780",[],"Before you build your first micro-interaction, it’s important to understand the do’s and don’ts.\n",[],{"_key":552,"_type":64,"children":553,"markDefs":558,"style":257},"e880128a1cb7",[554],{"_key":555,"_type":68,"marks":556,"text":557},"e880128a1cb70",[],"Do make your micro-interactions accessible",[],{"_key":560,"_type":64,"children":561,"markDefs":566,"style":72},"112e977f9eab",[562],{"_key":563,"_type":68,"marks":564,"text":565},"112e977f9eab0",[],"Users won’t care about the coolest micro-interaction in the world if it’s not accessible. If the interaction indicates state change, ensure that the proper HTML elements and attributes are used; otherwise, add the appropriate WAI-ARIA counterparts.\n",[],{"_key":568,"_type":64,"children":569,"markDefs":574,"style":257},"70036706cd7b",[570],{"_key":571,"_type":68,"marks":572,"text":573},"70036706cd7b0",[],"Don’t add animation to everything",[],{"_key":576,"_type":64,"children":577,"markDefs":582,"style":72},"e65409e6af89",[578],{"_key":579,"_type":68,"marks":580,"text":581},"e65409e6af890",[],"Animations draw the user’s attention, but not all information has the same level of importance.\n",[],{"_key":584,"_type":64,"children":585,"markDefs":590,"style":72},"b112bce4beae",[586],{"_key":587,"_type":68,"marks":588,"text":589},"b112bce4beae0",[],"First understand which component on the page has the most pertinent or time sensitive information or priority, and then decide what to animate.\n",[],{"_key":592,"_type":64,"children":593,"markDefs":598,"style":257},"faf7f80f594f",[594],{"_key":595,"_type":68,"marks":596,"text":597},"faf7f80f594f0",[],"Do make interactions feel as if they’re part of the real world",[],{"_key":600,"_type":64,"children":601,"markDefs":606,"style":72},"da703e60ab03",[602],{"_key":603,"_type":68,"marks":604,"text":605},"da703e60ab030",[],"Our goal is to create animations which feel natural and fluid, not robotic and linear. Try to mimic the physics of the real world when designing and developing micro-interactions.",[],{"_key":608,"_type":64,"children":609,"markDefs":614,"style":114},"e74e0a65e592",[610],{"_key":611,"_type":68,"marks":612,"text":613},"e74e0a65e5920",[],"How Do You Build A Micro-Interaction?",[],{"_key":616,"_type":64,"children":617,"markDefs":622,"style":72},"2acc1c3bc75d",[618],{"_key":619,"_type":68,"marks":620,"text":621},"2acc1c3bc75d0",[],"There are three main areas to designing a micro-interaction:",[],{"_key":624,"_type":64,"children":625,"level":198,"listItem":630,"markDefs":631,"style":72},"ab2684e99fa7",[626],{"_key":627,"_type":68,"marks":628,"text":629},"ab2684e99fa70",[],"Interaction Trigger","number",[],{"_key":633,"_type":64,"children":634,"level":198,"listItem":630,"markDefs":639,"style":72},"b8f4d8c24bde",[635],{"_key":636,"_type":68,"marks":637,"text":638},"b8f4d8c24bde0",[],"State Definition",[],{"_key":641,"_type":64,"children":642,"level":198,"listItem":630,"markDefs":647,"style":72},"58db96722a76",[643],{"_key":644,"_type":68,"marks":645,"text":646},"58db96722a760",[],"Animation Definition",[],{"_key":649,"_type":64,"children":650,"markDefs":654,"style":257},"d134a00d875a",[651],{"_key":652,"_type":68,"marks":653,"text":629},"d134a00d875a0",[],[],{"_key":656,"_type":64,"children":657,"markDefs":662,"style":72},"d20eb1716847",[658],{"_key":659,"_type":68,"marks":660,"text":661},"d20eb17168470",[],"All micro-interactions require something else to trigger them. This can be a user-triggered action, like clicking a button, or a system-prompted event, like requesting data.\n",[],{"_key":664,"_type":64,"children":665,"markDefs":669,"style":257},"19d0e4f4b510",[666],{"_key":667,"_type":68,"marks":668,"text":638},"19d0e4f4b5100",[],[],{"_key":671,"_type":64,"children":672,"markDefs":677,"style":72},"5574bfd92d0d",[673],{"_key":674,"_type":68,"marks":675,"text":676},"5574bfd92d0d0",[],"Once we know what triggers the micro-interaction, we must define the different state that this micro-interaction has.\n",[],{"_key":679,"_type":64,"children":680,"markDefs":684,"style":257},"5d4e199d3e92",[681],{"_key":682,"_type":68,"marks":683,"text":646},"5d4e199d3e920",[],[],{"_key":686,"_type":64,"children":687,"markDefs":692,"style":72},"ba1d0a95bde6",[688],{"_key":689,"_type":68,"marks":690,"text":691},"ba1d0a95bde60",[],"Once we've defined the various states, we can define what is expected at each step.\n",[],{"_key":694,"_type":64,"children":695,"markDefs":700,"style":114},"38b051feca5e",[696],{"_key":697,"_type":68,"marks":698,"text":699},"38b051feca5e0",[],"Conclusion",[],{"_key":702,"_type":64,"children":703,"markDefs":708,"style":72},"f3c520ed4ff7",[704],{"_key":705,"_type":68,"marks":706,"text":707},"f3c520ed4ff70",[],"In the next two posts in this series, we’ll dive into building micro-interactions with react-spring in two tutorials. In the first tutorial, we’ll build a navigation menu (full page and sidebar). In the second tutorial, we’ll build a modal that flies in from outside of the viewport and an image gallery.\n",[],true,"2020/01/16","In this series, we’ll examine how to take your application from ordinary to exceptional by implementing micro-interactions with react-spring so you won’t be stuck thinking “I really wish I knew how to add animations” any more.",{"_type":53,"asset":713},{"_ref":714,"_type":56},"image-b7239df79d9659f7172a412ba24cf22e78a9dde3-2547x1177-jpg",{"code":716,"language":717},"\u003C!-- wp:paragraph -->\n\u003Cp>How often have you looked at the application you just built and thought to yourself “I really wish I knew how to add animations”?\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>I had this thought for a long time. I would build something really great, yet the interactions were minimal at best (the most I could do is a \u003Ccode>transition: background .1s linear\u003C/code>), yet I always wanted more.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Animations not only take your application from good to exceptional, they’re often expected by users. But animations don’t just make your application look and feel nicer, they can be a useful tool for improving perceived performance, giving users updates on the status of a task, and guiding a user through your application.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In this series, we’ll examine how to take your application from ordinary to exceptional by implementing micro-interactions with react-spring so you won’t be stuck thinking “I really wish I knew how to add animations” any more.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>react-spring\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>For this series of tutorials, we’ll be learning \u003Ca href=\"https://www.react-spring.io/\">react-spring\u003C/a>.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>react-spring is a hooks-based animation library, but what differentiates it from its competition is the fact that it’s also a physics-based library.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Typically we use CSS animation libraries with transition timing functions and bezier curves to animate elements in the UI. However, it’s truly difficult to make elements transition in a natural manner. Elements in real life don’t transition linearly through different states, and your UI elements shouldn’t either.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Enter react-spring.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We’ll learn more about this amazing technology in the second and third installments of the blog series, but if you don’t know React or haven’t worked with Hooks I would recommend taking an introductory course first.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>What are micro-interactions?\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Micro-interactions are small animations whose purpose is to delight the user by providing feedback in regards to a task or inform the user about the status of a process or task.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Here are a few examples of micro-interactions:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/7299868-Download-Buttons\">Dribbble buttons\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/6833910-Mobile-App-Onboarding\">Mobile app onboarding\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/5709751-Activate-Button\">Activate button\u003C/a>\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>By incorporating micro-interactions we will take our applications from ordinary to exceptional. We can think of the structure of your application—the HTML—as the body, the CSS as the physical appearance, and animations as the body language.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Why use micro-interactions?\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Here are a few reasons why you should use micro-interactions throughout your application.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Enhancing perceived performance\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://blog.marvelapp.com/a-designers-guide-to-perceived-performance/\">“There are two kinds of time: \u003Cem>clock time\u003C/em> and \u003Cem>brain time\u003C/em>. The former is the objective measure of time; the latter is how a person \u003Cem>perceives\u003C/em> time.”\u003C/a>\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Adding micro-interactions, such as a custom progress bar or an animated setup dialog which guides the user through a process, can change the way users perceive the time it takes to complete a task.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We can alter our user's sense of time with animations and this can work in our favor if our performance budget needs some refactoring.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Example: \u003Ca href=\"https://dribbble.com/shots/3982257-Neo-Kids-Onboarding-Concept\">Form Entry\u003C/a>\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Inform users about the status of a task\t\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>As a user’s request is processing or as their data is loading, we can use a micro-interaction to inform them of its status.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Custom progress bars are a great way to keep your users from getting frustrated and will stretch the amount of time they’re willing to wait for a process to finish.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp> Examples:  \u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/7184429-Avocado-loader-interaction\">Avocado Loader\u003C/a> \u003C/li>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/7199149-Book-Loader\">Book Loader\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/5334120-Progress-Bar-Animation-UX-Concept\">Progress Bar\u003C/a>\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Illustrate a state change\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>If a user is filling out a form and incorrectly enters their password, we can use micro-interactions to illustrate that this form needs to be fixed prior to submission.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Examples:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/4908813-Invalid-Email-Error\">Form Error\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://dribbble.com/shots/5310205-Password-error-animation-2\">Password Incorrect\u003C/a>\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Draw a user’s attention to something\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Using micro-interactions to capture a user’s attention and indicate that there is something of importance is a useful tool for onboarding or to indicate someone is typing.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Example: \u003Ca href=\"https://dribbble.com/shots/4622464-Chat\">Chat\u003C/a>\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>To create habits\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Social media applications are really good at getting their uses to form habits, and they do so with micro-interactions. Facebook’s like button is a prime example of this, as is Instagram’s heart animation.These small interactions delight users and keep them coming back for more.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Example: \u003Ca href=\"https://dribbble.com/shots/6415659-Reactions-2-0\">Reactions\u003C/a>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Further reading: \u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ca href=\"https://www.nngroup.com/articles/ten-usability-heuristics/\">Jakob Nielsen’s Heuristics\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\"https://www.creativebloq.com/advice/understand-the-12-principles-of-animation\">Disney’s 12 Principles Of Animation\u003C/a>\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Do’s and don’ts\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Before you build your first micro-interaction, it’s important to understand the do’s and don’ts.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Do make your micro-interactions accessible\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Users won’t care about the coolest micro-interaction in the world if it’s not accessible. If the interaction indicates state change, ensure that the proper HTML elements and attributes are used; otherwise, add the appropriate WAI-ARIA counterparts.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Don’t add animation to everything\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Animations draw the user’s attention, but not all information has the same level of importance.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>First understand which component on the page has the most pertinent or time sensitive information or priority, and then decide what to animate.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Do make interactions feel as if they’re part of the real world\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Our goal is to create animations which feel natural and fluid, not robotic and linear. Try to mimic the physics of the real world when designing and developing micro-interactions.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>How Do You Build A Micro-Interaction?\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>There are three main areas to designing a micro-interaction:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list {\"ordered\":true} -->\n\u003Col>\u003Cli>Interaction Trigger \u003C/li>\u003Cli>State Definition\u003C/li>\u003Cli>Animation Definition\u003C/li>\u003C/ol>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Interaction Trigger\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>All micro-interactions require something else to trigger them. This can be a user-triggered action, like clicking a button, or a system-prompted event, like requesting data.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>State Definition\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Once we know what triggers the micro-interaction, we must define the different state that this micro-interaction has.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Animation Definition\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Once we've defined the various states, we can define what is expected at each step.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Conclusion\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In the next two posts in this series, we’ll dive into building micro-interactions with react-spring in two tutorials. In the first tutorial, we’ll build a navigation menu (full page and sidebar). In the second tutorial, we’ll build a modal that flies in from outside of the viewport and an image gallery.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->","html","2020-01-16T15:00:00.000Z",{"current":720},"how-to-create-micro-interactions-with-react-spring-part-1",[722,729,734,739,743,746],{"_createdAt":723,"_id":724,"_rev":725,"_type":726,"_updatedAt":723,"slug":727,"title":728},"2023-05-23T16:43:21Z","wp-tagcat-animation","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":728},"animation",{"_createdAt":723,"_id":730,"_rev":725,"_type":726,"_updatedAt":723,"slug":731,"title":733},"wp-tagcat-bulletin",{"current":732},"bulletin","Bulletin",{"_createdAt":723,"_id":735,"_rev":725,"_type":726,"_updatedAt":723,"slug":736,"title":738},"wp-tagcat-code-for-a-living",{"current":737},"code-for-a-living","Code for a Living",{"_createdAt":723,"_id":740,"_rev":725,"_type":726,"_updatedAt":723,"slug":741,"title":742},"wp-tagcat-react",{"current":742},"react",{"_createdAt":723,"_id":744,"_rev":725,"_type":726,"_updatedAt":723,"slug":745,"title":112},"wp-tagcat-react-spring",{"current":112},{"_createdAt":723,"_id":747,"_rev":725,"_type":726,"_updatedAt":723,"slug":748,"title":750},"wp-tagcat-stackoverflow",{"current":749},"stackoverflow","Stackoverflow","How to create micro-interactions with react-spring: Part 1",[753,759,765,771],{"_id":754,"publishedAt":755,"slug":756,"sponsored":12,"title":758},"28e560af-f0aa-4d46-bd90-f435ad604aa7","2026-06-26T14:00:27.102Z",{"_type":10,"current":757},"paging-charity-how-can-engineering-leaders-avoid-becoming-bond-villains","Paging Charity! How can engineering leaders avoid becoming Bond villains?",{"_id":760,"publishedAt":761,"slug":762,"sponsored":12,"title":764},"4b22c2a3-3779-4966-93eb-5230391dbdce","2026-06-23T14:08:58.595Z",{"_type":10,"current":763},"your-ai-shipped-a-backend-that-boots-that-is-the-whole-problem","Your AI shipped a backend that boots. That is the whole problem.",{"_id":766,"publishedAt":767,"slug":768,"sponsored":12,"title":770},"5cf362e1-fe7b-45af-b69c-914731c6a052","2026-06-23T14:00:00.000Z",{"_type":10,"current":769},"the-2026-developer-survey-is-now-open-for-human-developers-only","The 2026 Developer Survey is now open (for human developers only)!",{"_id":772,"publishedAt":773,"slug":774,"sponsored":12,"title":776},"30b995f7-7cb9-4dd8-bf71-d0685940a32b","2026-06-19T14:00:00.000Z",{"_type":10,"current":775},"dispatches-from-o-reilly-from-capabilities-to-responsibilities","Dispatches from O'Reilly: From capabilities to responsibilities",{"data":778,"sourceMap":-1},{"count":779,"lastTimestamp":780},7,"2023-05-25T09:47:02Z"]