{"id":8355,"date":"2024-11-21T22:28:30","date_gmt":"2024-11-21T16:58:30","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8355"},"modified":"2024-11-21T22:28:35","modified_gmt":"2024-11-21T16:58:35","slug":"including-animations-to-a-react-project","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/","title":{"rendered":"Including Animations to a React Project"},"content":{"rendered":"\n

Introduction<\/strong>:<\/p>\n\n\n\n

Animations play an important role in modern web applications. They enhance the user experience by making the interfaces more intuitive and adding a sense of interactivity. In React Projects animations can be used to transition elements smoothly, indicate important actions, or create visually appealing effects that will engage users. There are variety of tools to incorporate animations. In this, we will see how to use Aceternity UI components to include animations in react project.<\/p>\n\n\n\n

Aceternity UI<\/strong><\/p>\n\n\n\n

Aceternity UI is a new framework for styling websites in React and NextJS. This offers a bunch of starting UI components and the transitions are entirely made from existing libraries such as Tailwind CSS and framer-motion. They provide the source code and example of each component, so that users can choose and customize the component they want to use. <\/p>\n\n\n\n

It is very simple to use. We can download the libraries and start using.<\/p>\n\n\n\n

Installation steps:<\/strong><\/p>\n\n\n\n

Step 1: Create a react project<\/p>\n\n\n\n

To create a react project using CLi, we can use the following command.<\/p>\n\n\n\n

npx create-react-app demoAnimation –template typescript<\/em><\/p>\n\n\n\n

Here demoAnimation is the project name. Next we have to enter into the project folder.<\/p>\n\n\n\n

cd demoAnimation<\/em><\/p>\n\n\n\n

Step 2: Install Tailwind CSS<\/strong><\/p>\n\n\n\n

The next step is we have to install the dependency that requires for animation which is tailwind CSS. It can be installed using a command in terminal.<\/p>\n\n\n\n

npm install -D tailwindcss postcss autoprefixer<\/em><\/p>\n\n\n\n

After installing we have to initiate it, by using the command:<\/p>\n\n\n\n

npx tailwindcss init -p<\/em><\/p>\n\n\n\n

Step 3: Create tailwind.config.js<\/strong><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

We have to create a tailwind.config.js file and paste this code in that file. This can be obtained from the official documentation of aceternity UI.<\/p>\n\n\n\n

@tailwind base;
@tailwind components;
@tailwind utilities;<\/em><\/p>\n\n\n\n

Next step is we have to include these lines in index.css file of our project. <\/p>\n\n\n\n

Now the project is ready to be used for animations.<\/p>\n\n\n\n

For using a component, we have to obtain the code of that particular component and create the file. Then we can use that component in the file. <\/p>\n\n\n\n

Here we can see the example for Moving border component. <\/p>\n\n\n\n

Step 1: <\/p>\n\n\n\n

We have to create a file in our project and use that as component. We can get the code from official documentation of aceternity.<\/p>\n\n\n\n

Step 2: <\/p>\n\n\n\n

we can call the component and use it in project.<\/p>\n\n\n\n

Ex:<\/p>\n\n\n\n

<Button
variant=”contained”
className=”bg-white dark:bg-slate-900 text-black dark:text-white border-neutral-200 dark:border-slate-800″> Click me <\/Button><\/p>\n\n\n\n

We can see the button with moving border.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Conclusion:<\/p>\n\n\n\n

In this blog, we got to know about animation and how to use aceternity UI components for better animation in react projects.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction: Animations play an important role in modern web applications. They enhance the user experience by making the interfaces more intuitive and adding a sense of interactivity. In React Projects animations can be used to transition elements smoothly, indicate important actions, or create visually appealing effects that will engage users.… Continue Reading Including Animations to a React Project<\/span><\/i><\/a><\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":{"0":"post-8355","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Introduction: Animations play an important role in modern web applications. They enhance the user experience by making the interfaces more intuitive and adding a sense of interactivity. In React Projects animations can be used to transition elements smoothly, indicate important actions, or create visually appealing effects that will engage users.… Continue Reading Including Animations to a React Project\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-21T16:58:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-21T16:58:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1110\" \/>\n\t<meta property=\"og:image:height\" content=\"877\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Keerthana P\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keerthana P\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/\"},\"author\":{\"name\":\"Keerthana P\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\"},\"headline\":\"Including Animations to a React Project\",\"datePublished\":\"2024-11-21T16:58:30+00:00\",\"dateModified\":\"2024-11-21T16:58:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/\"},\"wordCount\":436,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/image-1024x809.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/image-1024x809.png\",\"datePublished\":\"2024-11-21T16:58:30+00:00\",\"dateModified\":\"2024-11-21T16:58:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/image.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/image.png\",\"width\":1110,\"height\":877},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/including-animations-to-a-react-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Including Animations to a React Project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\",\"name\":\"Keerthana P\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"caption\":\"Keerthana P\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/keerthana\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","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:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Introduction: Animations play an important role in modern web applications. They enhance the user experience by making the interfaces more intuitive and adding a sense of interactivity. In React Projects animations can be used to transition elements smoothly, indicate important actions, or create visually appealing effects that will engage users.… Continue Reading Including Animations to a React Project","og_url":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2024-11-21T16:58:30+00:00","article_modified_time":"2024-11-21T16:58:35+00:00","og_image":[{"width":1110,"height":877,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image.png","type":"image\/png"}],"author":"Keerthana P","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Keerthana P","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/"},"author":{"name":"Keerthana P","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa"},"headline":"Including Animations to a React Project","datePublished":"2024-11-21T16:58:30+00:00","dateModified":"2024-11-21T16:58:35+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/"},"wordCount":436,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image-1024x809.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/","url":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image-1024x809.png","datePublished":"2024-11-21T16:58:30+00:00","dateModified":"2024-11-21T16:58:35+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#primaryimage","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/11\/image.png","width":1110,"height":877},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/including-animations-to-a-react-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Including Animations to a React Project"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa","name":"Keerthana P","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","caption":"Keerthana P"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/keerthana\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-2aL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8355"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8355\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}