{"id":28510,"date":"2022-06-28T10:19:45","date_gmt":"2022-06-28T10:19:45","guid":{"rendered":"http:\/\/create-a-fireworks-animation-in-react"},"modified":"2022-06-28T10:19:45","modified_gmt":"2022-06-28T10:19:45","slug":"create-a-fireworks-animation-in-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/","title":{"rendered":"Create a Fireworks Animation in React"},"content":{"rendered":"

With the Fourth of July right around the corner, this seems like a great time to practice building some custom animations with fireworks! Sometimes you\u2019ll work on projects that need some advanced animations, like an e-commerce or gaming site, and it can take some time to get them to function as you expect.<\/p>\n

That\u2019s why we\u2019re going to use anime.js<\/code><\/a> to implement a simple fireworks animation that can be customized by users. You\u2019ll see how you can create some cool animations using CSS and this package.<\/p>\n

Initial setup<\/h2>\n

We\u2019ll need to create a new React app to get started. Run this command to bootstrap the fireworks<\/code> app:<\/p>\n

$ npx create-react-app fireworks --template typescript\n<\/code><\/span><\/pre>\n
Once the installation is complete, let\u2019s add a few packages we\u2019ll use throughout the app with this command:<\/p>\n
$ npm i animejs @types\/animejs @mui\/material @emotion\/react @emotion\/styled\n<\/code><\/span><\/pre>\n
Now let\u2019s jump into the first component we need to make.<\/p>\n
Make the fireworks component<\/h2>\n
We\u2019re going to have two main components: one for the fireworks animation and one for the form users will be able to customize the fireworks with. Let\u2019s start with the fireworks component. In the src<\/code> directory, create a new folder called components<\/code>. Inside this new folder, add a file and name it Fireworks.tsx<\/code>. This is where we\u2019ll have all of the code for the fireworks animation.<\/p>\n
Go ahead and open that file and add the following code and then we\u2019ll go through it all:<\/p>\n
\/\/ Fireworks.tsx<\/span>\nimport<\/span> Button from<\/span> \"@mui\/material\/Button\"<\/span>;\nimport<\/span> Container from<\/span> \"@mui\/material\/Container\"<\/span>;\nimport<\/span> anime from<\/span> \"animejs\"<\/span>;\nimport<\/span> { useState, useRef, useEffect } from<\/span> \"react\"<\/span>;\nimport<\/span> \"..\/Fireworks.css\"<\/span>;\nimport<\/span> CustomizeForm from<\/span> \".\/CustomizeForm\"<\/span>;\n\nexport<\/span> interface CustomizationProps {\n  color<\/span>: string;\n  size: number;\n  duration: number;\n  sparkAmount: number[];\n  rows: number[];\n}\n\nconst<\/span> Fireworks = ()<\/span> =><\/span> {\n  const<\/span> [customizations, setCustomizations] =\n    useState <\n    CustomizationProps >\n    {\n      color<\/span>: \"bf6d20\"<\/span>,\n      size<\/span>: 450<\/span>,\n      duration<\/span>: 150<\/span>,\n      sparkAmount<\/span>: Array<\/span>.from(Array<\/span>(10<\/span>)),\n      rows<\/span>: Array<\/span>.from(Array<\/span>(3<\/span>)),\n    };\n\n  const<\/span> animation = useRef(null<\/span>);\n\n  const<\/span> handleClick = ()<\/span> =><\/span> {\n    \/\/ @ts-ignore<\/span>\n    animation.current.play();\n  };\n\n  useEffect(()<\/span> =><\/span> {\n    \/\/ @ts-ignore<\/span>\n    animation.current = anime.timeline({\n      direction<\/span>: \"alternate\"<\/span>,\n      duration<\/span>: customizations.duration,\n      autoplay<\/span>: false<\/span>,\n      easing<\/span>: \"easeInOutSine\"<\/span>,\n    });\n\n    \/\/ @ts-ignore<\/span>\n    animation.current.add(\n      {\n        targets<\/span>: `.dots li`<\/span>,\n        translateX<\/span>: anime.stagger(10<\/span>, {\n          grid<\/span>: [customizations.rows.length, customizations.sparkAmount.length],\n          from<\/span>: \"center\"<\/span>,\n          axis<\/span>: \"x\"<\/span>,\n        }),\n        translateY<\/span>: anime.stagger(10<\/span>, {\n          grid<\/span>: [customizations.rows.length, customizations.sparkAmount.length],\n          from<\/span>: \"center\"<\/span>,\n          axis<\/span>: \"y\"<\/span>,\n        }),\n        rotateZ<\/span>: anime.stagger([0<\/span>, 90<\/span>], {\n          grid<\/span>: [customizations.rows.length, customizations.sparkAmount.length],\n          from<\/span>: \"center\"<\/span>,\n          axis<\/span>: \"x\"<\/span>,\n        }),\n        delay<\/span>: anime.stagger(200<\/span>, {\n          grid<\/span>: [customizations.rows.length, customizations.sparkAmount.length],\n          from<\/span>: \"center\"<\/span>,\n        }),\n        easing<\/span>: \"easeInOutQuad\"<\/span>,\n      },\n      Math<\/span>.random() * customizations.duration\n    );\n  }, [customizations]);\n\n  return<\/span> (\n    <Container<\/span>><\/span>\n      <CustomizeForm<\/span>\n        customizations<\/span>={customizations}<\/span>\n        setCustomizations<\/span>={setCustomizations}<\/span>\n      \/><\/span>\n      <div<\/span> className<\/span>=\"player\"<\/span>><\/span>\n        {customizations.rows.map((_, i) => (\n          <ul<\/span> className<\/span>=\"dots\"<\/span>><\/span>\n            {customizations.sparkAmount.map((_, i) => (\n              <li<\/span>\n                style<\/span>={{<\/span>\n                  backgroundColor:<\/span> `#${customizations.color<\/span>}`,\n                  height:<\/span> `${customizations.size<\/span> + Math.random<\/span>() * 3<\/span>}px<\/span>`,\n                  maxHeight:<\/span> \"100<\/span>%\",\n                  maxWidth:<\/span> \"100<\/span>%\",\n                  width:<\/span> `${customizations.size<\/span>}px<\/span>`,\n                }}\n                key<\/span>={i}<\/span>\n              \/><\/span>\n            ))}\n          <\/ul<\/span>><\/span>\n        ))}\n        <Button<\/span> variant<\/span>=\"contained\"<\/span> color<\/span>=\"success\"<\/span> onClick<\/span>={handleClick}<\/span>><\/span>\n          Play\n        <\/Button<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/Container<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Fireworks;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start off by importing everything we need. There\u2019s some stuff coming from third-party packages and we have a couple of imports we\u2019ll define as we go through this app. You\u2019ll notice there\u2019s a custom stylesheet and another component called CustomizeForm<\/code>. We\u2019ll get to these a little later.<\/p>\n
For now, we\u2019ll move on and define the types for the options users will be able to change for the animation. They\u2019ll be able to play with the duration of the animation, the color of the fireworks, how many there are, and how big they are. Next, we start defining what happens in the component.<\/p>\n
We define a new state variable with some default values to define the initial layout of the fireworks. Then we define a reference to an element that the animation will render in. After that, the handleClick<\/code> method is defined which will play the animation any time a button is clicked.<\/p>\n
Now we\u2019re at the fun part. The useEffect<\/code> hook is where we actually define the animation. We set animation.current<\/code> to follow a timeline<\/code>. You can see where that customizations<\/code> state is being used to update the animation duration when a user changes it. Then we add an animation for each of the elements in the .dots<\/code> class.<\/p>\n
Next, we define what types of translations and rotations should happen to all of the fireworks elements. Every time the user updates a value, we\u2019ll be able to see the change in the fireworks.<\/p>\n
Finally, we get to define the render<\/code> method which has all of these elements we\u2019ve been talking about. Again, we don\u2019t have the CustomizeForm<\/code> component yet, but we will in just a bit. For the most part, we\u2019re making a grid the size that the user defines it. There are some CSS values that get changed dynamically and the play button. Then we\u2019re done with the Fireworks<\/code> component!<\/p>\n
Now let\u2019s define some styles for those classes we have.<\/p>\n
Add the CSS<\/h3>\n
In the root of the app, add a new file called Fireworks.css<\/code>. Then add the following code inside it:<\/p>\n
\/* Fireworks.css *\/<\/span>\n.player<\/span> {\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  justify-content<\/span>: center;\n  align-items<\/span>: center;\n}\n\n.dots<\/span> {\n  display<\/span>: flex;\n  align-items<\/span>: center;\n  list-style<\/span>: none;\n  height<\/span>: 100px<\/span>;\n  padding<\/span>: 0<\/span>;\n  margin-top<\/span>: 30px<\/span>;\n  width<\/span>: 100%<\/span>;\n}\n\n.dots<\/span> li<\/span> {\n  border-radius<\/span>: 2px<\/span>;\n  margin<\/span>: 0<\/span> 2px<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
These are the classes we defined on the grid in our Fireworks<\/code> component. They clean up some container configurations that can be done with MUI, but can be easier to implement with plain CSS. Those were the only styles we needed so we\u2019re good to go here.<\/p>\n
Get user input<\/h3>\n
Now let\u2019s make that CustomizeForm<\/code> component that lets users make changes to the fireworks. In the components<\/code> folder, add a new file called CustomizeForm.tsx<\/code>. Add the following code to this file:<\/p>\n
\/\/ CustomizeForm.tsx<\/span>\nimport<\/span> Container from<\/span> \"@mui\/material\/Container\"<\/span>;\nimport<\/span> Stack from<\/span> \"@mui\/material\/Stack\"<\/span>;\nimport<\/span> TextField from<\/span> \"@mui\/material\/TextField\"<\/span>;\nimport<\/span> { CustomizationProps } from<\/span> \".\/Fireworks\"<\/span>;\n\ninterface CustomizeFormProps {\n  customizations<\/span>: CustomizationProps;\n  setCustomizations: (options: CustomizationProps<\/span>) =><\/span> void<\/span>;\n}\n\nexport<\/span> default<\/span> function<\/span> CustomizeForm<\/span>({\n  customizations,\n  setCustomizations,\n}: CustomizeFormProps<\/span>) <\/span>{\n  function<\/span> updateFireworks<\/span>(e: any<\/span>) <\/span>{\n    e.preventDefault();\n\n    const<\/span> { color, size, duration, sparkAmount, rows } = customizations;\n\n    const<\/span> newValues = {\n      color<\/span>: e.currentTarget.color.value || color,\n      size<\/span>:\n        e.currentTarget.size.value !== \"\"<\/span>\n          ? Number<\/span>(e.currentTarget.size.value)\n          : size,\n      duration<\/span>:\n        e.currentTarget.duration.value !== \"\"<\/span>\n          ? Number<\/span>(e.currentTarget.duration.value)\n          : duration,\n      sparkAmount<\/span>:\n        e.currentTarget.sparkAmount.value !== \"\"<\/span>\n          ? Array<\/span>.from(Array<\/span>(Number<\/span>(e.currentTarget.sparkAmount.value)))\n          : sparkAmount,\n      rows<\/span>:\n        e.currentTarget.rows.value !== \"\"<\/span>\n          ? Array<\/span>.from(Array<\/span>(Number<\/span>(e.currentTarget.rows.value)))\n          : rows,\n    };\n\n    setCustomizations(newValues);\n  }\n\n  return<\/span> (\n    <Container<\/span>><\/span>\n      <form<\/span>\n        onChange<\/span>={(e)<\/span> =><\/span> updateFireworks(e)}\n        style={{ marginBottom: \"24px\", marginTop: \"24px\", width: \"800px\" }}\n      >\n        <Stack<\/span> spacing<\/span>={2}<\/span>><\/span>\n          <TextField<\/span> id<\/span>=\"color\"<\/span> label<\/span>=\"Color\"<\/span> variant<\/span>=\"standard\"<\/span> name<\/span>=\"color\"<\/span> \/><\/span>\n          <TextField<\/span> id<\/span>=\"size\"<\/span> label<\/span>=\"Size\"<\/span> variant<\/span>=\"standard\"<\/span> name<\/span>=\"size\"<\/span> \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"sparkAmount\"<\/span>\n            label<\/span>=\"Number of sparks\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"sparkAmount\"<\/span>\n          \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"rows\"<\/span>\n            label<\/span>=\"Number of firework rows\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"rows\"<\/span>\n          \/><\/span>\n          <TextField<\/span>\n            id<\/span>=\"duration\"<\/span>\n            label<\/span>=\"Duration\"<\/span>\n            variant<\/span>=\"standard\"<\/span>\n            name<\/span>=\"duration\"<\/span>\n          \/><\/span>\n        <\/Stack<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    <\/Container<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is a basic form with some input fields that triggers a state change. We import the packages like usual and we also import a type from the Fireworks<\/code> component to define the options users change. Then we define the props this component expects which are the state variable and method we made in the Fireworks<\/code> component.<\/p>\n
Next is the component itself. It looks like a lot more is happening than it really is. The updateFireworks<\/code> function is getting the form values and defaulting to the existing customizations<\/code> values if users do change them. Then it updates the state which will re-render the Fireworks<\/code> elements with these new values.<\/p>\n
At the end, we have the form<\/code> with the five options users can change for their fireworks. Any time a value is changed, it triggers a form event to call the updateFireworks<\/code> function with the new values. That\u2019s all for the user form! Now let\u2019s make the last update to show all of this work in the browser.<\/p>\n
Update the App.tsx<\/code> file<\/h3>\n
Open App.tsx<\/code> and delete everything out of it. This is where we\u2019re going to show our fireworks and the form in action. Add the following code to the file:<\/p>\n
\/\/ App.tsx<\/span>\nimport<\/span> Fireworks from<\/span> \".\/components\/Fireworks\"<\/span>;\n\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> <Fireworks<\/span> \/><\/span><\/span>;\n}\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now all of that behind-the-scenes work will finally be shown to users. If you run the app with npm start<\/code>, you should see something like this now:<\/p>\n
\"finished<\/p>\n
That\u2019s it! Now we\u2019re done with this little fireworks animation and you can start diving deeper into this library.<\/p>\n
Finished code<\/h2>\n
You can check out all of the code in the qr-card<\/code> folder of this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cpedantic-babbage-hb0pw6\u201d\nid=\u201cpedantic-babbage-hb0pw6\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
There are several good animation packages out there for JavaScript apps like, three.js<\/a>, velocity.js<\/a>, and GSAP<\/a>. It doesn\u2019t hurt to do a little research into all of them if you know you\u2019re going to be working with browser animations. Most of them have great documentation and examples so you should be able to get up and running with any of them.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28511,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,246,371],"class_list":["post-28510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nCreate a Fireworks Animation in React<\/title>\n<meta name=\"description\" content=\"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Fireworks Animation in React\" \/>\n<meta property=\"og:description\" content=\"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-28T10:19:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2017\" \/>\n\t<meta property=\"og:image:height\" content=\"3024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Fireworks Animation in React\",\"datePublished\":\"2022-06-28T10:19:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\",\"name\":\"Create a Fireworks Animation in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA\",\"datePublished\":\"2022-06-28T10:19:45+00:00\",\"description\":\"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA\",\"width\":2017,\"height\":3024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Fireworks Animation in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Fireworks Animation in React","description":"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Create a Fireworks Animation in React","og_description":"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-28T10:19:45+00:00","og_image":[{"width":2017,"height":3024,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/"},"author":{"name":"","@id":""},"headline":"Create a Fireworks Animation in React","datePublished":"2022-06-28T10:19:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","keywords":["Guest Post","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/","name":"Create a Fireworks Animation in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","datePublished":"2022-06-28T10:19:45+00:00","description":"You can do a lot of interesting animations in the browser and still have a performant app. There are plenty of libraries that help you handle this and we're going to look at one called anime.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","width":2017,"height":3024},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-fireworks-animation-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Fireworks Animation in React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924250\/Web_Assets\/blog\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7\/02e52199fed3ade5648f8f799e8d008f564524e7-2017x3024-1_28511ef9b7.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28510"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28510\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28511"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}