var Component=(()=>{var r=Object.create;var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(a,s)=>()=>(s||a((s={exports:{}}).exports,s),s.exports),k=(a,s)=>{for(var c in s)l(a,c,{get:s[c],enumerable:!0})},i=(a,s,c,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of h(s))!u.call(a,t)&&t!==c&&l(a,t,{get:()=>s[t],enumerable:!(e=d(s,t))||e.enumerable});return a};var A=(a,s,c)=>(c=a!=null?r(m(a)):{},i(s||!a||!a.__esModule?l(c,"default",{value:a,enumerable:!0}):c,a)),g=a=>i(l({},"__esModule",{value:!0}),a);var p=N((B,o)=>{o.exports=_jsx_runtime});var x={};k(x,{default:()=>y,frontmatter:()=>w});var n=A(p()),w={title:"How to create a drooling cat animation",publishedAt:"2022-07-27",description:"This is a very simple drooling cat animation created with React, Emotion, and Figma.",category:"Tutorial",tags:["cat","drooling","bored","react","emotion","figma"],image:"/images/drooling-cat/drooling-cat@2x.png",blurDataURL:"data:image/webp;base64,UklGRmoEAABXRUJQVlA4WAoAAAAgAAAA9wAAuQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANlZQOCAsAgAAcBkAnQEq+AC6AD7RYKhPqqoooyeUSplQGglpbt+KLrUPB5PfbzdfPDoXoYUYMe5nyCchiKzwNyHE8/qAuf7cnuoDjhRcntL9uTy73QsuI3NSTKjnLVEViUMQIn07pnjxI6uIz0SzqS7/UZgiNBM7h+Xney4bowIBkKSy22FT3DL0v4pGSNLBadUIlHhIBFmLk1eXRlRshta+bp0eFLZcSCXJd5HzQaMAgL4mEA7bCK4XLiF7T2fsJ4xsVIpu2y4kvSRm/ooZbQIyiWUWqheCButR15AA/vH/cPsCRWb2qqpifeWdAAfnBLnQ0mNiGUaaQiAGpuwJBDAc27yeAM8EsH8gx4IFyTIFjLAvKD2AL51n57NhwP5IK28Fky/F4NSnLlTR2/woPN+0MK9aaCkeMxuH4VRY5YNFuB2UQfinIf51sZN/CMF60KjplvTmgntM8I7ph5bt/vax9r3QZfv3JCjK8n5CYIpYtDSuQRSXMSd0qriSOz9JV/KVnACDzILClo8P+TnMIz36snpWDR53Abbqeia0YwVcxNcswuP2fbLO2EJeXG3DoIcYM+XZBr7msSZQFiIxzzKQArzw51B4oUkIJFHlMSTO0XwqCOVJxRnOtmmGxKOH481oRDbLGFkF1JONmPIwWx6nb/SiXi+B2LpELNDfgejnW4fKwcDi5SkbLNQjKzCuxVR2yDBl7+b54ywuQBAiBQsJiyFK3MfpishpCewnIIZBIAAAAA==",published:!0};function f(a={}){let{wrapper:s}=a.components||{};return s?(0,n.jsx)(s,Object.assign({},a,{children:(0,n.jsx)(c,{})})):c();function c(){let e=Object.assign({p:"p",h2:"h2",img:"img",a:"a",code:"code",pre:"pre",span:"span",h3:"h3"},a.components),{CodeSandbox:t}=e;return t||v("CodeSandbox",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"This is a very simple drooling cat animation created with React, Emotion, and Figma. As the page scrolls down, the saliva gets fixed at the top of the page, giving the impression that the cat is drooling."}),` `,(0,n.jsx)(e.h2,{children:"Designing in Figma"}),` `,(0,n.jsx)(e.p,{children:`Let's start by designing a cat that is drooling in Figma and then split the image in two: "bored-cat" and "saliva".`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/images/drooling-cat/drooling-cat-split-images@2x.jpg",alt:"drooling cat figma"})}),` `,(0,n.jsx)(e.p,{children:`A hover animation would also be nice for the bored cat. Hovering the image will make the cat bored. As you can see in the image below, I am going to group the eyelids into two different groups. One I call "evil-lids" and the other I call "bored-lids". I'm going to leave both groups visible.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/images/drooling-cat/drooling-cat-eye-lids@2x.jpg",alt:"drooling cat figma"})}),` `,(0,n.jsxs)(e.p,{children:["We could export the images in two files, but since we want to have some hover animations, let's export them as SVGs as React components. In order to accomplish this, I will use the Figma plugin ",(0,n.jsx)(e.a,{href:"https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX",children:"SVG to JSX"}),"."]}),` `,(0,n.jsx)(e.h2,{children:"Coding in React"}),` `,(0,n.jsxs)(e.p,{children:["Using React, I will make a component called ",(0,n.jsx)(e.code,{children:"DroolingCat"}),". And I'm going to add both SVGs. The first thing I'm going to do is position them. The saliva is going to be absolutely positioned on top of the bored cat. Exactly at the bottom of the mouth."]}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useState",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," css ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@emotion/react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"css"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"css",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token css language-css",children:` `})]})]})]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"position"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," relative",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token css language-css",children:" "}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // Saliva `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"css"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"css",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token css language-css",children:` `})]})]})]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"position"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," absolute",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"top"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token unit",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"margin-top"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"17"}),(0,n.jsx)(e.span,{className:"token unit",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"width"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"18"}),(0,n.jsx)(e.span,{className:"token unit",children:"px"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"left"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token unit",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"margin-left"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"-9"}),(0,n.jsx)(e.span,{className:"token unit",children:"px"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token css language-css",children:" "}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // Bored cat `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.h3,{children:"The drooling cat effect"}),` `,(0,n.jsx)(e.p,{children:"Having positioned the saliva, it's now time to create the first animation. The goal is to give the impression that the cat is drooling."}),` `,(0,n.jsxs)(e.p,{children:["Firstly, I'm going to use the ",(0,n.jsx)(e.code,{children:"useRef"})," hook to keep track of the position of the cat's mouth. Then I'm going to create a ",(0,n.jsx)(e.code,{children:"handleScroll"})," function that will be called when the page is scrolled. Inside this function we need to detect if the cat's mouth is in the viewport. If it is, we will ",(0,n.jsx)(e.code,{children:"setSticky"})," to ",(0,n.jsx)(e.code,{children:"false"}),". If it is not, we will ",(0,n.jsx)(e.code,{children:"setSticky"})," to ",(0,n.jsx)(e.code,{children:"true"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["The saliva is supposed to become fixed to the top of the screen when the cat's mouth is out of viewport. As a result, we're going to update the styles based on the ",(0,n.jsx)(e.code,{children:"isSticky"})," state."]}),` `,(0,n.jsxs)(e.p,{children:["Why am I not using the CSS position ",(0,n.jsx)(e.code,{children:"sticky"})," if I'm calling the state ",(0,n.jsx)(e.code,{children:"isSticky"}),"? In case the parent element scrolls off the viewport, the element with ",(0,n.jsx)(e.code,{children:"position: sticky"})," will leave the viewport as well and we don't want that. We want the saliva to stay fixed to the top of the viewport."]}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useState",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," css ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@emotion/react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"isSticky",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setSticky",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," mouthRef ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useRef"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token dom variable",children:"window"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"addEventListener"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"scroll"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," handleScroll",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token dom variable",children:"window"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"removeEventListener"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"scroll"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," handleScroll",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"handleScroll"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" mouthRef ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" mouthRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" mouthRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getBoundingClientRect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"mouthRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"getBoundingClientRect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"bottom"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<="})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setSticky"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"else"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setSticky"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // Saliva `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"xmlns"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fill"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"none",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"0 0 30 603",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"css"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"css",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token css language-css",children:` `})]})]})]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),`isSticky `]})]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsx)(e.span,{className:"token css language-css",children:(0,n.jsxs)(e.span,{className:"token interpolation",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"position: fixed; top: 0;"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),` `]})})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[(0,n.jsxs)(e.span,{className:"token interpolation",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"position: absolute; top: 50%; margin-top: 17%;"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"width"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"18"}),(0,n.jsx)(e.span,{className:"token unit",children:"px"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"left"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token unit",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token script language-javascript",children:(0,n.jsx)(e.span,{className:"token template-string",children:(0,n.jsxs)(e.span,{className:"token css language-css",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:"margin-left"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"-9"}),(0,n.jsx)(e.span,{className:"token unit",children:"px"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token css language-css",children:" "}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // the mouth gets the ref from the mouthRef variable `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"ref"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"mouthRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // Bored cat `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.h3,{children:"The hover animation"}),` `,(0,n.jsxs)(e.p,{children:["It is now time to add the hover animation. Whenever the mouse enters or leaves the image, the cat's eyelids should change. When the mouse is hovering the cat, we set the ",(0,n.jsx)(e.code,{children:"isBored"})," state to ",(0,n.jsx)(e.code,{children:"true"}),". When the mouse leaves the cat, we set the ",(0,n.jsx)(e.code,{children:"isBored"})," state to ",(0,n.jsx)(e.code,{children:"false"}),`. The `,(0,n.jsx)(e.code,{children:"isBored"}),' state will determine which eyelids will be displayed inside the SVG. The "evil" eyelids will be displayed if the cat ',(0,n.jsx)(e.code,{children:"isBored"}),'. The "bored" eyelids will be displayed if the cat ',(0,n.jsx)(e.code,{children:"!isBored"})," (it's not bored)."]}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useState",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," css ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@emotion/react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"isBored",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setIsBored",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // Bored cat `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onMouseEnter"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setIsBored"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onMouseLeave"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setIsBored"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"isBored ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"<"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"isBored ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"DroolingCat"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.h2,{children:"Putting it all together"}),` `,(0,n.jsxs)(e.p,{children:[`In the following CodeSandbox, you can see how to put all the code together. All the animations can be seen in action by scrolling the page and hovering over the cat. Feel free to recreate this code with your design, and let me know by tweeting `,(0,n.jsx)(e.a,{href:"https://twitter.com/miuki_miu",children:"@miuki_miu"}),`! It would be great to see how you use it. That's all!`]}),` `,(0,n.jsx)(t,{codeSandboxId:"drooling-cat-xn0lyl"})]})}}var y=f;function v(a,s){throw new Error("Expected "+(s?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(x);})(); ;return Component;

Blog

Emotional and Functional UI Animations in React

How to create a drooling cat animation