带有时间线的Gsap滚动触发器

Question

我正在使用 gsap 制作 React 应用程序。我在时间轴中使用滚动触发器，但它不起作用。滚动触发器无法工作。有人可以帮助我吗？这是我的代码

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 });

}, []);

Answer 1

如果没有正确的代码片段，很难理解你想要实现的目标，但我会破解的。

乍一看，您似乎需要将

scrub: 1

配置更改为

scrub: true

。

另一个问题是它可能无法正确查询元素，在没有看到标记的情况下很难判断。

这是对 React 组件中完整代码的假设。

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

Answer 2

我正在使用此片段来构建时间线

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

并使用

const tl = myTimeline.current;