<div id="app"></div>
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@400;600&display=swap');
body {
font-family: "Signika Negative", sans-serif, Arial;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background-color: #28292b;
color: #fffce1;
}
h1 {
text-align: center;
font-weight: 400;
}
#app {
display: flex;
justify-content: center;
}
.box {
width: 80px;
height: 80px;
background: dodgerblue;
margin: 10px;
float: left;
opacity: 0;
border-radius: 6px;
transform: scale(0.3);
}
let { useRef, useEffect } = React;
let data = [
{ id: 0 },
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 }
];
let Box = () => {
return <div className="box"></div>
};
let App = () => {
let el = useRef();
let q = gsap.utils.selector(el);
useEffect(() => {
// The component has been rendered, so we can now select
// descendants of the component, including descendants
// nested inside of other components
gsap.to(q(".box"), {
opacity: 1,
scale: 1,
duration: 1,
stagger: 0.1,
repeat: -1,
repeatDelay: 1,
yoyo: true
});
}, []);
return (
<div ref={el}>
<h1>React scoped selector</h1>
{data.map((item) => <Box key={item.id} />)}
</div>
);
}
ReactDOM.render(<App/>, document.querySelector('#app'));
View Compiled
This Pen doesn't use any external CSS resources.