Sal.js for Tailwind CSS - generate responsive animation variants

sal.scss

/**
 * Settings
 */

$sal-animation-duration: 0.5s !default;
$sal-animation-delay: 0s !default;
$sal-animation-easing: ease !default;
$sal-slide-offset: 20% !default;
$sal-zoom-in-scale: 0.9 !default;
$sal-zoom-out-scale: 1.1 !default;
$sal-flip-rotate: 91deg !default;

/**
 * Easings
 */

$sal-easings: (
    linear: linear,
    ease: ease,
    ease-in: ease-in,
    ease-out: ease-out,
    ease-in-out: ease-in-out,

    ease-in-cubic: cubic-bezier(.55, .055, .675, .19),
    ease-out-cubic: cubic-bezier(.215, .61, .355, 1),
    ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1),

    ease-in-circ: cubic-bezier(.6, .04, .98, .335),
    ease-out-circ: cubic-bezier(.075, .82, .165, 1),
    ease-in-out-circ: cubic-bezier(.785, .135, .15, .86),

    ease-in-expo: cubic-bezier(.95, .05, .795, .035),
    ease-out-expo: cubic-bezier(.19, 1, .22, 1),
    ease-in-out-expo: cubic-bezier(1, 0, 0, 1),

    ease-in-quad: cubic-bezier(.55, .085, .68, .53),
    ease-out-quad: cubic-bezier(.25, .46, .45, .94),
    ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),

    ease-in-quart: cubic-bezier(.895, .03, .685, .22),
    ease-out-quart: cubic-bezier(.165, .84, .44, 1),
    ease-in-out-quart: cubic-bezier(.77, 0, .175, 1),

    ease-in-quint: cubic-bezier(.755, .05, .855, .06),
    ease-out-quint: cubic-bezier(.23, 1, .32, 1),
    ease-in-out-quint: cubic-bezier(.86, 0, .07, 1),

    ease-in-sine: cubic-bezier(.47, 0, .745, .715),
    ease-out-sine: cubic-bezier(.39, .575, .565, 1),
    ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),

    ease-in-back: cubic-bezier(.6, -.28, .735, .045),
    ease-out-back: cubic-bezier(.175, .885, .32, 1.275),
    ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)
);

/**
 * Core
 */

[data-sal] {
    transition-duration: var(--sal-duration, $sal-animation-duration);
    transition-delay: var(--sal-delay, $sal-animation-delay);
    transition-timing-function: var(--sal-easing, $sal-animation-easing);
}

@variants {

    /**
    * Delay
    */
    .sal-delay-0 {
        --sal-delay: 0s;
    }
    @for $i from 1 through 10 {
        .sal-delay-#{$i * 100} {
            --sal-delay: #{$i * 100}ms;
        }
    }

    /**
    * Duration
    */
    .sal-duration-0 {
        --sal-duration: 0s;
    }
    @for $i from 2 through 20 {
        .sal-duration-#{$i * 100} {
            --sal-duration: #{$i * 100}ms;
        }
    }

    /**
     * Easings
     */
    @each $key, $value in $sal-easings {
        .sal-#{$key} {
            --sal-easing: $value;
        }
    }

    /**
     * Animations
     */

    // Fade
    .sal-fade {
        opacity: 0;
        transition-property: opacity;
    }

    // Slide
    .sal-slide-up {
        opacity: 0;
        transition-property: opacity, transform;
        transform: translateY(var(--sal-slide-offset, $sal-slide-offset));
    }

    .sal-slide-down {
        opacity: 0;
        transition-property: opacity, transform;
        transform: translateY(calc(var(--sal-slide-offset, $sal-slide-offset) * -1));
    }

    .sal-slide-left {
        opacity: 0;
        transition-property: opacity, transform;
        transform: translateX(var(--sal-slide-offset, $sal-slide-offset));
    }

    .sal-slide-right {
        opacity: 0;
        transition-property: opacity, transform;
        transform: translateX(calc(var(--sal-slide-offset, $sal-slide-offset) * -1));
    }

    // Zoom
    .sal-zoom-in {
        opacity: 0;
        transition-property: opacity, transform;
        transform: scale(var(--sal-zoom-in-scale, $sal-zoom-in-scale));
    }

    .sal-zoom-out {
        opacity: 0;
        transition-property: opacity, transform;
        transform: scale(var(--sal-zoom-out-scale, $sal-zoom-out-scale));
    }

    // Flip
    .sal-flip-left {
        opacity: 1;
        backface-visibility: hidden;
        transition-property: transform;
        transform: perspective(2000px) rotateY(calc(var(--sal-flip-rotate, $sal-flip-rotate) * -1));
    }

    .sal-flip-right {
        opacity: 1;
        backface-visibility: hidden;
        transition-property: transform;
        transform: perspective(2000px) rotateY(var(--sal-flip-rotate, $sal-flip-rotate));
    }

    .sal-flip-up {
        opacity: 1;
        backface-visibility: hidden;
        transition-property: transform;
        transform: perspective(2000px) rotateX(calc(var(--sal-flip-rotate, $sal-flip-rotate) * -1));
    }

    .sal-flip-down {
        opacity: 1;
        backface-visibility: hidden;
        transition-property: transform;
        transform: perspective(2000px) rotateX(var(--sal-flip-rotate, $sal-flip-rotate));
    }
}

[data-sal].sal-animate,
body.sal-disabled [data-sal] {
    transform: none;
    opacity: 1;
}

// don't animate for users that prefer reduced motion
@media screen and (prefers-reduced-motion: reduce) {
    [data-sal] {
        transform: none !important;
        opacity: 1 !important;
    }
}