ScrollTrigger snap to elastic item on expand

[Saied Dev]

Hi GSAP Community,

 

i have a horizontal parallax ScrollTrigger and every slide or panel within the ScrollTrigger is 1/2 viewport width (CSS => 50vw) . Each panel is clickable and the click toggles the panel between 50vw and 100vw and pushes the other panels aside. Everything is working well but i want in addition, to center or pin the expanded panel to the viewport and disable the scroll. After the next toggle, the panel shrinks to 50vw and the scroll behaves like before.

 

Is it possible to mix it with ScrollToPlugin? If so, can someone give me a hint or a starting point? Or is it doable with just ScrollTrigger?

 

Thanks in advance

 

See the Pen NWLjaqx?editors=1010 by SaiedCode (@SaiedCode) on CodePen

[Rodrigo]

Hi @Saied Dev and welcome to the GreenSock forums!

 

This is not the simplest thing to tackle as it requires a bit of setup as you can see in this thread:

Here is the final codepen for that particular thread:

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

 

On top of that the snapping functionality you're using adds an extra wrinkle to an already complex scenario.

 

As for moving the elements so the expanded one left side is at the left side of the viewport, you'll have to check the index position of that particular element in order to calculate the progress of the timeline that moves the elements horizontally in order to scroll the viewport to that particular position using the ScrollTrigger instance's start and end point.

 

As you can see this requires quite a bit of work and is a bit beyond the help we can provide in this free forums, if you have any GSAP related issue along the way, we'd be more than happy to help you with those. You can contact us for a consulting job or post in the Jobs & Freelance forums. Of course if another user can chime in and provide some solution even better.

 

Happy Tweening!

[Saied Dev]

On 3/3/2023 at 10:48 PM, Rodrigo said:

Hi @Saied Dev and welcome to the GreenSock forums!

 

This is not the simplest thing to tackle as it requires a bit of setup as you can see in this thread:

Here is the final codepen for that particular thread:

 

 

 

On top of that the snapping functionality you're using adds an extra wrinkle to an already complex scenario.

 

As for moving the elements so the expanded one left side is at the left side of the viewport, you'll have to check the index position of that particular element in order to calculate the progress of the timeline that moves the elements horizontally in order to scroll the viewport to that particular position using the ScrollTrigger instance's start and end point.

 

As you can see this requires quite a bit of work and is a bit beyond the help we can provide in this free forums, if you have any GSAP related issue along the way, we'd be more than happy to help you with those. You can contact us for a consulting job or post in the Jobs & Freelance forums. Of course if another user can chime in and provide some solution even better.

 

Happy Tweening!

 

Thank you @Rodrigo, definitely a good starting point.