Create a gist now

Instantly share code, notes, and snippets.

<Shake /> [1]
import React from 'react'
const Shake = ({
h = 5,
v = 5,
r = 3,
dur = 300,
q = 'infinite',
tf = 'ease-in-out',
int = 10,
max = 100,
orig = 'center center',
...props,
}) => {
const random = (max, min = 0) => {
return (Math.random() * (max - min) - max / 2);
};
const doKeyframes = () => {
// el objecto que iremos llenando
let kf = {};
const init = 'translate(0,0) rotate(0)';
// loop con intervalos basados en `int`
for (let st = int; st <= max; st += int) {
// Numeros aleatorios en cada keyframe
const x = random(h);
const y = random(v);
const rot = random(r);
kf[`${st}%`] = {
transform: `translate(${x}px, ${y}px) rotate(${rot}deg)`,
}
}
// Init de las transformaciones en 0% y 100%
kf[`0%`] = kf[`100%`] = {
transform: init,
}
// Init también en caso el `max` < 100
if (max < 100) {
kf[`${max}%`] = {
transform: init,
}
}
return kf;
};
// Creamos los `@keyframes`
const keyframes = doKeyframes();
return (
<div style={styles}>
{ props.children }
</div>
);
};
export default Shake;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment