Next.js Discord

Discord Forum

Translate Animation

Unanswered
Clearly posted this in #help-forum
Open in Discord
ClearlyOP
I had a animation mockup, made by a site and it didn't tell me how to do it? I know It's TranslateX, Y but how do you actually do it?

              <div class="flex items-start bg-[#2d1b4e] p-6 rounded-xl opacity-100 transform-none">
                <div class="bg-[#ffeb3b] p-3 rounded-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="h-6 w-6 text-[#1a0b2e]"
                  >
                    <line x1="6" x2="10" y1="11" y2="11"></line>
                    <line x1="8" x2="8" y1="9" y2="13"></line>
                    <line x1="15" x2="15.01" y1="12" y2="12"></line>
                    <line x1="18" x2="18.01" y1="10" y2="10"></line>
                    <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path>
                  </svg>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-semibold mb-2 text-white">
                    Game Acquisition
                  </h3>
                  <p class="text-gray-300">
                    We acquire games from creators through our swift and
                    straightforward process.
                  </p>
                </div>

42 Replies

James4u
yeah adding hover:translate-x-2 transition-all to the root div classnames should work
here is the example I have for you
@Clearly check out the tailwind play link
@James4u yeah adding `hover:translate-x-2 transition-all` to the root div classnames should work
ClearlyOP
Is there something I'm missing here? Added that portion to my code, yet it's a solid block still?

              <div class="flex transform-none items-start rounded-xl bg-[#2d1b4e] p-6 opacity-100 transition-all hover:translate-x-2">
                <div class="bg-[#ffeb3b] p-3 rounded-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="h-6 w-6 text-[#1a0b2e]"
                  >
                    <line x1="6" x2="10" y1="11" y2="11"></line>
                    <line x1="8" x2="8" y1="9" y2="13"></line>
                    <line x1="15" x2="15.01" y1="12" y2="12"></line>
                    <line x1="18" x2="18.01" y1="10" y2="10"></line>
                    <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path>
                  </svg>
                </div>
                <div class="ml-4">
                  <h3 class="text-xl font-semibold mb-2 text-white">
                    Game Acquisition
                  </h3>
                  <p class="text-gray-300">
                    We acquire games from creators through our swift and
                    straightforward process.
                  </p>
it works https://play.tailwindcss.com/ZFPnM8zSX7
@James4u missing some closing tags???
ClearlyOP
Nope.
@Clearly Nope.
James4u
in your attached codebase!!!
@James4u it works https://play.tailwindcss.com/ZFPnM8zSX7
James4u
check out this. it's exactly the same as what you shared and what I provided before
what's wrong there?
@James4u in your attached codebase!!!
ClearlyOP
Yeah there's no errors, so I'd assume not?
James4u
@Clearly what's your problem here? don't you have animation when you hover?
ClearlyOP
Nope, it's stable.
ClearlyOP
There's noo animation.
James4u
🤦‍♂️
did you check this link? don't you get hover animation?
ClearlyOP
Yeah I get it there, but in my actual code, when I replace it there's nothing 😭
James4u
what's your actual code like???
copy paste the whole here
ClearlyOP
Here's the entire section; for those.
Probably missing a div in there, and such but 🤷 but regardless, tried adding on the animation, annd it doesn't work.
James4u
its working on the tailwind playground
@Clearly create a codesandbox for this
as it's working on the Tailwind playground
no way to help you with that
ClearlyOP
Is there some tailwind element, I need installed?
import axios from "axios";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import CountUp from "react-countup";
James4u
nope, it's not related
- inspect your browser
- point your div
- add hover state manually
and see if translate x applies
ClearlyOP
It's displaying like this by default; <div class="flex transform-none items-start rounded-xl bg-[#2d1b4e] p-6 opacity-100 transition-all hover:translate-x-2">
James4u
omg
I mean the computed styles - not class names
@James4u I mean the computed styles - not class names
ClearlyOP
Yeah I understand that, so that's why I'm thinking it may be an issue with how my parent divs are setup
Barbary Lion
@Clearly it’s a stretch but I optimized my computer once, and one of the settings I turned off was something to do with animations. This led to none of my animations working in the browser.
Barbary Lion
Ok welp worth a shot lol