Juan90

@GreenSock I'm trying to achieve the next behavior, but using my code: https://codepen.io/GreenSock/pen/ZExpexO I have two sections pinned, the 1st and 3rd. When start scrolling, start parallax effect When parallax effect I need the second section to move above the 1st section (section pinned). When keep scrolling, I need to the 3rd to be fixed on the screen (pinned) and the fourth to move above. (like 1st and second sections.) All of this, with the previous demos that the community sent me, I couldn't replicate this behavior in my code. I'm new in this, so I'm not sure where the problem is. Could you help me ? My code: https://codepen.io/NachoYama90/pen/LYQqKBB?editors=1000 Thanks again.

Thank you @GreenSock, your help was great! But I still have the problem. As you can see in my codepen, I have pinned "Secton 1" and "Section 3". And the pin works correctly. The problem occurs when in the sections where I have "pin:true", I add a "pinSpacing: false". The pin stop working and I can't achieve the effect you showed me above. So, I need "section 1" and "section 3" to be pinned with a pinSapcing to achieve the effect of overlapping sections, which you showed me earlier Notes: - In the pinned sections my triggers are "#main_wrapper" - In the sections not pinned I use " pinnedContainer: '#main_wrapper' " Thanks for your help https://codepen.io/NachoYama90/pen/LYQqKBB?editors=0010

Thank you so much Cassie, I think that works for me. Now, I was wondering how could I use the section 3 without being pinned. I've changed the example and now the third section doesn't have the '.panel' . How can I do to see it ? Because now it is hidden https://codepen.io/NachoYama90/pen/ZExpOqd

Hi Cassie, I need to recreate in my code the example that Jack( GreenSock ). Where, in my code, I have an id="main_wrapper" that contains all the class="sections". Can you help me? https://codepen.io/NachoYama90/pen/LYQqKBB

Yes, thank you for the demo. Actually, I have a difference with my code which is that I use a wrapper container. I already tried with all the sections independently, and it works! what I'm not sure I can do it with the wrapper because I need it to be like that.

Hi, I have a problem and maybe you can help me. The issue is the following: I have all the sections pinned, and I want reach the effect parallax. I need the "section 2" and "section 3" be positioned above section 1 in a transition If my example is not clear, I attach this example that I found, but I need to adapt it to my code structure. https://codepen.io/GreenSock/pen/QWjjYEw My Codepen:

Thank you Cassie, but I might have another problem with it... I was trying to use the pin feature, and I had some animations in each section. Also, I created a serie of scrollstriggers to animate them. When doing that, I found that the pin sections are positioning absolute, and it loses it the references to the scroll that I need. I looked for this issue, and I found the pinnedContainer. But I'm not sure.

Hello, I am new using the gsap library. I would like to know why the following behavior occurs. In my code I have a red square, with a fixed position, which should change color as it enters different sections. What happens is that if I change the aspect of the window or move from front to back, all start and end are offset. Can someone explain to me what is happening and how to fix it? Thank you