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 the package.
- npm
npm install cutest-animationsImplementation
- 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>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.
- 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"- 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>- cutes-animations still in early develop. Feel free to contact "agustinmusumeci" to fix any bug.