tailwindcss-hamburgers/animations/spin.js

Hamburger menus built with Tailwind CSS

module.exports = function({defaults, options, e}) {
    const offset = 0.4
    const offsetFactor = 1 - 2 * offset
    const originX = 100 * offsetFactor

    return (
        {
            [`.${e(`${options.prefix}spin`)}`]: {
                [`> .${e(`${options.prefix}inner`)}`]: {
                    transitionProperty: 'transform',
                    transitionDelay: "0.5s"
                },

                [`span.${e(`${options.prefix}bar`)}`]: {
                    transition: `transform 0.4s ${defaults.ease}, opacity 0.2s ${defaults.ease} 0.2s`,
                    '&:nth-child(1), &:nth-child(3)': {
                        top: 0,
                    },
                    '&:nth-child(1)': {
                        transform: 'rotate(0deg) translate3d(0,-300%,0)',
                        transformOrigin: `${originX}% 50%`
                    },
                    '&:nth-child(3)': {
                        transform: 'rotate(0deg) translate3d(0,300%,0)',
                        transformOrigin: `${originX}% 50%`
                    }
                },
                [`&.${e(`${options.prefix}active`)}`]: {

                }
            }
        }
    )
}