带时间线的 Gsap 滚动触发器

Question

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

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

useEffect(() => { 让 tl = gsap.timeline({ 滚动触发器：{ 触发：q(".scrollDist"), 开始：“顶顶”， 结束：“底部中心”， 擦洗：1， 标记：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;