Prism Animation Library - React

Prism is an lightweight yet powerful Javascript library created for React To allow developers to produce tween animations on elements with any CSS and transform value.

Docs

Check out documentation for guides and a full API reference.

This project is open source and licensed under the MIT license. Check out the project on github

Install & Usage

npm install --save prism-animation

One function thats it. Simple isn’t it

prism(“.prism-test”, {
    translateX: 1000
    duration: 2000
})

Supported Props

Prism supports animation of all CSS attributes, transforms and colours.

prism(“.prism-test”, {
    translateX: 1000
    duration: 2000
})

React implementation

Prism also takes advantage of reacts use of JXS to provide an PrismComponent and inline Component version of the Prism Function.

This component creates an div element to incase all the child elements You wish to animate. This Component can also pass all default HTMLElement Props like onClick, Styles, className.

    <PrismComponent
    animation={{
      duration: 2000,
      easing: “easeOutCubic”,
      fontSize: “50px”,
      opacity: 1
    }}>
    <h1>Hello World</h1>
  </PrismComponent>

For all API references check out our documentation.

License

MIT © worksbyscott

Made by Worksbyscott