TrulyNewbie Posted July 17, 2020 Share Posted July 17, 2020 Hi, newbie here. I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/ I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me Thank you See the Pen ExPdJxK by NewbieRuby (@NewbieRuby) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 Hey TrulyNewbie. Sorry, I'm not understanding the effect that you're wanting. What on the jeeongsteph site are you trying to mimic? The layering between the gray and black sections? How does your demo relate? Link to comment Share on other sites More sharing options...
TrulyNewbie Posted July 17, 2020 Author Share Posted July 17, 2020 Yes I’m trying to mimic the transition between the grey and black part. Sorry My demo was just a basic set up of what I thought was the direction to go for Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 We have a demo that creates that effect. Does this help? See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen This demo along with many others are listed in the ScrollTrigger docs. Link to comment Share on other sites More sharing options...
jacobSorensen Posted November 24, 2020 Share Posted November 24, 2020 Hi, I'm new to gsap and coding in general, but I'm so psyched about the intuitivness and power of your product. This was exactly what I was looking for as well, however I was wondering if it possible to control the z-index of each section. So that the red section would appear on top of the blue, but the orange would appear from underneath the red. Is that possible? Best regards, Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 24, 2020 Share Posted November 24, 2020 Hey @jacobSorensen and welcome to the GreenSock forums. Sure, doing what you're wanting is definitely possible. The ScrollTrigger demos page has another demo that shows how to do the covering. You should combine it will the demo in this thread above. Link to comment Share on other sites More sharing options...
jacobSorensen Posted November 25, 2020 Share Posted November 25, 2020 Thanks for the answer Zach. I played a little with the two different demos, but I haven't had success combining them. I would like to have control of the z-index of the different sections, which probably also shows in the codepen. What am I doing wrong here? See the Pen xxEKNKg by Jacobsorensen (@Jacobsorensen) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 26, 2020 Share Posted November 26, 2020 I'm trying to wrap my head around what you expect to happen with your code. It's doing exactly what you asked, but are you saying that you want to control the ORDER that each panel comes in by altering the zIndex? That's not really how that works. If you want to control the order, simply put the divs in that order in the DOM. What are you hoping will happen by changing those zIndex values in the way you did? 1 Link to comment Share on other sites More sharing options...
alendra Posted January 13 Share Posted January 13 Hey, i want to implement the pinning scroll too, but not just the next to current to be pinned, but also the current that will be scrolled up. Just like https://oxman.com/. Any idea? Thanks ^ ^ Link to comment Share on other sites More sharing options...
GreenSock Posted January 13 Share Posted January 13 @alendra welcome to the forums. It's usually best to create a new thread instead of hijacking one that's 3 years old. I imagine you might be looking for something like what Observer plugin can do: See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen https://gsap.com/docs/v3/Plugins/Observer If you still need help, please start a new thread and be sure to include a minimal demo, like a CodePen, that clearly illustrates the problem and we'd be happy to help with any GSAP-specific questions. ✅ 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