Skip to content

Instantly share code, notes, and snippets.

@lmuntaner

lmuntaner/app.js

Created April 29, 2022 12:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lmuntaner/d75bb1beb5ad817a8aeaa2ab0e6c4adc to your computer and use it in GitHub Desktop.
Save lmuntaner/d75bb1beb5ad817a8aeaa2ab0e6c4adc to your computer and use it in GitHub Desktop.
Download ZIP
Sluggish animations
Raw
app.js
// Long calculation
const getHighNumber = () => {
let x = BigInt(0);
for (let i = BigInt(0); i < BigInt(1_000_000); i++) {
x += i * i;
}
return x;
};
document.getElementById('sluggish').addEventListener('click', async () => {
console.log('start');
const x = getHighNumber();
console.log('end', x);
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="sluggish">Click me</button>
<div class="container">
<div class="box"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Raw
style.css
button {
margin: 1rem;
}
.container {
margin: 0 auto;
height: 300px;
width: 300px;
background: rgb(131,58,180);
border-radius: 5px;
position: relative;
}
.box {
background-color: #000;
width: 50px;
height: 50px;
border-radius: 5px;
position: absolute;
top: 10px;
left: 10px;
animation: move-performant 3s ease infinite;
}
@keyframes move-non-performant {
50% {
top: calc(300px - 60px);
left: calc(300px - 60px);
}
}
@keyframes move-performant {
50% {
transform: translate(calc(300px - 70px), calc(300px - 70px));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment