In gsap scrolltrigger Why a div is vanishing when a trigger element reach to start and end view port?

Question

I don't Know What is actually wrong here?

In gsap scrolltrigger i am trying to do a split screen pinning effect but its not working. Where the text will scroll and the image remain pin changes as the text goes. but when the trigger element the text element goes to start markers image goes vanish and somehow it appeared in bottom of the text element.? Why?

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

I tried to tweak the scrub value but still its not working. It should remain pin and not vanish while the text element reach the start markers.

Answer 1

I had faced similar kind of issue in one of my recent projects. I figured out that this is happening because of some dynamic padding or something is being applied after the scrollTrigger defines its triggers.

To see your code working properly, one way is to wrap your tween into a setTimeout with 100ms.

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

        }
    })
}, 100);