jonias Posted December 2, 2020 Share Posted December 2, 2020 I'm using ScrollTrigger to try to achieve the effect here. Everything I've tried seems like overkill. Has anyone done something like this before with ScrollTrigger that I could study? See the Pen vYXNOjZ by simplethemes (@simplethemes) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted December 2, 2020 Share Posted December 2, 2020 In order to do that you'll need to make sure your css is set up to have panels be on top of each other I just took GreenSock's sliding panel demo See the Pen qBdzqmR?editors=1010 by GreenSock (@GreenSock) on CodePen and made the pen below by removing the blue panel and changing the tweens to opacity See the Pen ZEpbbpQ?editors=1010 by snorkltv (@snorkltv) on CodePen 4 Link to comment Share on other sites More sharing options...
jonias Posted December 2, 2020 Author Share Posted December 2, 2020 Thanks @Carl! This is pretty much what I'm after. I guess absolute containers are my only option? I'll work on this and see what can be done. Thanks again. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 2, 2020 Share Posted December 2, 2020 12 hours ago, jonias said: I guess absolute containers are my only option? For this sort of effect, yes absolute or fixed position is necessary. The containers much be taken out of the document flow. 1 Link to comment Share on other sites More sharing options...
Carl Posted December 2, 2020 Share Posted December 2, 2020 another approach I use for this type of thing is the " @shshaw grid layering technique " static version of multiple fullscreen divs sitting on top of each other See the Pen JjYJpgw?editors=1100 by snorkltv (@snorkltv) on CodePen here I apply it to list items with some animation See the Pen 0d22106a0c7dca4d4e01a583bb739d37?editors=1100 by snorkltv (@snorkltv) on CodePen 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 2, 2020 Share Posted December 2, 2020 16 minutes ago, Carl said: another approach I use for this type of thing is the " @shshaw grid layering technique " Wouldn't the container of the grid still need to have position absolute or fixed to do the scroll effect? Link to comment Share on other sites More sharing options...
Carl Posted December 2, 2020 Share Posted December 2, 2020 perhaps. css isn't my specialty. 1 Link to comment Share on other sites More sharing options...
JoshM Posted December 2, 2020 Share Posted December 2, 2020 Hoping I can quickly jump in here - this actually helps with something I've just started working on, so thank you. Although I'm currently stumped on how to track when a particular panel has entered the viewport (to trigger another timeline) if they're all absolutely stacked on top of each other. Is there an easy way to do this without having to calculate the height of each? Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 2, 2020 Share Posted December 2, 2020 Hey @JoshM and welcome to the GreenSock forums. Carl's second demo in his first post shows how to do that sort of thing. But there are other approaches as well, the best depends on your setup and needs. I recommend creating a minimal demo of your situation that clearly shows what you're trying to do and the issue that you're running into and then create a new thread asking about it. Link to comment Share on other sites More sharing options...
PointC Posted December 2, 2020 Share Posted December 2, 2020 7 hours ago, Carl said: perhaps. css isn't my specialty. Is this you @Carl? (All the CSS experts hate this GIF, but it makes me laugh each time I see it.) 3 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