{"id":27989,"date":"2022-07-11T08:54:09","date_gmt":"2022-07-11T08:54:09","guid":{"rendered":"http:\/\/manage-image-animations-in-nuxtjs"},"modified":"2025-03-02T05:16:16","modified_gmt":"2025-03-02T13:16:16","slug":"manage-image-animations-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/manage-image-animations-in-nuxtjs\/","title":{"rendered":"Manage Image Animations in NuxtJS"},"content":{"rendered":"

Animations are a powerful way to add motion to the user interface. The moving of elements is possible with animations, as well as their appearance and disappearance.<\/p>\n

This post will teach us how to manage image animations using the Nuxt.js inbuilt animations element.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Code<\/a>S<\/a>andbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

GitHub repository<\/h2>\n

https:\/\/github.com\/Olanetsoft\/Manage-image-animations-in-Nuxt.js<\/a><\/p>\n

Getting Started with Nuxt.js<\/h1>\n

Nuxtjs<\/a> is the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale confidently.<\/p>\n

It is extensible, offering a robust module ecosystem and hooks engine that makes it simple to integrate our REST or GraphQL endpoints, favorite CMS, CSS frameworks, and many other third-party applications.<\/p>\n

Project Setup and Installation<\/h1>\n

To create a new project, we will use the command below to scaffold a new project:<\/p>\n

    npx create-nuxt-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A series of prompts will appear as a result of the command. Here are the defaults we recommend:<\/p>\n
\"Manage<\/p>\n
The command creates a Nuxt.js project with TailwindCSS called video-ad-nuxtjs<\/code>.<\/p>\n
Next, we navigate to the project directory and start the development server using the command below.<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && yarn dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We proceed to install the @nuxtjs\/cloudinary<\/a> dependency with:<\/p>\n
    npm<\/span> install<\/span> @nuxtjs<\/span>\/cloudinary\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Configuring Cloudinary in Nuxt.js<\/h1>\n
First, we need to modify the nuxt.config.js<\/code> file by adding @nuxtjs\/cloudinary<\/code> as a module in the modules section:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>, \/\/add this<\/span>\n      ],\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to configure Cloudinary by adding a cloudinary<\/code> section below the modules<\/code> section as shown below:<\/p>\n
    modules: [\n        '@nuxtjs\/cloudinary'<\/span>,\n      ],\n    \n    \/\/ add this<\/span>\n    cloudinary<\/span>: {\n        cloudName<\/span>: '<your-cloud-name>'<\/span>,\n        useComponent<\/span>: true<\/span>,\n    },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Building the Image Animations<\/h1>\n
We can start building the image animations with our project fully set up and configured.<\/p>\n
Inside the index.vue<\/code> file let\u2019s update it with the following code snippet to set up our layout for the project.<\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/dc0639196babd4eb602b35e87d7a3c63<\/a><\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/dc0639196babd4eb602b35e87d7a3c63<\/a><\/p>\n
Let\u2019s open our browser, we should see something similar to the image below.<\/p>\n
\"Manage<\/p>\n
In the following section, we will implement how to manage image animations in Nuxt.js using the Class-based Animations<\/code>, Built-in Transition (Toggle & Fade)<\/code>,  CSS Transitions (Slide & Fade)<\/code>,  CSS Animations (Bounce)<\/code>, and Custom Transition Classes<\/code>.<\/p>\n
Class-Based Animations<\/strong><\/p>\n
We can start animations for components that aren\u2019t entering or leaving the DOM by dynamically adding a CSS class with the following code snippet:<\/p>\n
    <template<\/span>><\/span>\n      <div<\/span>\n        class<\/span>=\"relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"max-w-4xl mx-auto sm:px-6 lg:px-8 mb-8\"<\/span>><\/span>\n          \/\/...\n          <div<\/span> class<\/span>=\"mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6\"<\/span>><\/span>\n            <h2<\/span> class<\/span>=\"text-lg leading-6 font-medium text-gray-900\"<\/span>><\/span>\n              Class-based Animations\n            <\/h2<\/span>><\/span>\n    \n            <!-- Update the div class --><\/span>\n            <div<\/span> :class<\/span>=\"{ shake }\"<\/span>><\/span> \n              <button<\/span>\n                @click<\/span>=\"shake = !shake\"<\/span> \/\/ Add<\/span> this<\/span>\n                \/\/...<\/span>\n              ><\/span>\n                Click me (Shake)!\n              <\/button<\/span>><\/span>\n    \n              <!-- Add this --><\/span>\n              <cld-image<\/span>\n                public-id<\/span>=\"\/samples\/people\/boy-snow-hoodie.jpg\"<\/span>\n                class<\/span>=\"mt-3\"<\/span>\n              ><\/span>\n              <\/cld-image<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n          \/\/...\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      name<\/span>: \"IndexPage\"<\/span>,\n      data() {\n        return<\/span> {\n          shake<\/span>: false<\/span>,\n        };\n      },\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above, we;<\/p>\n
The useComponent<\/code> flag set to true<\/code> lets us use the built-in Cloudinary components. Our cloud name<\/code> is obtained from our Cloudinary dashboard<\/a>.<\/p>\n
Nuxt.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/a><\/p>\n
TailwindCSS<\/a> is a CSS framework containing a lot of classes to help us customize our website\u2019s style.<\/p>\n