Horizontal Scroll with Last Panel Left-Side Pin in GSAP for NextJs

[Nwekar]

Hi everyone,

I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically.

CodePen Example : Horizontal Scroll Example
StackBlitz Project : Pin Left Section and Scroll Right

 

See the Pen dyEEzXo by N-Nwekar20 (@N-Nwekar20) on CodePen

[Rodrigo]

Hi,

 

Horizontal pinning is not supported since you're already pinning vertically, what you can do is create a timeline that has the ScrollTrigger configuration and add that particular animation at the end of it, since is the last horizontal section just combine the two demos you already have in place.

 

Something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Nwekar]

42 minutes ago, Rodrigo said:

Hi,

 

Horizontal pinning is not supported since you're already pinning vertically, what you can do is create a timeline that has the ScrollTrigger configuration and add that particular animation at the end of it, since is the last horizontal section just combine the two demos you already have in place.

 

Something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

Hi,

Thank you for your guidance.

Is there an alternative method to achieve this? I've noticed some glitches with the current approach. By the way, this is what I want.

Thanks again for your help!