patrykgulas/tailwind-hamburgers

Enable animation speed customization

Opened this issue · 2 comments

pindab0ter commented

First of all, love this package! I'm using it on https://hamana.nl (be sure to narrow it down to phone widths) if you want to see it being used in the wild, somewhere.

I would like to be able to customize the speed at which the animations happen, preferably both separately for both directions.

Unfortunately, I don't have any knowledge of Tailwind plugins, otherwise I would've given it a stab myself and put in a PR.

Do you think this is possible? And if so, would it be a lot of work?

patrykgulas commented

Hey @pindab0ter!
Thanks for the feedback, lovely cats on the site 🐱

Sorry for the late response 🤦 but I couldn't find enough time to maintain this repo. It's definitely possible, however I can't tell when it will exactly happen. Anyway, PRs welcomed 👐

Hope you were able to resolve your case so far 🤞

mazdel commented

Hi @pindab0ter. In my case, I add tailwindcss duration with an important mark (!) to override the animation speed into the hamburger outer, most inner, :after, and :before elements, though I had to manually adjust them to smoothen the animation.

here is the code on my case

<div
  className={`tham tham-e-squeeze tham-w-8 !duration-300 ${settings.isMenuOpen == MENU.OPEN ? "tham-active" : ""}`}
>
  <div className="tham-box">
    <div className="tham-inner bg-current !duration-400 before:!duration-400 after:!duration-400" />
  </div>
</div>

this is a great plugin btw,

  • 👍1