a bit rustty with gsap need help with scroll trigger

[zozo]

Hi, 

I'm a bit rusty with gsap, and need some help.

I did a bit of vanilla js to pin a div for a moment, and it's working fine, (even though sometime it's a bit laggy on the first scroll) but since I'm using gsap and scroll trigger for something else on the same page, I though it would be better to use it too here, but I'm not sure how to do it. 

The pinned div has an absolute position, with a 50% top and transform translateY -50%, and when you scroll it push is it down so it look fixed. 

The cover_parallax div has a  200vh Height, so when it's scrolled to the bottom of the warper it stop. 

here is the code : 

 window.addEventListener('scroll', checkContainerVisibility);
    //////////////////////
    function toggleFixed() {
        isFixed = !isFixed;
        if (isFixed) {
            // Set initial position when becoming fixed
            updateFixedPosition();
            window.addEventListener('scroll', updateFixedPosition);
            window.addEventListener('resize', updateFixedPosition);
        } else {
            // Clean up when no longer fixed
            window.removeEventListener('scroll', updateFixedPosition);
            window.removeEventListener('resize', updateFixedPosition);
        }
    }
    // Function to update the position of the fixed element based on scroll and resize
    function updateFixedPosition() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        // Adjust the top position of the fixed element
        content.style.top = `calc( 50% + ${scrollTop}px`;
    }
	function checkContainerVisibility() {
        var bounding = cover_parallax.getBoundingClientRect();
        if (  bounding.bottom < 0 ) {
        cover_parallax.classList.add('annimeover');
        } else {
        cover_parallax.classList.remove('annimeover');
        }
    }

How would you do the same with a gsap scroll trigger ? 

[Rodrigo]

Hi,

 

Without a minimal demo is really hard to get a clear idea of what you're trying to do, but ScrollTrigger has the capacity to pin elements, so you should definitely explore that, since it would be far simpler than the approach you have right now:

pin
Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element.

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.

 

Check the ScrollTrigger docs for more information:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#config-object

 

Finally we have a collection of demos in codepen that should help you get ideas and examples :

https://codepen.io/collection/AEbkkJ

 

Hopefully this helps.

Happy Tweening!

[zozo]

Hi, thanks, I should have made a pen, it's true. I'll try it with what you send and if I'm still struggling I'll come back with a demo.