Hi! i'm trying to create a confetti animation in my react projecta, following some tutorial and code example i found but there are something that im not understand. See code:
import React from 'react';
import { gsap, TweenMax } from 'gsap';
class Stars extends React.Component {
render() {
TweenMax.to('img', {
xPercent: '-50%',
yPercent: '-50%',
});
const total = 70;
const container = document.getElementById('container');
let w = container?.offsetWidth;
let h = container?.offsetHeight;
for (let i = 0, div; i < total; i++) {
div = document.createElement('div');
div.className = 'dot';
container?.appendChild(div);
gsap.set(div, {
x: R(0, w || 1),
y: R(-100, 100),
opacity: 1,
scale: R(0, 0.5) + 0.5,
backgroundColor: 'hsl(' + R(170, 360) + ',50%,50%)',
});
animm(div);
}
function animm(elm) {
TweenMax.to(elm, R(0, 5) + 3, {
y: h,
ease: Linear.easeNone,
repeat: -1,
delay: -5,
});
TweenMax.to(elm, R(0, 5) + 1, {
x: '+=70',
repeat: -1,
yoyo: true,
ease: Sine.easeInOut,
});
TweenMax.to(elm, R(0, 1) + 0.5, {
opacity: 0,
repeat: -1,
yoyo: true,
ease: Sine.easeInOut,
});
}
return <p>oi</p>;
}
}
export default Stars;
what is the "R" function which set a value to 'x' and 'y' coords?