Kevin Powell - Community•14mo ago

Stripe Arrow Animation

So stripe.com has a little arrow animation (along with the dropdown) when hovering on a button which is from the bottom to top. I want to do the same stuff, with Tailwind. For now I have the code for making it from left to center

@layer components {

  .dropdown-1 {
    @apply absolute flex top-1 -left-48 group-hover:opacity-100 group-hover:translate-y-5 transition group-hover:visible 
           duration-[350ms] ease-in-out invisible min-w-[550px] transform opacity-0 
  }

  .arrow {
    @apply absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]
  } 
}

@layer components {

  .dropdown-1 {
    @apply absolute flex top-1 -left-48 group-hover:opacity-100 group-hover:translate-y-5 transition group-hover:visible 
           duration-[350ms] ease-in-out invisible min-w-[550px] transform opacity-0 
  }

  .arrow {
    @apply absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]
  } 
}

I have no time for setting up some live code, please try fix to & let me know. This should be simple and straightforward nothing too much complicated

32 Replies

vince•14mo ago

It would help if you made a minimal reproducible example in codepen or codesandbox

4ngel_._•14mo ago

cant these platforms literally sucks

4ngel_._•14mo ago

@vince https://playcode.io/1582428

PlayCode.io

Tailwind CSS Playground

Try this online Tailwind CSS Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

4ngel_._•14mo ago

Sent full code, hover on the solution button

Mannix•14mo ago

you probably want to change

<div className="absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]">

<div className="absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]">

<div className="absolute origin-center w-10 h-10 bg-white rotate-45 transition-transform transform translate-y-5 group-hover:translate-y-0 translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]">

<div className="absolute origin-center w-10 h-10 bg-white rotate-45 transition-transform transform translate-y-5 group-hover:translate-y-0 translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]">

4ngel_._•14mo ago

are you able to delete it @Mannix

Mannix•14mo ago

you don't want to transalate x on hover but translate y 😉

4ngel_._•14mo ago

yeh tried that and didnt work, trying with the code u sent me its working but its not working

Mannix•14mo ago

nice so its working but it's not

4ngel_._•14mo ago

i slowed down the animation

4ngel_._•14mo ago

isn't translate-y-0 group-hover:translate-y-5

Mannix•14mo ago

it working in the playcode thingy

4ngel_._•14mo ago

yeah

Mannix•14mo ago

first you want to hide it and then on hover show it so do first part first

4ngel_._•14mo ago

wtf

Mannix•14mo ago

do the first part and place the arrow below the dropdown box or under i should say put hover in dev tools on that li element so the dropdown shows up then figure out what you need to do to hide the arrow under that dropdown

4ngel_._•14mo ago

As you can see the arrow is goes from the bottom to top

4ngel_._•14mo ago

figured out a way translate-y-1 group-hover:translate-y-0

Mannix•14mo ago

you are translating the dropdown on hover and they do not

4ngel_._•14mo ago

wtf?

Mannix•14mo ago

in playcode you have group-hover:translate-y-5 on dropdown and it should be just translate-y-5

4ngel_._•14mo ago

yes but that doesnt 'hide' the bottom in my code

Mannix•14mo ago

why is your code in the playcode different from your actual project ??

4ngel_._•14mo ago

idk

Mannix•14mo ago

just use the code from playcode in your project then

4ngel_._•14mo ago

no its different it uses components

Mannix•14mo ago

also i would add transalte-y-4 on the dropdown if you have group-hover:translate-y-5 already on it so the translate is very minimal

4ngel_._•14mo ago

anyways this is kinda tricky i want to do this animation

Mannix•14mo ago

if you do that your are pretty close to what stripe has

4ngel_._•14mo ago

. @vince

Gaming

Programming

Stripe Arrow Animation