Pinning a section until the following section has caught up (React)

[stevensunsunsun]

Hi, this is my first time with GreenSock! From what I've seen in the forums, people are doing amazing things with this!

I'm a little stuck already almost working! To troubleshoot, I've created a simplified version in codesandbox.

I have a page with 3 sections. As the user scrolls up, the 2nd section should pin to the top until the 3rd section has caught up with it and then they both scroll up together.

The 3rd section shouldn't be visible until that 2nd section has been pinned (at the moment it is appearing underneath the 2nd section as we scroll).

The 1st section has an image in the bottom right the viewport. This should scroll to the top on scrub and then pin, top left, and remain there. For some reason, when I put this together in codesandbox, it's not sitting bottom left to begin with…

https://codesandbox.io/s/bold-framework-wli4j

Please can someone show me where I need to adjust my code. Thank you!!!

See the Pen by s (@s) on CodePen

[Cassie]

Hey there!

Let's step through this bit by bit a little as there's quite a couple of questions here!

 

1)

2 hours ago, stevensunsunsun said:

I have a page with 3 sections. As the user scrolls up, the 2nd section should pin to the top until the 3rd section has caught up with it and then they both scroll up together.

I've looked at the demo and this seems to be happening already. Did you fix it? If not, could you expand on what you're expecting a little more?

 

2)

The image pinning.

So, it's already positioned top left when the page loads as the start trigger you defined is further down the screen than the position of the image. So you've moved past this first marker and the animation has already triggered. You could move the start pin to fix this.

However - I'm not certain your approach is quite right here. You can't tween between positions (like fixed) unless you use FLIP plugin 👀

 

Maybe something like this is closer to what you want?

See the Pen YzrOqqJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

(I've popped this in codepen for now as this isn't a React specific issue - switching between multiple files and dealing with a framework makes things a little more complex)

 

[stevensunsunsun]

Hi @Cassie thank you so much! I'll try applying this to the other framework now to make sure I can get it working there.
 

Quote

I've looked at the demo and this seems to be happening already. Did you fix it? If not, could you expand on what you're expecting a little more?

On this bit … not quite: the 3rd section shouldn't appear in the viewport until the 2nd section has pinned. So only once the text Lorem ipsum. has pinned should the section below it appear in the viewport and begin scrolling up…

 

[Cassie]

Ok cool!

 

So if you want to increase the amount of space between those two sections, you'll need to push the end trigger further down the page. 

 

Here's a rough idea -
 

See the Pen YzrOqqJ by GreenSock (@GreenSock) on CodePen

[stevensunsunsun]

Ah, thank you! 😀

On my screen that's showing a lot of scrolling before the 3rd section appears. Ideally it would be great if the 3rd section appears as soon as the 2nd one pins.

Just testing with this small edit…

end: `+=${window.innerHeight / 2}`

…and that seems to work… does that look correct on your screen as well?
 

See the Pen MWEqedL by stevencmh (@stevencmh) on CodePen

 

 

[Cassie]

That number can be any calculation or px value you like. ☺️  Up to you to work out what looks right. 

You'll likely need to test on different screen sizes to make sure.

 

Good luck with your project!

[Cassie]

(If you want it to appear as soon as the second section pins, you'll need to work out the px distance between the bottom of section 2 and the bottom of the viewport)

[stevensunsunsun]

Just now, Cassie said:

(If you want it to appear as soon as the second section pins, you'll need to work out the px distance between the bottom of section 2 and the bottom of the viewport)

Ok, got it, thanks!

The last thing I was wondering is if it's possible to use scale on the logo within the existing scrollTrigger, or would that need to be set up seperately?

[Cassie]

Sure! You won't want to scrub though or the scale animation will last for the entire distance of the scroll.

You can use a non-scrubbed animation (i.e. with a set duration) and then use toggleActions to determine how it's handled.

 

From the scrollTrigger docs.

 

Quote

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

See the Pen rNGZWjw?editors=0010 by GreenSock (@GreenSock) on CodePen

[stevensunsunsun]

Hi, thank you for showing me how with toggleActions. I did this a little differently with the following code …

    useEffect(() => {
        gsap.to(logoRef.current, {
            top: 40,
            scale: 0.29,
            scrollTrigger: {
                trigger: '.content',
                start: 'top bottom-=20',
                end: 'top center-=300',
                scrub: true
                // markers: true
            }
        })
    }, []);