\"), \" which functions similarly to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \"s and can be target programmatically if there is a specific \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"class\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" associated with a group. Individual SVG shapes and paths can also have their own unique identifiers if you want to target more specifically but so far I've found that it's helpful to animate in groups.\"), mdx(CodePen, {\n codePenId: \"rNWwpVR\",\n mdxType: \"CodePen\"\n }), mdx(\"p\", null, \"The cheeks in the bubble tea SVG are grouped together with the id \\\"cheeks\\\"\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-svg\"\n }, \"\\n\")), mdx(\"p\", null, \"There's a default fill and stroke color set for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#cheeks\"), \" based on the original color values in the SVG but we can use CSS to target the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#cheeks\"), \" and change the colors with the below animation that change the color of its thick stroke by applying a blush \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"animation\"), \" every that last a duration of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"4s\"), \" for an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"infinite\"), \" amount of time. \"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"#cheeks {\\n /* play the blush animation for 4s and repeat an infinite amount of times */\\n animation: blush 4s infinite;\\n} \\n\")), mdx(\"p\", null, \"Generally, on production sites you'd want to have more control over \", mdx(\"em\", {\n parentName: \"p\"\n }, \"when\"), \" an animation is running so that it isn't running continuously as opposed to just when visible or necessary for performance reasons.\"), mdx(\"p\", null, \"The specifics for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"blush\"), \" to change the fill color are then defined in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@keyframes blush\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"@keyframes blush {\\n 50% {\\n /* change from original fill color (defined in SVG)\\n to #b7094c halfway through the animation */\\n stroke: #b7094c; \\n }\\n}\\n\")), mdx(\"p\", null, \"If you view the CodePen you can also see the separate \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"jiggle\"), \" animation instances that I applied to each of the individual \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#boba\"), \" at different time points (offsetting the seconds measurement in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"animation: jiggle 5s infinite\"), \") with the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/transform\"\n }, \"CSS transform property\"), \" which allows you to move, scale, rotate and more!\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"/* excerpt of applying the jiggle animation with different timing to different elements*/\\n#boba-two {\\n -webkit-animation: jiggle 5s infinite;\\n animation: jiggle 5s infinite;\\n}\\n#boba-three {\\n -webkit-animation: jiggle 3s infinite;\\n animation: jiggle 3s infinite;\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"cross-browser-compatibility\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#cross-browser-compatibility\",\n \"aria-label\": \"cross browser compatibility permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Cross-Browser Compatibility\"), mdx(\"p\", null, \"You may have noticed some of the CSS in the code examples in this article have prefixe like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"-webkit\"), \". These are \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix\"\n }, \"vendor prefixes\"), \" which allows developers to use newer features that aren't yet considered stable within a specific browser. You can use a website like: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://autoprefixer.github.io/\"\n }, \"https://autoprefixer.github.io/\"), \" or a PostCSS tool like \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/postcss/autoprefixer\"\n }, \"https://github.com/postcss/autoprefixer\"), \" to automate adding these prefixes to your animations to ensure any more experimental features have as much cross-browser support as possible. In addition to using these vendor prefixing tools I'd recommend actually doing cross-browser testing for your animation work and being familiar with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://caniuse.com/\"\n }, \"Can I Use\"), \" which shows up-to-date information on browser compatibility for specific features.\"), mdx(\"p\", null, \"The CSS animation examples in this article are relatively simple but more complex animations can be created using similar principles with with CSS animations or with animation libraries like \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://greensock.com/\"\n }, \"GreenSock Animation Platform (GSAP)\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#reading-and-writing-svgs","title":"Reading and Writing SVGs"},{"url":"#animating-svg-elements","title":"Animating SVG elements"},{"url":"#cross-browser-compatibility","title":"Cross-Browser Compatibility"}]},"frontmatter":{"title":"Getting Started with SVG Animation","date":"April 13, 2021","description":"This is an article about the basics of SVG animation.","tags":["CSS","SVG","Animation","Design"]}},"allWebMentionEntry":{"edges":[]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/getting-started-with-svg-animation/","slug":"/blog/getting-started-with-svg-animation/","prev":{"id":"0a53e3c0-7455-561b-82df-2961f6c0dec7","frontmatter":{"title":"My SVG Creation Process","category":["tutorial"],"date":"2021-04-13T04:58:13.499Z","slug":"my-svg-creation-process","tags":["SVG","design"],"redirects":null},"fields":{"slug":"/blog/my-svg-creation-process/"}},"next":{"id":"bafb6ea1-8b2e-5a8e-a33e-582ce59a1006","frontmatter":{"title":"Creating Protected Routes In NextJS With Supabase","category":["tutorial"],"date":"2021-03-13T23:27:48.599Z","slug":"creating-protected-routes-in-next-js-with-supabase","tags":["NextJS","Supabase"],"redirects":null},"fields":{"slug":"/blog/creating-protected-routes-in-next-js-with-supabase/"}}}},
"staticQueryHashes": ["1977783444","764694655"]}