New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

Sign in Demo Install

Sign in Demo Install

clarity-animation

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

clarity-animation

Unopinionated animation library.

1.0.5
Source
npm

Version published: 8 years ago

Weekly downloads: 3; decreased by-66.67%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Getting Started with Clarity Animation

Install Clarity Animation with npm.

npm install clarity-animation

Use Cases

Because Clarity Animation uses UMD (Universal Module Declaration) it can work with a variety of technologies. It can be used with CommonJs, AMD, or SystemJs. Just decide which module system works for you and import clarity-animation. This also means that if you use transpilers like Babel or Typescript you can also use it.

Clarity Animation

npm install clarity-animation

After running the npm command, downloading requirejs , and adding a index.html file, the folder structure would look something like this.

* index.html
* node_modules
    * clarity-animation

Copy the contents of this example and paste it into the index.html file.

<html>
    <head>
        <title>Script Tag Exmaple</title>
        <style>
            .box {
                width: 100px;
                height:100px;
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>

        <div id="my-box" class="box"></div>

        <script src="./node_modules/clarity-animation/dist/main.js"></script>
        <script>
                var ElementAnimation = clarityAnimation.ElementAnimation;
                var box = document.querySelector("#my-box");

                var animation = new ElementAnimation({
                    target: box,
                    properties: {
                        backgroundColor: {
                            from: "rgba(0,0,0,0)",
                            to: "#ff0000"
                        }
                    },
                    duration: 10000,
                    easing: "easeOutExpo"
                });

                animation.playToEndAsync();
        </script>
    </body>
</html>

Clarity Animation with Reactjs

In the root of your Reactjs folder install Clarity Animation with npm.

npm install clarity-animation --save

Now that Clarity Animation is installed start using it in one of your components.

import React, { Component } from "react";
import { CssAnimation } from "clarity-animation";

const myStyles = {
    backgroundColor: "rgba(100,100,200,0.5)",
    width: "100px",
    height: "100px"
};

class MyComponent extends Component {
    constructor(props){
        super(props);

        var animation = new CssAnimation({
            target: myStyles,
            properties: {
                backgroundColor: {
                    from: myStyles.backgroundColor,
                    to: "#ff0000"
                }
            },
            duration: 10000,
            easing: "easeOutExpo"
        });

        animation.observe("tick", ()=>{
            this.forceUpdate();
        });

        this.animation = animation;
    }
    componentDidMount(){
        this.animation.playToEndAsync().then(()=>{
            console.log("Finished Animation");
        });
    }
    render(){

        return (
            <div style={myStyles}>
                Hello Animation!
            </div>            
        );

    }

}

Requirejs with Clarity Animation

npm install clarity-animation

After running the npm command, downloading requirejs , and adding a index.html file, the folder structure would look something like this.

- index.html
- require.js
- node_modules
    -clarity-animation

Copy the contents of this example and paste it into the index.html file.

<html>
    <head>
        <title>Using Animation</title>
    </head>
    <body>
        <script src="require.js"></script>
        <script>
            require(["./node_modules/clarity-animation/dist/main.js"], function(clarityAnimation){
                var CssAnimation = clarityAnimation.CssAnimation;

                var target = {
                    backgroundColor: "#123456"
                };

                var animation = new CssAnimation({
                    target: target,
                    properties: {
                        backgroundColor: {
                            from: target.backgroundColor,
                            to: "#ff0000"
                        }
                    },
                    duration: 1000,
                    easing: "easeOutExpo"
                });
                                    
                animation.observe("tick", function(){
                    document.body.style.backgroundColor = target.backgroundColor;
                });

                animation.playToEndAsync();
                });
        </script>
    </body>
</html>

Keywords

FAQs

What is clarity-animation?

Is clarity-animation popular?

Is clarity-animation well maintained?

Package last updated on 31 Jan 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Related posts