coderTrust

Done solved const timeLine = gsap.timeline({ scrollTrigger: { trigger: mainContainer, start: "top top", end: () => `+=${mainContainer.clientHeight}`, markers: true, scrub: 2, pin: true, onRefreshInit: (self) => { // Reset the pin position when the ScrollTrigger refreshes self.pin = false; self.pin = true; }, }, }); self.pin = false; self.pin = true; internal problem of gsap

It is working without pinning , but i need pining , on scroll both divs open but i want to pin it and happen import { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import styles from "./quatumnSection.module.css"; gsap.registerPlugin(ScrollTrigger); const QuatumnSection = () => { const mainContainerRef = useRef(null); const openingTopContainerRef = useRef(null); const openingBottomContainerRef = useRef(null); useEffect(() => { const mainContainer = mainContainerRef.current; const openingTopContainer = openingTopContainerRef.current; const openingBottomContainer = openingBottomContainerRef.current; const timeLine = gsap.timeline( { scrollTrigger: { trigger: mainContainer, start: "top top", end: () => `+=${mainContainer.clientHeight}`, // ScrollTrigger end point extended markers: true, scrub: 2, pin:true, }, }); timeLine .to(openingTopContainer, { y: -(openingTopContainer.clientHeight) },"openingContainer") .to(openingBottomContainer, { y: openingBottomContainer.clientHeight },"openingContainer"); }, []); return ( <div className={styles["main-container"]} ref={mainContainerRef}> <div className={styles["opening-top-container"]} ref={openingTopContainerRef} /> <div className={styles["center-container"]} ></div> <div className={styles["opening-bottom-container"]} ref={openingBottomContainerRef} /> </div> ); }; export default QuatumnSection;