Animating multiple React components with the same animation

[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?

[OSUblake]

First, just importgsap. There is no need to import TweenMax or eases.

https://greensock.com/docs/v3/Installation

https://greensock.com/docs/v3/Eases

 

If you can't get it working in CodePen, use stackblitz or codesandbox.

 

4 hours ago, AnthonyJRay said:

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?

 

You need to put them in an array. Something like this, but I didn't test it.

 

import React, {useRef, useEffect} from 'react';
import styled from 'styled-components';

import {gsap} 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 circle1 = useRef();
  let circle2 = useRef();
  let circle3 = useRef();
  let circle4 = useRef();
    let textItem = useRef(null);

    useEffect(() => {
      
      const circles = [
        circle1.current,
        circle2.current,
        circle3.current,
        circle4.current
      ];
      
        gsap.to(
            circles,
            {
              duration: 1.5,
                opacity: 1,
                transformOrigin: 'center',
                rotate: 360,
                y: 50,
                ease: "boumce.out"
            }
        );
        gsap.to(
            textItem.current,
            {
              duration: 1.5,
                opacity: 1,
                rotate: 360,
                x: 100,
                ease: "bounce.out"
            }
        )
    }, []);

  return (
    <div className="App">
        <Header ref={textItem}>GSAP Animations</Header>
        <CircleContainer>
            <CircleOne ref={circle1}></CircleOne>
            <CircleTwo ref={circle2}></CircleTwo>
            <CircleThree ref={circle3}></CircleThree>
            <CircleFour ref={circle4}></CircleFour>
        </CircleContainer>
    </div>
  );
}

export default App;