cutest-animations

Cute Animations is a CSS & JS library for web on scroll/load animations.

The package containes animations that will be render once the component entered the user's viewport.

All the animations are customizables.

Install 📖

Install the package.

• npm

npm install cutest-animations

Implementation

• Css stylesheet link.

<link rel="stylesheet" href="node_modules/cutest-animations/src/animations.css">

• JS link.

<script src="node_modules/cutest-animations/src/index.js"></script>

Usage ⚙️

Examples.

<h1 data-animate="fade-bottom" data-animate-duration="1000" data-animate-timing="ease-in" 
    data-animate-delay="250">
    Hello world
</h1>

<div data-animate="fade-top-left" data-animate-duration="1000" data-animate-timing="ease" 
    data-animate-delay="500">
    Cute Ease-in Fade top with 500ms delay animation
</div>

<div data-animate="zoom-out" data-animate-duration="1000" data-animate-timing="ease-in-out" 
    data-animate-delay="750">
    Cute Ease-in-out Zoom out with 750ms delay animation
</div>

• By default, duration and delay will be render in miliseconds.

Animations available 🐰

• Blur.

    data-animate="blur"

• Fade in.

    data-animate="fade-in"

• Fade left.

    data-animate="fade-left"

• Fade right.

    data-animate="fade-right"

• Fade top.

    data-animate="fade-top"

• Fade bottom.

    data-animate="fade-bottom"

• Fade top right.

    data-animate="fade-top-right"

• Fade top left.

    data-animate="fade-top-left"

• Fade bottom right.

    data-animate="fade-bottom-right"

• Fade bottom left.

    data-animate="fade-bottom-left"

• Flip left.

    data-animate="flip-left"

• Flip right.

    data-animate="flip-right"

• Flip top.

    data-animate="flip-top"

• Flip bottom.

    data-animate="flip-bottom"

• Jump.

    data-animate="jump"

• Pulse

    data-animate="flip-right"

• Rotate left.

    data-animate="rotate-left"

• Rotate right.

    data-animate="rotate-right"

• Squish.

    data-animate="squish"

• Zoom in.

    data-animate="zoom-in"

• Zoom out.

    data-animate="zoom-out"

Customization 🎨

• On your CSS or SASS file add your custom animation.

    @keyframes custom-animation {
        from {
            background-color:red;
        }
        to {
            opacity: 100%
            background-color:blue;
        }

• On your element, add "data-animate" with your custom animation.

    <div data-animate="custom-animation">
        My custom animation
    </div>

Fixes

• cutes-animations still in early develop. Feel free to contact "agustinmusumeci" to fix any bug.