1.1.6 • Published 2 months ago

cutest-animations v1.1.6

Weekly downloads
-
License
ISC
Repository
github
Last release
2 months ago

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>
  • 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.
1.1.6

2 months ago

1.1.5

2 months ago

1.1.3

2 months ago

1.1.2

2 months ago

1.1.1

2 months ago

1.1.0

2 months ago