ScrollTrigger position fixed jumps

[xoxoxoxo]

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

[ZachSaucier]

Hey nullhook. I might set it up this way:

See the Pen ZEWedXR?editors=0100 by GreenSock (@GreenSock) on CodePen

[xoxoxoxo]

This seems to fix the jump but it breaks how .layer and .cover divs behave... You can see it Here
 

[ZachSaucier]

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.

[xoxoxoxo]

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.

[ZachSaucier]

Like this? 

See the Pen gOrWOPp?editors=0010 by GreenSock (@GreenSock) on CodePen

[skyfy]

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,

},

})

}, [])

[ZachSaucier]

@skyfy Please create a new thread and create a minimal demo of your issue if you'd like our help debugging:

 

[xoxoxoxo]

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.

[xoxoxoxo]

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.

[ZachSaucier]

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!

[xoxoxoxo]

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.

 

 

[ZachSaucier]

@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

[xoxoxoxo]

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

[ZachSaucier]

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.

[xoxoxoxo]

Thanks, this works!

[xoxoxoxo]

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

[ZachSaucier]

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.

[xoxoxoxo]

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

[ZachSaucier]

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.

[xoxoxoxo]

Ok so that worked. I don't get why #container doesn't need absolute positions but .panel does.