https://github.com/jakesidsmith/react-slik

React higher order component for Slik animations
https://github.com/jakesidsmith/react-slik

animation animation-library react slik tween tweening

Last synced: about 1 month ago
JSON representation

React higher order component for Slik animations

• Host: GitHub
• URL: https://github.com/jakesidsmith/react-slik
• Owner: JakeSidSmith
• License: mit
• Created: 2017-06-25T02:17:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-25T13:00:49.000Z (over 7 years ago)
• Last Synced: 2024-10-12T04:09:57.888Z (2 months ago)
• Topics: animation, animation-library, react, slik, tween, tweening
• Language: JavaScript
• Homepage: http://jakesidsmith.github.io/react-slik/
• Size: 200 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# React Slik [![CircleCI](https://circleci.com/gh/JakeSidSmith/react-slik.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/react-slik)

**React higher order component for [Slik](https://github.com/jakesidsmith/slik) animations**

## About

A library that wraps your React components, providing them with animation values as props when they update.

## Installation

Use npm to install react-slik.

```shell

npm install react-slik --save --save-exact

```

I'd recommend pinning to a specific version and using `--save-exact` and `--save` to add this to your package.json automatically.

## Getting started

1. Require react-slik in the file where you'll be animating.

    ```javascript

    import Slik from 'slik';

    import { animate } from 'react-slik';

    ```

1. Create your animations.

    ```javascript

    const animation = new Slik.Animation({from: 0, to: 1});

    ```

1. Create a component.

    ```javascript

    class Component extends React.Component {

      render () {

        const { scale } = this.props;

        return (

          


            Hello, World!

          

        );

      }

    }

    ```


1. Animate your component.

    ```javascript

    const options = {

      bind: 'update', // Default, update on all events

      startOnMount: true, // Default

      stopOnUnmount: true // Default

    };

    const AnimatedComponent = animate(Component, {scale: animation}, options);

    ```

1. Render your component.

    ```javascript

    

    ```