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.