Что делать если не работает gsap как надо?

Question

[Дмитрий Путилов]

Всем привет, возникла проблема с GSAP, есть вот такой код

import React, {useEffect, useRef} from 'react';
import {background} from "../../../DefaultContants/Constants";
import Image from "../../../UI/Image";
import processImage from '../../../image/mainPage/process.svg'
import SliderCertificate from "./SliderCertificate/SliderCertificate";
import gsap from 'gsap'

const OurProgress = () => {

    const image = useRef(null)

    useEffect(() => {
        gsap.to(image.current, {
            x: '100px',
            duration: 4,
            scrollTrigger: image.current
        })
    }, [])

    return (
        <div className={`${background} relative overflow-hidden`}>
            <div className={'container px-4 m-auto'}>
                <div>
                    <div className={`lg:text-center text-white lg:text-4xl font-bold text-3xl`} ref={image}>Наши достижения
                    </div>

                    <div className={'hidden lg:block'}>
                        <Image image={processImage}/>
                    </div>

                    
                    <SliderCertificate/>
                </div>
            </div>
        </div>
    );
};

export default OurProgress;

но проблема в том, что эта анимация срабатывает с самого начала загрузки страницы, а мне нужно что бы срабатывала только когда до этого элемента доскролили, в чем может быть проблема?

Answer 1

[Deniel]

Проблема в том что коллбэк в useEffect выполняется при маунте (внедрении) элемента в DOM.
В гугле есть много информации о том как показывать/скрывать элементы при скролле.

Comments

[Дмитрий Путилов]

Я искал, но к сожалению, не смог найти ответа