import React, {useRef, useEffect} from 'react';
import styled from 'styled-components';
import {TweenMax, Bounce} from 'gsap';
const Header = styled.h1`
text-align: center;
color: palevioletred;
`;
const Circle = styled.div`
position: relative;
// top: 50%;
// left: 50%;
height: 250px;
width: 250px;
border: 1px solid palevioletred;
border-radius: 50%;
`;
const CircleContainer = styled.div`
background-color: #777;
`;
const CircleOne = styled(Circle) `
z-index: 500;
position: absolute;
top: 50%;
left: 50%;
`;
const CircleTwo = styled(Circle)`
z-index: 600;
position: absolute;
top: 50%;
left: 50%;
`;
const CircleThree = styled(Circle)`
z-index: 700;
position: absolute;
top: 50%;
left: 50%;
`;
const CircleFour = styled(Circle)`
z-index: 800;
position: absolute;
top: 50%;
left: 50%;
`;
function App() {
let boxItem = useRef(null);
let textItem = useRef(null);
useEffect(() => {
TweenMax.to(
boxItem,
1.5,
{
opacity: 1,
transformOrigin: 'center',
rotate: 360,
y: 50,
ease: Bounce.easeOut
}
);
TweenMax.to(
textItem,
1.5,
{
opacity: 1,
rotate: 360,
x: 100,
ease: Bounce.easeOut
}
)
}, []);
return (
<div className="App">
<Header ref={el => {textItem = el}}>GSAP Animations</Header>
<CircleContainer>
<CircleOne ref={el => {boxItem = el}}></CircleOne>
<CircleTwo ref={el => {boxItem = el}}></CircleTwo>
<CircleThree ref={el => {boxItem = el}}></CircleThree>
<CircleFour ref={el => {boxItem = el}}></CircleFour>
</CircleContainer>
</div>
);
}
export default App;
I apologize in advance, im brand new to React and GSAP. Also I couldn't figure out CodePen.
Basically i'm just trying to create 4 circles, and animate them simultaneously. Currently, only the last Circle component(<CircleFour>) is getting the animation attached to it. It this an issue with my "refs"? Or is using Timeline a solution?
I just learned about GSAP within the last 24 hours and have been blown away!
Nevermind, I added seperate Refs and animations for each circle. I guess now my question would be, is there a way to do what I was originally trying to do? Animating them all within the same Ref or Tween?