Juan90 Posted July 11, 2022 Share Posted July 11, 2022 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. See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen My Codepen: See the Pen LYQqKBB?editors=0010 by NachoYama90 (@NachoYama90) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 12, 2022 Share Posted July 12, 2022 Hi @Juan90. Are you saying that you want section 2 to overlap section 1 (so section 1 stays pinned while section 2 comes in)? And then you want section 2 to pin while section 3 animates in over the top of that? If so, maybe this demo will help: See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen There are many demos at https://greensock.com/st-demos/ Link to comment Share on other sites More sharing options...
Juan90 Posted July 12, 2022 Author Share Posted July 12, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2022 Share Posted July 12, 2022 I'm not quite sure what you're asking, sorry, could you rephrase? Link to comment Share on other sites More sharing options...
Juan90 Posted July 12, 2022 Author Share Posted July 12, 2022 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? See the Pen LYQqKBB by NachoYama90 (@NachoYama90) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2022 Share Posted July 12, 2022 Your demo and the demo Jack linked to are completely different so I'm not entirely sure which part you're after? The demo Jack linked to also works if there's a wrapper though - you just have to style the wrapper so it has a height. Here, does this help? See the Pen RwMGRZK?editors=1111 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Juan90 Posted July 12, 2022 Author Share Posted July 12, 2022 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 See the Pen ZExpOqd by NachoYama90 (@NachoYama90) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 12, 2022 Share Posted July 12, 2022 The browser needs it to have a new stacking context in order for it to show up, or a z-index. You can just set will-change: transform to tell the browser to do that (or any transform): See the Pen ZExpexO?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? Link to comment Share on other sites More sharing options...
Juan90 Posted July 12, 2022 Author Share Posted July 12, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted July 12, 2022 Share Posted July 12, 2022 You had a syntax error in your code (";" instead of ","). Unrelated to GSAP. See the Pen abYmyWp?editors=0010 by GreenSock (@GreenSock) on CodePen I don't see any problems. Am I missing something? Link to comment Share on other sites More sharing options...
Juan90 Posted July 13, 2022 Author Share Posted July 13, 2022 @GreenSock I'm trying to achieve the next behavior, but using my code: See the Pen ZExpexO by GreenSock (@GreenSock) on CodePen 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: See the Pen LYQqKBB?editors=1000 by NachoYama90 (@NachoYama90) on CodePen Thanks again. Link to comment Share on other sites More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 4 hours ago, Juan90 said: 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.) Sorry, but I just don't understand what you're asking for. Please keep in mind that these forums are not for providing free general consulting services or "here is my list of requirements...please make my project work accordingly..." requests. See the forum guidelines. We're happy to answer very specific questions about the GreenSock API, though. If you need more help, you're welcome to post in the "Jobs & Freelance" forum or contact us for paid consulting services. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now