1import{j as s}from"./chunk-6CSD65Y2-BDCp14CY.js";const t={title:"Hover",displayTitle:null,description:"An example of using Motion's hover function to animate elements as a user hovers over them. hover() automatically filters out polyfilled hover events from touch screens, which can normally lead to broken visual states.",slug:"js-hover",framework:"js",category:"Basics",level:0,levelScale:5,date:"2025-01-20T00:00:00.000Z",listed:!0,featured:!1,authorSlug:"matt-perry",isPlus:!1,exampleUrl:"https://examples.motion.dev/js/hover",screenshot:"https://examples.motion.dev/thumbnails/js/hover.png",apis:["animate","hover"],steps:[{id:"introduction",title:"Introduction",locked:!1},{id:"get-started",title:"Get started",locked:!1},{id:"lets-animate",title:"Let's animate!",locked:!1},{id:"conclusion",title:"Conclusion",locked:!1}],timeToComplete:5,outcome:null};function l(h){const i={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul",...h.components},{NewsletterPromo:e}=i;return e||a("NewsletterPromo"),s.jsxs(s.Fragment,{children:[s.jsx(i.h2,{id:"introduction",children:"Introduction"}),` 2`,s.jsx(i.p,{children:"The Hover example demonstrates how to create a simple animation that triggers when a user hovers on and off an element."}),` 3`,s.jsx(i.p,{children:"In this example, we'll learn to use:"}),` 4`,s.jsxs(i.ul,{children:[` 5`,s.jsxs(i.li,{children:[s.jsx(i.a,{href:"https://motion.dev/docs/hover",children:s.jsx(i.code,{children:"hover"})})," - To detect when an element is being hovered over"]}),` 6`,s.jsxs(i.li,{children:[s.jsx(i.a,{href:"https://motion.dev/docs/animate",children:s.jsx(i.code,{children:"animate"})})," - To animate properties of an element"]}),` 7`]}),` 8`,s.jsxs(i.h3,{id:"why-use-hover",children:["Why use ",s.jsx(i.code,{children:"hover"}),"?"]}),` 9`,s.jsxs(i.p,{children:["Motion's ",s.jsx(i.code,{children:"hover"}),` function provides several advantages over 10traditional event listeners:`]}),` 11`,s.jsx(i.h4,{id:"simple-api",children:"Simple API"}),` 12`,s.jsxs(i.p,{children:[s.jsx(i.code,{children:"hover"})," automatically handle attaching and cleaning up event listeners. It also supports CSS selectors to add gestures to multiple elements at once."]}),` 13`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:"hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:".box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" ("}),s.jsx(i.span,{style:{"--shiki-light":"#E36209","--shiki-dark":"#E0AF68"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:")"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:" =>"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 14`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1.2"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 15`,s.jsx(i.span,{className:"line"}),` 16`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-light-font-style":"inherit","--shiki-dark":"#a78bfa","--shiki-dark-font-style":"italic"},children:" return"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" () "}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:"=>"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 17`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"})"})})]})}),`
18`,s.jsx(i.h4,{id:"touch-filtering",children:"Touch filtering"}),` 19`,s.jsxs(i.p,{children:["For legacy reasons dating back to the first iPhones, browsers polyfill ",s.jsx(i.code,{children:"pointerenter"})," and ",s.jsx(i.code,{children:"pointerleave"})," events even from touch devices. So you can trigger ",s.jsx(i.code,{children:":hover"})," selectors from a touch pointer. This can lead to stuck or unexpected interactions."]}),` 20`,s.jsxs(i.p,{children:[s.jsx(i.code,{children:"hover"})," automatically filters out touch events, so you can be sure that your animations will only trigger from mouse-like devices."]}),` 21`,s.jsx(i.h2,{id:"get-started",children:"Get started"}),` 22`,s.jsx(i.p,{children:"Let's begin with our basic HTML structure and styles:"}),` 23`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"div"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#a78bfa"},children:" class"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"="}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"div"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 24`,s.jsx(i.span,{className:"line"}),` 25`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 26`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#E0AF68"},children:" ."}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#34d399"},children:"box"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 27`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" width"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 100"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 28`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" height"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 100"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 29`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" background-color"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#9AA5CE"},children:" #6100ff"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 30`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" border-radius"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 10"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 31`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"})}),` 32`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"</"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]})]})}),` 33`,s.jsx(i.p,{children:"This creates a simple purple box that will be the target of our hover animation."}),` 34`,s.jsx(i.h2,{id:"lets-animate",children:"Let's animate!"}),` 35`,s.jsx(i.h3,{id:"import-from-motion",children:"Import from Motion"}),` 36`,s.jsx(i.p,{children:"First, we need to import the necessary functions from Motion:"}),`
37`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsx(i.code,{children:s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:"import"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:" hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:" from"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:' "'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"motion"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'})]})})}),` 38`,s.jsxs(i.p,{children:["The ",s.jsx(i.code,{children:"hover"})," function allows us to detect when an element is being hovered over and execute callback functions when hover begins and ends. The ",s.jsx(i.code,{children:"animate"})," function will create our animations."]}),` 39`,s.jsx(i.h3,{id:"setting-up-hover-detection",children:"Setting up hover detection"}),` 40`,s.jsxs(i.p,{children:["Now, let's use the ",s.jsx(i.code,{children:"hover"})," function to detect when our box is being hovered over:"]}),` 41`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:"hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:".box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" ("}),s.jsx(i.span,{style:{"--shiki-light":"#E36209","--shiki-dark":"#E0AF68"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:")"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:" =>"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 42`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#6A737D","--shiki-light-font-style":"inherit","--shiki-dark":"#51597D","--shiki-dark-font-style":"italic"},children:" // Code to run when hover starts"})}),` 43`,s.jsx(i.span,{className:"line"}),` 44`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-light-font-style":"inherit","--shiki-dark":"#a78bfa","--shiki-dark-font-style":"italic"},children:" return"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" () "}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:"=>"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 45`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#6A737D","--shiki-light-font-style":"inherit","--shiki-dark":"#51597D","--shiki-dark-font-style":"italic"},children:" // Code to run when hover ends"})}),` 46`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"})}),` 47`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"})"})})]})}),` 48`,s.jsxs(i.p,{children:["The ",s.jsx(i.code,{children:"hover"})," function takes two arguments:"]}),` 49`,s.jsxs(i.ol,{children:[` 50`,s.jsx(i.li,{children:"A CSS selector or DOM element to watch for hover events"}),` 51`,s.jsx(i.li,{children:"A callback function that receives the target element"}),` 52`]}),` 53`,s.jsx(i.p,{children:'The callback function should return another function that will be called when the hover ends, allowing us to define both the "hover start" and "hover end" behaviors.'}),` 54`,s.jsx(i.h3,{id:"adding-animations",children:"Adding animations"}),` 55`,s.jsx(i.p,{children:"Let's define what happens when a user hovers over the box:"}),`
56`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:"hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:".box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" ("}),s.jsx(i.span,{style:{"--shiki-light":"#E36209","--shiki-dark":"#E0AF68"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:")"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:" =>"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 57`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1.3"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 58`,s.jsx(i.span,{className:"line"}),` 59`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-light-font-style":"inherit","--shiki-dark":"#a78bfa","--shiki-dark-font-style":"italic"},children:" return"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" () "}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:"=>"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 60`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"})"})})]})}),` 61`,s.jsxs(i.p,{children:["When the hover starts, we animate the box to scale up to 1.3 times its original size. Motion animates ",s.jsx(i.code,{children:"scale"})," with a spring animation by default for a natural, physical feel."]}),` 62`,s.jsx(i.p,{children:"When the hover ends, we return a function that animates the box back to its original scale."}),` 63`,s.jsx(i.h3,{id:"the-complete-code",children:"The complete code"}),` 64`,s.jsx(i.p,{children:"Putting it all together:"}),` 65`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"div"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#a78bfa"},children:" class"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"="}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"div"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 66`,s.jsx(i.span,{className:"line"}),` 67`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"script"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#a78bfa"},children:" type"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"="}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"module"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 68`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:" import"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:" hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:" from"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:' "'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"motion"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'})]}),` 69`,s.jsx(i.span,{className:"line"}),` 70`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" hover"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:".box"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" ("}),s.jsx(i.span,{style:{"--shiki-light":"#E36209","--shiki-dark":"#E0AF68"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:")"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:" =>"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 71`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1.3"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 72`,s.jsx(i.span,{className:"line"}),` 73`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-light-font-style":"inherit","--shiki-dark":"#a78bfa","--shiki-dark-font-style":"italic"},children:" return"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" () "}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#a78bfa"},children:"=>"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#C0CAF5"},children:"element"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:"scale"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]}),` 74`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})}),` 75`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"</"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"script"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 76`,s.jsx(i.span,{className:"line"}),` 77`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 78`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#E0AF68"},children:" ."}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#34d399"},children:"box"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"})]}),` 79`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" width"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 100"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 80`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" height"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 100"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 81`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" background-color"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#9AA5CE"},children:" #6100ff"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 82`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#60a5fa"},children:" border-radius"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 10"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#f43f5e"},children:"px"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:";"})]}),` 83`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"})}),` 84`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"</"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]})]})}),` 85`,s.jsx(i.h2,{id:"conclusion",children:"Conclusion"}),` 86`,s.jsxs(i.p,{children:["In this example, we learned how to use Motion's ",s.jsx(i.code,{children:"hover"})," and ",s.jsx(i.code,{children:"animate"})," functions to create an engaging hover effect. The ",s.jsx(i.code,{children:"hover"})," function makes it easy to detect when a user hovers over an element, and the ",s.jsx(i.code,{children:"animate"})," function provides a clean way to create animations with spring physics."]}),` 87`,s.jsx(i.p,{children:"This approach gives you more control than CSS hover effects while requiring much less code than vanilla JavaScript. You can expand on this by animating multiple properties, creating multi-stage animations, or combining hover with other gesture detectors."}),` 88`,s.jsx(e,{})]})}function r(h={}){const{wrapper:i}=h.components||{};return i?s.jsx(i,{...h,children:s.jsx(l,{...h})}):l(h)}function a(h,i){throw new Error("Expected component `"+h+"` to be defined: you likely forgot to import, pass, or provide it.")}export{r as default,t as frontmatter};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.