React JS TweenMax and hover effect on map

[kasiuleckretulec]

Hi! I have a problem with mapping through an array and displaying three images in a row.

If I'm not using the map function images show very well (one by one) - I really want to know how to achieve this row animation 

 

Thanks for any suggestions and tips

 

import { TweenMax, Power3 } from "gsap";
import gsap from "gsap";
import { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { portfolioLinks } from "../../constants/index.jsx";
import "./Portfolio.scss";

const Portfolio = () => {
  const manageMouseEnter = (e, color) => {
    gsap.to(e.target, { backgroundColor: color, duration: 0.5 });
  };

  const manageMouseLeave = (e, color2) => {
    gsap.to(e.target, { backgroundColor: color2, duration: 0.5, delay: 0.1 });
  };

  let img1 = useRef(null);
  let img2 = useRef(null);
  let img3 = useRef(null);

  useEffect(() => {
    TweenMax.from(img1, 0.8, { opacity: 0, x: 40, ease: Power3.easeOut });
    TweenMax.from(img2, 0.8, {
      opacity: 0,
      x: 40,
      ease: Power3.easeOut,
      delay: 0.2,
    });

    TweenMax.from(img3, 0.8, {
      opacity: 0,
      x: 40,
      ease: Power3.easeOut,
      delay: 0.4,
    });
  });

  return (
    <>
      <div className="container_portfolio">
        <h1 className="h1_portfolio">Portolio</h1>
        <p className=" p_portfolio">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div className="black_Line"></div>
      <div className="container_portfolioGroup">
        {portfolioLinks.map((proto, index) => (
          <>
            <Link
              className="link"
              onMouseEnter={(e) => {
                manageMouseEnter(e, proto.color);
              }}
              onMouseLeave={(e) => {
                manageMouseLeave(e, proto.color2);
              }}
              key={index.id}
              to={proto.to}
            >
              <div className="grid_Portfolio">
                <h1 className="h1_Grid">{proto.title}</h1>

                <div className="containerImages">
                  <img
                    src={proto.protoImg}
                    ref={(el) => (img1 = el)}
                    className="imagesRow"
                  ></img>
                  <img
                    src={proto.protoImg2}
                    ref={(el) => (img2 = el)}
                    className="imagesRow"
                  ></img>
                  <img
                    src={proto.protoImg3}
                    ref={(el) => (img3 = el)}
                    className="imagesRow"
                  ></img>
                </div>
              </div>
            </Link>
            <div className="black_Line"></div>
          </>
        ))}
      </div>
    </>
  );
};

export default Portfolio;

 

[Rodrigo]

H @kasiuleckretulec and welcome to the GreenSock forums!

 

A few things:

• You are using really old syntax, we strongly recommend using the newest syntax (V3), for that you can check these resources: 
• You are using React but you're not properly cleaning up, when using GSAP on react apps always use GSAP Context. Check the resources in this page to know more:

Finally we have a collection of starter templates in stackblitz so you can see all this working:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

If you keep having issues, please post a minimal demo that clearly illustrates the problem you're having.

 

Hopefully this helps.

Happy Tweening!