clarity-animation
Advanced tools
Install Clarity Animation with npm.
npm install clarity-animation
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.
npm install clarity-animation
Add a index.html file to the directory so it looks 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>
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>
);
}
}
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>
{
"target": {
x: 0,
y: 0
},
"properties":{
x: {
from: 0,
to: 100
},
y: {
from: 0,
to: 100
}
},
"duration": 1000,
"easing": "easeOutExpo"
}
{
"target": div,
"properties":{
backgroundColor: {
from: "rgba(255,255,0,1)",
to: "#ff0000"
}
},
"duration": 1000,
"easing": "easeOutExpo"
}
Observable Events
...
animation.observe("tick", function(){
console.log("tick");
});
...
## play( )
Plays the animation from its current position to the end.
```js
...
animation.play();
...
Pauses the animation.
...
animation.pause();
...
Restarts the animation from the beginning.
...
animation.restart();
...
## playToEndAsync( ):Promise
Plays the animation from its current position to the end, and returns a Promise. When the animation makes it to the end of the animation, the promise is resolved. If any other actions are taken on the animation the promise will not be fulfilled.
```js
...
animation.playToEndAsync();
...
Sends the animation in reverse from its current position to the beginning.
...
animation.reverse();
...
Sends the animation in reverse from its current position to the beginning. When the animation makes it to the beginning of the animation, the promise is resolved. If any other actions are taken on the animation the promise will not be fulfilled.
...
animation.reverseToEndAsync();
...
If you seek when the animation is stopped, it will not render. Use pause then seek instead.
animation.pause().seek(0.3);
Or use
animation.seek(0.3).render();
Use stop and seek if you don't want the viewer to know that animation is positioned to some other time then what is rendered.
...
// Seek to this percentage of the animation.
animation.seek(0.5);
...
...
// Go twice as fast
animation.setTimeScale(2);
...
...
var scale = animation.getTimeScale();
...
FAQs
Unopinionated animation library.
The npm package clarity-animation receives a total of 3 weekly downloads. As such, clarity-animation popularity was classified as not popular.
We found that clarity-animation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.