ScrollTrigger Section pinning not working. Pinning Items not working as expected

[Ken Flores]

Hello GSAP Community,

I've been working on a project that involves using GSAP's ScrollTrigger, Flip, and MorphSVG plugins to create a dynamic web animation. Despite my efforts, I've run into several issues that I can't seem to resolve. Any help or advice would be greatly appreciated.

1. SVG and Text Interaction with ScrollTrigger: My primary challenge is managing the interaction between an SVG element and its accompanying text. I'm trying to achieve the following behavior:
 

Initially, for the text that appears under the SVG.
Using ScrollTrigger, the SVG should be pinned and then, at a specific scroll point, move to the opposite side of the screen.
Upon moving, it should be re-pinned, allowing the scroll to continue with the text appearing from the original SVG position.

2. Layout Challenges with Flip and Text Positioning: I'm also trying to use Flip to manage the layout, particularly for pinning text on the left side. However, if I don’t hide the text (display: none), it wrongly pushes the SVG to the bottom, disrupting the intended layout. The hidden text seems to affect the layout as if it were still visible.

3. Section Length Flexibility with MorphSVG: Finally, I need the animation section to dynamically adjust its length, ideally to accommodate the end of the animations, but I'm not sure how to integrate this flexibility with the timelines and the ScrollTrigger Sections.

Attempts and Roadblocks: I have experimented with various CSS and JavaScript approaches to manipulate these GSAP plugins, but haven't found the right combination or configuration. It seems like there's a gap in available tutorials or examples for these specific use cases.

Seeking Insights and Best Practices: Does anyone have experience with combining ScrollTrigger, Flip, and MorphSVG in this way? How can I effectively pin elements, control layout shifts, and ensure smooth animation transitions? Examples, code snippets, or any guidance on best practices would be incredibly helpful.

Thank you for your time and support!

See the Pen LYaLKja by Ken-Flores (@Ken-Flores) on CodePen

[Rodrigo]

Hi,

 

I'm not 100% sure I follow exactly what you're trying to achieve here. I'd start for giving the text elements an absolute position in order to take them out of the document flow in order to prevent that jump in the Flip transition.

 

Then I'm not sure why you have that ScrollTrigger instance for the first panel, since you're also creating another ScrollTrigger that is actually handling the animation. That could be a source of issues down the road. I'd keep just one and try to pin everything with that.

 

Here is a fork of your codepen with my best guess of what you're trying to achieve:

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

 

Also I recommend you to just remove ScrollTrigger and focus just on the animations. Once your animations are running the way you need you can plug ScrollTrigger back into your project and make sure that it works as expected.

 

Hopefully this helps.

Happy Tweening!

[Ken Flores]

 

On 1/23/2024 at 2:49 PM, Rodrigo said:

Hi,

 

I'm not 100% sure I follow exactly what you're trying to achieve here. I'd start for giving the text elements an absolute position in order to take them out of the document flow in order to prevent that jump in the Flip transition.

 

Then I'm not sure why you have that ScrollTrigger instance for the first panel, since you're also creating another ScrollTrigger that is actually handling the animation. That could be a source of issues down the road. I'd keep just one and try to pin everything with that.

 

Here is a fork of your codepen with my best guess of what you're trying to achieve:

 

 

 

Also I recommend you to just remove ScrollTrigger and focus just on the animations. Once your animations are running the way you need you can plug ScrollTrigger back into your project and make sure that it works as expected.

 

Hopefully this helps.

Happy Tweening!

Thank you! This suggestion actually helped me achieve what I needed to achieve.