45 replies

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

KP-C

Kevin Powell - Community•3y ago•

45 replies

4ngel_._

Stripe Arrow Animation

@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

Stripe Arrow Animation

Similar Threads

Stripe Arrow Animation

Similar Threads

Similar Threads

Similar Threads