xoxoxoxo Posted August 26, 2020 Share Posted August 26, 2020 Hi folks, Absolutely love the new ScrollTrigger plugin! I have an `.interim` div which basically stays in the normal flow. The `.group` div below should be fixed so it feels like the `.interim` div is revealing the `.group` div. This works fine with the code I've written, however I see the scrollbar on my browser jumps a bit and I know it has to do with toggling position. Is there an elegant way to do this? See the Pen vYGxVXz by taher-space (@taher-space) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Hey nullhook. I might set it up this way: See the Pen ZEWedXR?editors=0100 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 26, 2020 Author Share Posted August 26, 2020 This seems to fix the jump but it breaks how .layer and .cover divs behave... You can see it Here Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Please try to remember to use the "fork" button when making new versions so that old version are retained I don't remember what the original looked like (I am working with a lot of demos in these forums, hah). If you just want the text on top then z-index: -1; on .cover fixes it. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 26, 2020 Author Share Posted August 26, 2020 Whoops, sorry. Do you see how the first two divs behave? Where the text div is pinned and the image div comes in and both moves up, normally. I expect this to happen for the content that's below the violet background. The content below just breaks that functionality. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Like this? See the Pen gOrWOPp?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
skyfy Posted August 26, 2020 Share Posted August 26, 2020 Hello, Sorry for intruding into this thread, I tried similar approach in Gatsby , some reason it's not working . Below is the use effect code I tried to make it work. Any suggestion would be greatly appreciated. cheers -ak useEffect(() => { gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ paused: true, scrollTrigger: { trigger: titleRef.current, pin: true, start: 'top top', scrub: true, markers: true, pinSpacing: false, }, }) }, []) Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 27, 2020 Share Posted August 27, 2020 @skyfy Please create a new thread and create a minimal demo of your issue if you'd like our help debugging: 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 27, 2020 Author Share Posted August 27, 2020 Zach, Back to my original pen here: See the Pen poyPypy by taher-space (@taher-space) on CodePen (forked it for you) - Do you see how there is more room to scroll when the interim div reveals? In your solution I see it the image follows instantly and if I increase interim's height to 200vh the content below are lost. If you increase the height of interim div in my example you can see the content in the back stays similar. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted August 27, 2020 Author Share Posted August 27, 2020 Ok, so I got this working by adding a `ghost` div and changing the end trigger. The markup seems a bit weird though. Doesn't feel linear. Any thoughts on how I can improve it overall? Essentially, `.content-on-bottom` should be able to group my `.layer` and `.cover` together along with the ghost div so it's all part of one div instead of isolating them. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 27, 2020 Share Posted August 27, 2020 Sorry, optimizing markup is a little out of scope of these forums as we don't have the capacity to do that in every circumstance If you have a GSAP question please let us know and we'll do our best to help! Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 8, 2020 Author Share Posted September 8, 2020 I'm going to bump this as I ran into an issue if I'm doing subsequent divs that needs to be revealed along with keeping the original solution. Zach, your setup for pinning the div along with using css pseudo element works for one div only. How would I setup scroll triggers if I want to setup something like above: You can see every other div is already pinned in the back. Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 @nullhook I think you're wanting something like this demo? It's listed in the demos list in the ScrollTrigger documentation FYI. See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 9, 2020 Author Share Posted September 9, 2020 Yep, I saw the demo the other day and created a test case below. I think I almost have it. However, if you notice, all image's div move up at the same time. See the Pen wvGyRqZ by nullhoooook (@nullhoooook) on CodePen EDIT: new pen link Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 10 hours ago, nullhook said: if you notice, all image's div move up at the same time. You're making one of the most common GSAP mistakes: using a generic selector when you want to use a specific target. You should use loops to create a ScrollTrigger for each section and make the targets specific to each section. I talk more extensively about how to do that in my article on animating efficiently. 2 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 9, 2020 Author Share Posted September 9, 2020 Thanks, this works! Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 10, 2020 Author Share Posted September 10, 2020 Hi Zach, When I add elements as an ancestor to the pinned element it gets rendered at top and this make sense because the pinned div is basically a fixed div with computed height. However, I'd expect ancestor elements to be rendered in the normal document flow. How can I go back to normal document flow with ScrollTrigger? Do I have to grab the height of the pinned element and push it down manually? There must be a ScrollTrigger way of doing this. Test case: See the Pen wvGyRqZ?editors=1010 by nullhoooook (@nullhoooook) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 10, 2020 Share Posted September 10, 2020 Please use the "fork" button when creating new versions of your demos so that context is not lost in these forums. I see no "[adding] elements as an ancestor to the pinned element" in the pen that you provided. If you'd like our help debugging please make a minimal demo that recreates the issue that you're having. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 10, 2020 Author Share Posted September 10, 2020 New pen below: Do you notice the `.content` div is rendered top of the `#container` div. My expectation would be it would render below the .container div. See the Pen poyLKdP by nullhoooook (@nullhoooook) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 10, 2020 Share Posted September 10, 2020 That has nothing to do with ScrollTrigger. That is just because you absolutely positioned the #container. Remove the position: absolute and it will be rendered at the end. 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 10, 2020 Author Share Posted September 10, 2020 Ok so that worked. I don't get why #container doesn't need absolute positions but .panel does. 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