Exploring the combination of Tailwind CSS variants with Framer Motion capabilities

Is it possible to integrate tailwind css classes with framer motion objects effectively?

const variant = {
    hidden: {
      'w-0'
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping:30,
      }
    }
  }

  return (
    <div className='flex relative w-full h-full'>

      <button className='absolute z-40 top-0 left-0 origin-left bg-white rounded-lg px-6 py-2'>Open</button>

      <motion.div variants={variant} initial="hidden" animate="visible"  className="flex absolute bg-gray-100 top-0 bottom-0 ">
        some
      </motion.div>
      

    </div>
  )

In the provided example, a question is raised about using any tailwind CSS class in the "hidden" property. The attempted approach with "w-0" did not yield the desired result.

cssreactjstailwind-cssframer-motion

Answer №1

Do you want to achieve this with the help of twin.macro?

    import tw from 'twin.macro'

    const variant = {
    hidden: {
      tw`w-0`
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping:30,
      }
    }
  }

  return (
    <div className='flex relative w-full h-full'>

      <button className='absolute z-40 top-0 left-0 origin-left bg-white rounded-lg px-6 py-2'>Open</button>

      <motion.div variants={variant} initial="hidden" animate="visible"  className="flex absolute bg-gray-100 top-0 bottom-0 ">
        some
      </motion.div>
      

    </div>
  )

Answer №2

Utilize Tailwind CSS to generate custom variables for seamless integration with Framer Motion, allowing you to easily adjust styles based on breakpoints.

export function CustomComponent(){
    return (
        <div className='flex relative w-full h-full'>
            <button className='absolute z-40 top-0 left-0 origin-left bg-white rounded-lg px-6 py-2'>
                Open
            </button>
            <motion.div
                className="flex absolute top-0 bottom-0 bg-slate-600 h-40 [--width-from: 0px] max-sm:[--width-to:200px] [--width-to:600px]"
                variants={{
                    hidden: {
                        width: "var(--width-from)",
                    },
                    visible: {
                        width: "var(--width-to)",
                        transition: {
                            type: 'spring',
                            stiffness: 170,
                            damping: 30,
                            duration: 2,
                        }
                    }
                }}
                initial="hidden"
                animate="visible">
                Content goes here
            </motion.div>
        </div>
    );
}

Answer №3

Regrettably, I believe achieving this may not be possible. The most effective approach is to follow these steps:

let variation = {
    hidden: {
      // Adjust width property
      width: 0
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping: 30,
      }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React (Next.js), the act of replacing a file is performed instead of adding a file

I kindly request a review of my code prior to making any changes. const test = () => { const [files, setFiles] = useState ([]); //I believe I need to modify the following statement. const handleFile = (e) => { const newFiles = [] for (let i= ...

javascriptreactjsfilenext.js

Tips for utilizing 'toHaveClass' to find a partial match in Jest?

When I assign the class success to an element, React-Mui appends additional text to it in the DOM, such as mui-AbcXYZ-success. This causes my test using the code snippet below to fail: expect( getByTestId('thirdCheck')).toHaveClass("success ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

A guide on assigning a state variable to a dynamically generated component within a React application

I need to display user data from an array and have a button for each watchlist that deletes it. Although the backend is set up with a function deleteWatchlist, I am facing an issue in setting the state of the watchlistName for each watchlist after mapping ...

javascriptreactjsnext.jsstate

issue retrieving data from live website created with next.js

Hello, I've exhausted all possible avenues to identify the cause of the error occurring on my live website built with NEXTJS. I have observed that this error only occurs when I reload the website. It's worth noting that I can successfully login ...

javascriptreactjsmongodbnext.jsnext-auth

Exploring the Power of NextJS, Apollo, and WPGraphQL for Efficiently Handling Large Datasets

Attempting to retrieve more than 100 records for a WPGraphQL query using Apollo during getStaticProps. Jason from WPGraphQL suggested utilizing pagination and combining the results into a new Array (or Object?). The problem arises when trying to combine t ...

reactjsgraphqlnext.jsapollowp-graphql

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Looking at this Bootstrap example page, I noticed a small issue with the nav-justified navigation. When the window is minimized, it transitions correctly to a mobile version. However, when the window is maximized again, the buttons remain in the mobile for ...

javascriptjqueryhtmlcsstwitter-bootstrap

I was baffled by the sudden closure of the connection and couldn't determine the reason behind it

While trying to post data to the wordpress api, I encountered an issue with a closed connection. It was working initially, but now I'm unsure of what went wrong. handleSignIn = () => { const post = { "email" : this.state.email, ...

reactjsaxioswordpress-rest-api

How can I use TailwindCSS in NextJS to remove the "gap" className from a component?

Currently, I am working on button components in NextJS with Tailwindcss and I am encountering a problem with some variants. Everything works fine, except when I remove the children (button text), I notice something strange that I can't quite figure ou ...

javascriptcssreactjsnext.jstailwind-css

While creating a NodeJS backend to complement a ReactJS frontend, I am continuously encountering a 500 error

I've been testing my NodeJS backend with Insomnia and it's working perfectly fine there. However, whenever I try to access the frontend, I keep getting a 500 error. It's puzzling because the endpoint is functioning correctly in the testing p ...

javascriptnode.jsreactjsexpressbackend

The TypeScript Type inside the Node Module Doesn't Seem to Be Functioning

In my React project, I am using the material-ui@next library along with typescript. Below is the code snippet that I have written: <CardMedia image={item.image_url} style={{ width: 238, height: 124.5 }} /> However, when I try to compile this code, ...

reactjstypescriptmaterial-ui

Creating a continuous loop animation with CSS hover state

This piece of code creates an interesting effect when the text is hovered over. The slight shakiness adds a cool touch to it. However, this effect only occurs when the mouse is moved slowly; if the mouse remains stationary, the hover style takes precedence ...

jqueryhtmlcss

Positioning divs next to each other in CSS and setting the width of the second

I am attempting to position two divs next to each other. The initial one is 200x200 pixels and the second one should be positioned 10 pixels to the right of the first one. The second div has a height of 200 pixels, and its width needs to extend all the way ...

css

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

jqueryhtmlcssresponsive-designmedia-queries

What is the best way to transfer the src module into the public folder in a React project

When utilizing Firebase Cloud Messaging in my React application, I need to place the firebase-messaging-sw.js file in the public folder. Within this file, there is a function defined for onBackgroundMessage, which I want to access from my module and use t ...

reactjsfirebase-cloud-messaging

Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

I'm aiming to create an animated effect using jQuery that replicates the motion in this GIF. I experimented with CSS3 animation keyframes, but the result was not as clean and polished as I would like. If there is a simpler way to achieve this effect u ...

jquerycss

I am interested in retrieving document information from Firebase

/* eslint-disable indent */ import React, { useEffect, useState } from 'react'; import { Alert, } from 'react-native'; import firebase from 'firebase'; // import { useIsFocused } from '@react-navigation/native'; im ...

javascriptreactjsreact-nativegoogle-cloud-firestoreexpo

ReactJS does not display pagination numbers

I am facing an issue with setting up pagination for a blog I am building using reactjs, graphql, and nextjs. While the react hooks are functioning properly, the page numbers are not showing up on the screen. I have checked the code multiple times but canno ...

reactjsnext.jsgraphqlpaginationtailwind-css

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover