Repository files navigation

...Work in progress....

I'm creating this library to practice plain javascript and also because I'm always usingCSS animations in my projects, so I thought: "why not make my own animation library?" 😁

It provides an API to easily set and customize CSS animations using only Javascript.

Although the functionalities are all already working, I'm still making some changes, mainly to improve overall performance.

1. Copy the./js-css-animations/ directory to your project's folder

2. Link thejs-animations.css in your HTML file:

<linkrel="stylesheet"href="<path-to-js-directory>/js-css-animations/js-animations.css"/>

3. Import thejs-css-animations.js in your javascript file

importjsCssAnimationsfrom'./js-css-animations/js-css-animations.js';

4. All ready and set!

// Example of usagejsCssAnimations.init.slideUp({trigger:'.btn--slide-up',targetSelector:'.slide-this-content',staggerDelay:500,duration:'1s',start:()=>{jsCssAnimations.toggle('#anchor img','rotateDownCCW','rotateUp');},});

I'm working hard to provide a complete documentation for the library, with examples to cover all the functionalities.

You can access the documentation and some usage exampleshere .

The docs were generated with jsDoc andjsdoc-to-markdown and the documentation page is built withvitepress.Thanks to vitepress, theExamples section is reactive by using Vue components inside the markdown files, so you can play around with the examples and test different values for the animations options. 😉