want a overlapping section

[unni]

i want to pin the section1 ( the first section) and when scroll the others should overlap the section1 . how to do that ? all sections are not same height .

See the Pen BaMOxEL by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen

[mvaneijgen]

Everything when working with ScrollTrigger starts with an animation and even better with a timeline, so the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've positioned your elements so that they are all on top of each other with CSS, then I just move them .from() off screen and you've got a working animation! Hooking this up to ScrollTrigger is then trivial. I would figure that you want the third section starting coming in when the previous section is still animating, this you can do with the position parameter and GSDevtools, just pick the perfect moment for the other section to come in and set that as the position parameter.

 

Hope it helps and happy tweening! 

 

See the Pen mdvGKXR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[unni]

18 minutes ago, mvaneijgen said:

Everything when working with ScrollTrigger starts with an animation and even better with a timeline, so the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I've positioned your elements so that they are all on top of each other with CSS, then I just move them .from() off screen and you've got a working animation! Hooking this up to ScrollTrigger is then trivial. I would figure that you want the third section starting coming in when the previous section is still animating, this you can do with the position parameter and GSDevtools, just pick the perfect moment for the other section to come in and set that as the position parameter.

 

Hope it helps and happy tweening! 

 

 

 

I don't want the section 3 to overlap in section 3

[mvaneijgen]

13 minutes ago, unni said:

I don't want the section 3 to overlap in section 3

Then remove that tween from the timeline and remove it from the #app container. If you still need help show us what you've already tried in a minimal demo, that way we can see your thought process and thus beter help you understand the tools. 

[unni]

7 minutes ago, mvaneijgen said:

Then remove that tween from the timeline and remove it from the #app container. If you still need help show us what you've already tried in a minimal demo, that way we can see your thought process and thus beter help you understand the tools. 

i want like in this website https://matthisgarnier.webflow.io/

 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[unni]

1 minute ago, GSAP Helper said:

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

can you please help me with this demo 
the section2 should overlap the section1 when scrolling

[mvaneijgen]

We are here to help, but we ask everyone to create a minimal demo, this shows your willingness to learn. If we just post the answer nobody will learn and we get stuck in a loop. 

 

So fork the pen do some tweaks and show us what you've tried and what your thought process is, that way we can help you understand the tools. You'll only learn if you get your hands dirty and dive in to the code. I don't say that you have to create working demo, just make what you think should work and tell us what your demo should do. 

 

If you're just looking for someone to make it for you, you're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[unni]

minimal demo

2 minutes ago, mvaneijgen said:

We are here to help, but we ask everyone to create a minimal demo, this shows your willingness to learn. If we just post the answer nobody will learn and we get stuck in a loop. 

 

So fork the pen do some tweaks and show us what you've tried and what your thought process is, that way we can help you understand the tools. You'll only learn if you get your hands dirty and dive in to the code. I don't say that you have to create working demo, just make what you think should work and tell us what your demo should do. 

 

If you're just looking for someone to make it for you, you're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[unni]

minimal demo

can you please help me with this demo 
the section2 should overlap the section1 when scrolling.

this is a next js project so its hard to show that codepen . thats why i created this codepen.

if you guys want to see the original project . i will try .

[Rodrigo]

Hi,

 

We have some starter templates in Stackblitz, you can fork one of them:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Feel free to fork one of those in order to make it look like your app, just remember to keep it minimal, just a few colored divs that clearly illustrate the problem you're having.

 

Finally maybe this demo can provide a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

[unni]

7 hours ago, Rodrigo said:

Hi,

 

We have some starter templates in Stackblitz, you can fork one of them:

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Feel free to fork one of those in order to make it look like your app, just remember to keep it minimal, just a few colored divs that clearly illustrate the problem you're having.

 

Finally maybe this demo can provide a good starting point:

 

 

 

Hopefully this helps.

Happy Tweening!

This is very helpfull thank you.