About The Project

This project has been made as a school project to learn how to publish a npm package and how to follow some open source guidelines.

Built With

Here are the main technologies used in this project:

Getting Started

Installation

You'll need to have npm or yarn on your machine to install the package.

• npm

npm install animated-card

• yarn

yarn install animated-card

Usage

To use animated cards, simply import the component and use it in the javascript file that suits your needs.

import AnimatedCard from 'animated-card/dist'

It will automatically register the component.

You can then use it in your html file like this:

...
    <script src="./index.js" type="module"></script>
</head>

<animated-card animations="[...]">
  <div>
    <p>Hello world!</p>
  </div>
</animated-card>
...

The animations property follows this pattern: event:animation:element(optional), event:animation, ...

The element field stands for the element that will trigger the animation, the animation will always be applied to the animated-card element.

The currently available animations are:

• bounce
• flip
• rotate

They can be applied on all events that can be binded on a dom element.

Example

<animated-card animations="rotate:click,flip:mouseleave,bounce:load:window">
  <div>
    <img src="https://avatars.githubusercontent.com/u/67747327?v=4" />
  </div>
</animated-card>

Roadmap

• [ ] Add a linter
• [ ] Add more animations
• [ ] Make the animations customizable
• [ ] Add tests
• [ ] ...

See the open issues for a full list of proposed features (and known issues).

Contributing

A CONTRIBUTING.md file is available in the repository, please read it before contributing.

License

Distributed under the MIT License. See LICENSE.txt for more information.

You'll need to pay the GSAP license if your project has paid options.

(back to top)