gsap pin scrolltrigger

// gsap scrolltrigger pin
// create an HTML div
const someDiv = document.createElement('div');

// use the gsap library to create the animation
const tl = gsap.timeline({
    scrollTrigger: {
        trigger: someDiv,
        start: "top bottom",
        pin: true,
        scrub: 1,
        end: "bottom bottom"
    }
});

// add the animation to the timeline
tl.to(someDiv, {x: 300});

The code above will create an HTML div, then use the GSAP library to create a timeline with a scroll trigger that will pin the div in place when it reaches the top of the page. The timeline will then animate the div to move 300 pixels along the x axis. The gsap scrolltrigger pin method is a great way to create smooth scrolling effects, as it allows you to set the point at which the element will be pinned and then animate it in response to the user scrolling. This method is useful when you want to create a fixed element on the page that will not move while the user scrolls, such as a navigation bar or a logo. Additionally, the scrub parameter allows you to control the speed of the animation so that it will always remain in sync with the scrolling of the page.