Last active
November 24, 2023 14:41
-
-
Save juji/cd78373e6ec9c9e1f02ce7e3deb0959a to your computer and use it in GitHub Desktop.
create easeOutElastic tween in css keyframes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function easeOutElastic(x) { | |
const c4 = (2 * Math.PI) / 3; | |
return x === 0 | |
? 0 | |
: x === 1 | |
? 1 | |
: Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; | |
} | |
const increment = 0.001 | |
const data = { | |
keys: [], | |
values: [] | |
} | |
for(let i=0; i<=1;i+=increment){ | |
const key = `${ Math.round( i*10000 ) / 100 }%` | |
const value = `{ | |
transform: scale3d(${easeOutElastic(i)},${easeOutElastic(i)},1); | |
}` | |
const index = data.values.findIndex(v => v === value) | |
if(index === -1){ | |
data.keys.push(key) | |
data.values.push(value) | |
}else{ | |
data.keys[index] = data.keys[index]+','+key | |
} | |
} | |
const lastKey = '100%' | |
const lastValue = `{ | |
transform: scale3d(1,1,1); | |
}` | |
const index = data.values.findIndex(v => v === lastValue) | |
if(index === -1){ | |
data.keys.push(lastKey) | |
data.values.push(lastValue) | |
}else{ | |
data.keys[index] = data.keys[index]+','+lastKey | |
} | |
let str = `@keyframes easeOutElastic { | |
` | |
for(let i=0; i<data.keys.length;i+=1){ | |
str += ` ${data.keys[i]} ${data.values[i]} | |
` | |
} | |
str += ` | |
}` | |
console.log(str) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment