在gsap的scrolltrigger中，为什么当触发元素到达开始和结束视图端口时div会消失？

Question

我不知道这里到底出了什么问题？

在 gsap 滚动触发中，我尝试做分屏固定效果，但它不起作用。文本滚动的位置和图像保持的位置会随着文本的移动而变化。但是当触发元素开始时，文本元素开始标记图像消失，不知何故它出现在文本元素的底部。为什么？

import { useEffect } from 'react';
import './Facilities.css'
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

function Facilities() {
  const imagesUrl = ["imgs/mechines/cardio.jpg","imgs/mechines/weight.jpg","imgs/mechines/rope.jpg","imgs/mechines/sauna.jpg"]

  useEffect(()=>{
    gsap.registerPlugin(ScrollTrigger);
    gsap.to(".imagesectionfacilities",{duration:1,scrollTrigger:{
    trigger:".txtFacilities",
    start:"top top",
    end:"bottom bottom",
    markers:true,
    pin:".imagesectionfacilities",

  }})},[])
  return (
    <div className='facilites'>
      <div className='txtFacilities'>
        <div className="cardioFacilities">Cardio</div>
        <div className="cardioFacilities">Strength</div>
        <div className="cardioFacilities">Functional</div>
        <div className="cardioFacilities">Amenities</div>

      </div>
      <div className="imagesectionfacilities">
        <img src={imagesUrl[0]} alt="" className='cardImg'/>
      </div>
    </div>
  )
}

export default Facilities

**CSS**
.facilites{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap:40%;
    border: 1px solid rgb(0, 255, 21);


}
.cardImg{
    height: 250px;
    width: 350px;
    border: none;
    border-radius: 10px;
    object-fit: cover;
}
.txtFacilities{
    border: 1px solid rgb(255, 0, 0);

}

.cardioFacilities{
    display: flex;
    font-size: 50px;
    color: white;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.imagesectionfacilities{
    display: flex;
    font-size: 50px;
    color: white;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    height: 100vh;
    border: 1px solid blue;
}

我尝试调整磨砂值，但仍然不起作用。 当文本元素到达开始标记时，它应该保持固定状态并且不会消失。

Answer 1

我在最近的一个项目中遇到了类似的问题。我发现发生这种情况是因为在scrollTrigger定义其触发器之后应用了一些动态填充或某些东西。

要查看代码正常工作，一种方法是将补间包装到 100 毫秒的 setTimeout 中。

setTimeout(() => {
    gsap.to(".imagesectionfacilities", {
        duration: 1, scrollTrigger: {
            trigger: ".txtFacilities",
            start: "top top",
            end: "bottom bottom",
            markers: true,
            pin: ".imagesectionfacilities",

        }
    })
}, 100);