animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.14k stars 16.24k forks source link

Animation intensity #1695

Closed timyourivh closed 4 months ago

timyourivh commented 9 months ago

Is your feature request related to a problem? Please describe.

I would love to control the intensity of some of the animations. This would mostly be relevant for the "Attention seeker" animations as the others may not benefit from a variable intensity.

Describe the solution you'd like.

It would be nice to have it implemented the same way you're able to control the duration and repeats. Using classes or overriding a CSS variable using a class.

Describe alternatives you've considered.

Overwriting the default animation (workaround)

:root {
    /* Default intensity*/
    --animate-intensity: 1;
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(
            /* 1.05 is the default value, the intensity should be calculated to be appropriate for the animation */
            calc(1.05 * var(--animate-intensity)), 
            calc(1.05 * var(--animate-intensity)),
            calc(1.05 * var(--animate-intensity))
        );
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

This allows me to overwrite the intensity of the animation if needed. Of course it's not perfect but it does the job for me.

Additional Context

If this gets implemented it would make this package extremely flexible and customizable!

Treat this FR as a nice to have as it does not solve any issues.

Kedarnath-Rothe commented 8 months ago

Pease assign this issue to me

eltonmesquita commented 4 months ago

Duplicated #1009