Need help with all-animation?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

all-animation
447 Stars 138 Forks 131 Commits 0 Opened issues

Description

All Animation.css is a set of nice and crazy css animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphases on your pages likes sliding controls and 3D efects...

Services available

!
?

Need anything else?

Contributors list

All Animation

All Animation.css is a set of nice and crazy css animations made with the purpose to bring life and interactions to your project. They are cross-browser animations which will give more emphases on your pages likes sliding controls and 3D efects...

You can view the website here -- We are going to change our layout soon

V3 is now ready to be used!

It's already on npm, but we're still improving our documentation and api.

New modules will also be released on the future, the first one will be:

  • [ ] all-animation/react 🥰🥰

How to use:

It's easy to use, let's see step by step:

Step 1, install the library as dependency

It's pretty straight forward:

npm install all-animation

or

sh
yarn add all-animation

Step 2, link the library into your project:

Currently there's thwo ways of linking all animation into your project:

Via SCSS imports:

In your main

scss
file of your project, just include the all-animation module, like:
// main.scss
@import "../node_modules/all-animation/scss/main"

After that you should be ready to use our library.

Loading only specific animations

In case you don't want to have the whole all-animations on your final bundle, you can import the specific animation which you want together with core all-animation dependencies:

// Core all-animation dependencies, like variables and mixins
@import "../node_modules/all-animation/scss/config/_config";

// The specific animation which you want to use // in this case "a-bomb" @import "../node_modules/all-animation/scss/modules/bomb/bomb"

Link directly via CSS file you can also download the css file and put it before closing the

 tag:

We also include the source maps of it, so you can have a better debugging visibility during development

Step 2, HTML:

Trigger class, go!

Step 3, jQuery (You can also use plain javascript):

$(".any-class").click(() =>{
 $("#animation").addClass("a-journal");
});

Optional

If you want to add the effect at some specified time, just place a timer:

Example, triggering an animation in a particular element after 2 seconds:

setTimeout(() =>{
 $("#animation").addClass("a-journal");
}, 2000);

Caution:

If you want to add some animation on an element that had another animation, or you want to restart the animation previously triggered, you have to remove the last animation and trigger the new one. Example:

 $("#animation").removeClass("a-journal").addClass("a-four-rock");

We have several classes for animations:

Specials:

  • a-dance
  • a-journal
  • a-pulse
  • a-pulse-slow
  • a-jamp
  • a-four-rock

Bounce:

  • a-enter-up-bounce
  • a-enter-down-bounce
  • a-enter-right-bounce
  • a-enter-left-bounce
  • a-scale-bounce
  • a-jump-bounce

Perspective:

For using the perspective animations, please add a parent container with a class

a-perspective
, like:
...

Some classes for

  • a-three-flip-right
  • a-three-flip-up
  • a-three-flip-down
  • a-flip-left-bounce
  • a-rotate-flip
  • a-flip-right-bounce

Fading Entrances:

  • a-flip-top
  • a-flip-left
  • a-flip-right
  • a-flip-bottom

Rotate:

  • a-rotate-flip-down
  • a-rotate-down-bounce
  • a-rotate-out

Agrecives:

  • a-flash-bang
  • a-bomb



Contributors:

If you want to contribute to our project, read the file: contributing.md 😊

Credits:

Clóvis Neto

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.