xxxxxxxxxx
// Import GSAP library
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// Register ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);
// Pin the element when it enters the viewport
gsap.to("#myElement", {
scrollTrigger: {
trigger: "#myElement",
start: "top 50%", // Change as per your requirement
end: "bottom 50%", // Change as per your requirement
pin: true,
pinSpacing: false
}
});
// Unpin the element when it leaves the viewport
gsap.to("#myElement", {
scrollTrigger: {
trigger: "#myElement",
start: "top 50%", // Change as per your requirement
end: "bottom 50%", // Change as per your requirement
pin: false
}
});