I`m using GSAP in my NextJs app and I can`t animate object if they rendered via array map function.

[Yaroslav Filipenko]

import { v4 as uuidv4 } from 'uuid';
import { useRef } from 'react';
import { gsap } from 'gsap';
import { useGSAP } from '@gsap/react';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import SplitText from 'gsap/dist/SplitText';
import Image from 'next/image';
import Container from '@/components/Container';
import { ANIMATION_MATCH_MEDIA } from '@/lib/animationMatchMedia';
import styles from './OurClients.module.scss';

gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(SplitText);

const { ourClients, ourClientsArea, ourClientsInner, ourClientsTitle, ourClientsList, ourClientsItem } = styles;

const OurClients = ({ heading, list, scrollAnim }) => {
  const container = useRef();
  const tl = useRef();

  useGSAP(
    () => {
      let mm = gsap.matchMedia();

      const splitTitle = new SplitText('.ourClientsTitle', { type: 'lines chars', linesClass: 'ovh' });

      mm.add(
        {
          isMobile: `(max-width: ${ANIMATION_MATCH_MEDIA - 1}px)`,
          isDesktop: `(min-width: ${ANIMATION_MATCH_MEDIA}px)`,
        },
        (context) => {
          let { isMobile, isDesktop } = context.conditions;

          tl.current = gsap.timeline({
            scrollTrigger: {
              trigger: '.ourClientsInner',
              start: isDesktop ? 'left 90%' : 'bottom bottom',
              containerAnimation: isDesktop ? scrollAnim : null,
            },
          });

          tl.current.from(splitTitle.chars, { opacity: 0, y: 50, stagger: 0.01 }).from('.ourClientsItem img', { opacity: 0, yPercent: 50, stagger: 0.01 });
        },
      );
    },
    { dependencies: [scrollAnim], scope: container, revertOnUpdate: true },
  );

  return (
    <section className={ourClients} ref={container}>
      <Container>
        <div className={ourClientsArea}>
          <div className={`${ourClientsInner} ourClientsInner`}>
            <h2 className={`${ourClientsTitle} ourClientsTitle h1`}>{heading}</h2>
            <div className={ourClientsList}>
              {list &&
                list.map((item) => (
                  <div className={`${ourClientsItem} ourClientsItem`} key={uuidv4()}>
                    <Image
                      quality={65}
                      src={item.image.node.guid}
                      alt={item.image.node.altText}
                      width={item.image.node.mediaDetails.width / 2}
                      height={item.image.node.mediaDetails.height / 2}
                      sizes="(min-width: 768px) 14vw, 20vw"
                    />
                  </div>
                ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

export default OurClients;

Here is example of my component. I can`t animate ourClientItem inside array map function. Maybe somebody could help me with that. Thanks in advance.

[GSAP Helper]

First of all, I'd recommend registering the useGSAP hook before you use it:

gsap.registerPlugin(useGSAP);

 

That's typically not needed, but it looks like you're using the UMD package (in the /dist/ directory) for some of your code whereas the useGSAP hook uses the ESM one, thus  the context isn't getting recorded in the correct one. Registering the hook like that ensures that it's all using the same gsap object. 

 

If you still need help, please make sure you provide a minimal demo, like a Stackblitz. Here's a starter template you can fork: 

https://stackblitz.com/edit/stackblitz-starters-u6rgzq

 

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

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[ryan_labar]

You'll also want to be careful of trying to animate images before they load, as they could calculate as 0 for the height and 50% (yPercent) of 0 is 0, so they may not move.