maeOlives Posted February 14 Share Posted February 14 Hey everyone, Bear with me as I'm new to GSAP, but I'm trying to use ScrollTrigger (and perhaps pinning) to get the second part of my website to overlap the first part. I split the two parts of the websites into .beginning and .overlapping. More specifically, how can I get the .overlapping part of the site to overlap the .beginning part of the site starting when the top of .overlapping hits the bottom of the viewport? The idea is that .beginning stays in place (once the bottom of that div is at the bottom of the viewport) and the .overlapping rolls over the top of it. I cannot seem to wrap my head around getting this to work. Any help is greatly appreciated. Minimal Demo See the Pen rNRQwKw by maeolive (@maeolive) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 14 Share Posted February 14 Hi @maeOlives welcome to the forum! Instead of trying to wrap your head around how that would work, what if we already start with the seconds overlapping! Just some CSS to set all the sections in place where you want them to be, stacked on top of each other. Then we first focus on the animation. 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. And when you're happy with the animation uncomment the ScrollTrigger code and see how it would work with ScrollTrigger. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! See the Pen BabvKxr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
maeOlives Posted February 14 Author Share Posted February 14 Thank you, this is helpful! Although, I'm still having trouble getting the animation to start once the bottom of .beginning is a the bottom of the viewport. Since I don't want the animation to start right away (and want to scroll the entire .beginning div), it seems best to trigger .overlapping. But with the grid layout, the triggering happens immediately. I'm not sure how to approprately set the pin to .beginning once the animation is triggered. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 14 Solution Share Posted February 14 Hi, I've read this thread a few times and I'm not really clear on what exactly you want to do, but IMHO you are over complicating this. This can be achieved (if I'm guessing right here) with a simple pin without pinSpacing: See the Pen zYbyjGP by GreenSock (@GreenSock) on CodePen Hopefully this helps. If not please be super specific about what you want to achieve and if possible attach a live example that does what you're after. Happy Tweening! Link to comment Share on other sites More sharing options...
maeOlives Posted February 14 Author Share Posted February 14 @Rodrigo Oh my, I was severely overcomplicating this! This is exactly what I was looking for. Thank you, you saved the day! Link to comment Share on other sites More sharing options...
Rodrigo Posted February 14 Share Posted February 14 Just now, maeOlives said: I was severely overcomplicating this! Happens to all of us, no worries 😂 Glad that it helped! 🥳 Happy Tweening! 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