AnthonyJRay

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?