codanux Posted March 20, 2022 Share Posted March 20, 2022 Hello, I'm new to Gsap. When I increase the length between 2 different scenes, pinSpace is created, when I set it to false, the ending value of #section2 becomes #section3. How do I set the ending value to the top of #section3 by expanding #section2. regards See the Pen VwyjLNz?editors=0010 by codanux (@codanux) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 20, 2022 Share Posted March 20, 2022 Hey there. Welcome to the GSAP forums. I'm sorry but I'm afraid I don't understand this question. Could you rephrase it and explain clearly what you're trying to achieve visually? Maybe setting a different end trigger element could help you?endTrigger: '#section3' Link to comment Share on other sites More sharing options...
codanux Posted March 20, 2022 Author Share Posted March 20, 2022 15 minutes ago, Cassie said: Hey there. Welcome to the GSAP forums. I'm sorry but I'm afraid I don't understand this question. Could you rephrase it and explain clearly what you're trying to achieve visually? Maybe setting a different end trigger element could help you?endTrigger: '#section3' Hey, PinSpacing: false #section2 bottom => #section3 top I want Link to comment Share on other sites More sharing options...
Cassie Posted March 20, 2022 Share Posted March 20, 2022 Like this? See the Pen b7ddc1e327e0215d83537113bd2fe610?editors=0010 by cassie-codes (@cassie-codes) on CodePen 1 Link to comment Share on other sites More sharing options...
Али К Posted March 20, 2022 Share Posted March 20, 2022 Hello ,@codanux change the end to be like end: 'bottom bottom', const timeline2 = gsap.timeline({ scrollTrigger: { id: 'section2', trigger: '#section2', scrub: true, markers: true, pin: true, start: 'top top', end: 'bottom bottom', pinSpacing: true, // end padding problem endTrigger: '#section3' } }); Link to comment Share on other sites More sharing options...
codanux Posted March 20, 2022 Author Share Posted March 20, 2022 7 minutes ago, Cassie said: Like this? yes this works for me but I need to speed down #section2 so I need to add it. end: 'bottom+=150% top', Link to comment Share on other sites More sharing options...
Solution Cassie Posted March 20, 2022 Solution Share Posted March 20, 2022 You can increase the height in your CSS. See the Pen b6a261a3bc0d1170ff1e96e518731a23?editors=1100 by cassie-codes (@cassie-codes) on CodePen 6 Link to comment Share on other sites More sharing options...
mikel Posted March 21, 2022 Share Posted March 21, 2022 Hey @codanux, You could also use one forEach function (for both sections). And function based values combined with invalidateOnRefresh:true for the scrollTrigger. I like to test / choose the speed with appropriate relative values for the parameter 'end'. See the Pen RwxGNZz by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 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