React JS - gsap scrollTrigger 不适用于向下滚动，但在向上滚动时工作正常

Question

我正在尝试实现时间轴动画，其中每个元素在向下滚动时将一一出现（从右到左），在向上滚动时反向

我想要实现的是，当我向下滚动时，行（li）应该一一出现。当我向上滚动时它应该消失。

在我的最后，它不能向下滚动，但可以向上滚动正常工作

我尝试过以下方法。

import { useEffect, useRef } from 'react';
import { gsap, Power1 } from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';

function WeHeard(props) {
    
    gsap.registerPlugin(ScrollTrigger);
    useEffect(() => {
        const animation = gsap.timeline({
            scrollTrigger: {
                trigger: ".hearedListing",
                scrub: true,
                start: "top 10%",
                end: "bottom top",
                markers:false
            }
        }).from('.hearedListing li', {
            x:300,
            autoAlpha:0,
            duration:4,
            stagger:2,
            ease: Power1.out
        });
    }, []);

    return <>
    <section className="heared-listing hearedListing" >
        <div className="container">
            <div className="row">
                <div className="col-md-12 text-center">
                <h2 className="animate-heading">We heard</h2>
                    <ul className="list-unstyled primary-text-color h4 mt-5">
                        <li >Here is my line one</li>
                        <li >Here is my line two</li>
                        <li >Here is my line three</li>
                        <li >Here is my line four</li>
                        <li >Here is my line five</li>
                        <li >Here is my line six</li>
                        <li >Here is my line seven</li>
                        <li >Here is my line eight</li>
                        <li >Here is my line Ten</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    </>
}
export default WeHeard;

我已经创建了一个codesandbox here 我无法找出脚本中的问题。

谢谢！

Answer 1

我不确定它是否与 useEffect 加载的反应方式有关，但出于某种原因，我认为 gsap 无法获取该元素开头的 css 值。如果您使用

fromTo()

而不是仅使用

from()

，那么效果很好，因此您可以直接使用它。另外我认为你希望动画在元素顶部距离屏幕底部 10% 时开始，对吗？如果是这种情况，那么您会这样做

start: 'top 90%'

，因为否则您将不会开始动画，直到触发器顶部距离视口顶部达到 10%，并且您将错过顶部的动画。如果不是，就保持原样。无论如何，这是您可以尝试的更改，我认为这就是您正在寻找的结果。

const animation = gsap
  .timeline({
    scrollTrigger: {
      trigger: '.hearedListing',
      scrub: true,
      start: 'top 90%',
      end: 'bottom top',
      markers: false
    }
  })
  .fromTo(
    '.hearedListing li',
    {
      x: 300,
      autoAlpha: 0
    },
    {
      x: 0,
      autoAlpha: 1,
      duration: 4,
      stagger: 2,
      ease: Power1.out
    }
  )

Answer 2

我也遇到了同样的问题，但已经解决了。您需要像这样导入

TriggerScroll

：

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

• 确保

  gsap.registerPlugin(ScrollTrigger);

  位于组件内部但在

  useGSAP()

  函数外部