0

I'm making react app using gsap. I use scrolltrigger in timeline but it's not working. The scrolltrigger couldn't work.Can someone help me? Here is my code

gsap.registerPlugin(ScrollTrigger); const el = useRef(null); const q = gsap.utils.selector(el);

useEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: q(".scrollDist"), start: "top top", end: " bottom center", scrub: 1, markers: true, }, });

tl.fromTo(
  q(".header"),
  { y: 0, opacity: 1 },
  { y: -100, opacity: 0 }
).fromTo(".button_field", { y: 0 }, { y: -50 });

}, []);

Agtha
  • 1
  • 2

2 Answers2

1

A tad hard to pick up on what you're trying to achieve without a proper code snippet but I'll have a crack.

First glance it looks like you need to change the scrub: 1 config to scrub: true.

The other concern is it may not be querying for the elements properly, hard to tell without seeing the markup.

This is an assumption of the full code you have within your React component.

import React, { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/all'

gsap.registerPlugin(ScrollTrigger);

const IndexPage = () => { {
   const elementRef = useRef(null)
   const q = gsap.utils.selector(elementRef)

    useEffect(() => {
      let tl = gsap.timeline(
        { 
          scrollTrigger: {
            trigger: q(".scrollDist"),
            start: "top top",
            end: "bottom center",
            scrub: true, // scrub: 1
            markers: true
          }
        }
      );

      tl
        .fromTo(
          q(".header"),
          { y: 0, opacity: 1 },
          { y: -100, opacity: 0 }
        )
        .fromTo(
          ".button_field",
          { y: 0 },
          { y: -50 }
        );
    }, [])

    return (
      <div ref={elementRef}>
        <div className='scrollDist'></div>
        <header className='header'>header</header>
        <button className='button_field'>button</button>
      </div>
    )
}

export default IndexPage
lu_ke____
  • 143
  • 9
0

I am using this snippet to build a timeline

const myTimeline = useRef(
    gsap.timeline({
      defaults: {
        ease: "none",
      },
    })
  );

And use const tl = myTimeline.current;

Prabhjot Singh
  • 1
  • 1