Animation.js - is a small library for animating HTML elements.
npm install @olton/animation
Style
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
#field {
width: 500px;
height: 500px;
border: 1px solid #1e2128;
position: relative;
}
#ball {
width: 64px;
height: 64px;
border-radius: 50%;
background: red;
position: absolute;
background: url("ball.svg") center no-repeat;
background-size: cover;
}
Html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="field">
<div id="ball"></div>
</div>
<script src="index.js" type="module"></script>
</body>
</html>JavaScript
import {animate} from "@olton/animation"
const field = document.querySelector(".wrapper");
const w = field.clientWidth, h = field.clientHeight;
const ball = document.querySelector(".ball");
// Move ball left
animate({
el: ball,
draw: {
left: [0, w - ball.clientWidth]
},
dur: 2000,
ease: "easeOutQuad",
loop: true
});
// Drop ball down
animate({
el: ball,
draw: {
top: [0, h - ball.clientHeight]
},
dur: 2000,
ease: "easeOutBounce",
loop: true
});
// Rotate ball
animate({
el: ball,
draw: {
rotate: [0, 360]
},
dur: 1200,
loop: true
});This software is free to use under the MIT license. See the LICENSE file for license text and copyright information.