Only Last element gets animated when using Map

[sagar_dev]

Hello, I am new to GSAP and I am using GSAP in my next project. 

 

I am trying to make fade in animation to my images which I used map to render. However only last elements gets animated.

 

import Image from "next/image";
import React, { useEffect, useRef } from "react";
import { project } from "./portSource";
import style from "../../../styles/modules/portfolio.module.scss";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const Card = () => {
  let box = useRef(null);

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    gsap.from(box, {
      scrollTriggr: {
        trigger: box
      },
      delay: 2,
      y: 120,
      duration: 5,
      ease: "power3.in"
    });
  });

  const handleHover = (e: any) => {
    gsap.to(e.target, {
      duration: 0.5,
      ease: "power3.inOut",
      scale: 0.97
    });
  };

  const handleHoverExit = (e: any) => {
    gsap.to(e.target, {
      duration: 0.5,
      ease: "power3.inOut",
      scale: 1
    });
  };

  return (
    <div className="row row-cols-1 row-cols-sm-2">
      {project.map((projects, index) => (
        <div
          ref={(el) => (box = el)}
          key={index}
          id={style.port}
          className={
            index % 2 === 0 ? "col mb-md-5" : "col mt-5 pt-md-5 mb-md-5"
          }
        >
          <div className={style.box}>
            <div className={style.overlay}></div>
            <Image
              onMouseEnter={(e) => handleHover(e)}
              onMouseOut={(e) => handleHoverExit(e)}
              className={`${style.img} mb-2`}
              src={projects.thumb}
              height={1000}
              width={700}
              objectFit="cover"
              alt={projects.company}
            />
          </div>
          <h2>{projects.company}</h2>
        </div>
      ))}
    </div>
  );
};

export default Card;

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GreenSock]

I noticed several problems from a cursory glance. The main one is how you're setting "box" inside your map(): 

ref={(el) => (box = el)}

That's resetting it every time through the loop, thus when it's done looping, it's set to the last one. That's why it's the only one animating. 

 

Also, you're using useEffect() without passing an empty dependency Array as the 2nd parameter which means it will get called on every render of the component (not good). 

 

I'd strongly recommend reading the guide here: 

 

If you still need some help, please provide a CodeSandbox or CodePen with just a minimal demo and we'd be happy to take a peek. 

[sagar_dev]

On 10/21/2022 at 2:46 PM, GSAP Helper said:

Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue?

Extremally sorry for that. Here is the link to the CodeSandbox link to demonstrate the issue.

 

https://codesandbox.io/s/gsap-map-img-fade-in-ouo65j 

 

Here I want to make indiviiduaal image fade in when they appear in the view port. But now first image triggers last image to animate.

[GreenSock]

I assume you meant to do something like this: 

https://codesandbox.io/s/gsap-map-img-fade-in-forked-s5mbrq?file=/src/component/Imagecomponent.js

 

Here's another approach using ScrollTrigger.batch() and staggering:

https://codesandbox.io/s/gsap-map-img-fade-in-forked-21jq2z?file=/src/component/Imagecomponent.js

 

I hope that clears things up. 

[sagar_dev]

Wow thank you very much. This is what I wanted to do.