How to freeze/pin the background container (100vh) until the text within it has finished scrolling?

[_username7777 0 Likes (Newbie)]

I want to pin/freeze the orange background container with full height (100vh) until the text has finished scrolling through.Once the text hits the bottom, the orange background should unfreeze and then I can continue scrolling until the next panel

If I add pin: true to #orange, it correctly freezes the background, however then I lose the scrolling text

ScrollTrigger.create({ 
    trigger: "#orange", 
    start: "top top",
    end: "bottom 150px", 
    pin: true 
});

How do i combine a pinned background, as well as pinned text?

See the Pen YzXdbQo by GreenSock (@GreenSock) on CodePen

[OSUblake 18,456 Likes (Superhero)]

Welcome to the forums @_username7777

 

You can't pin the background and the text as nothing would move. You could animate the text down, kind of like this, but is sure is funky looking.

 

See the Pen WNXVPvj by GreenSock (@GreenSock) on CodePen

 

[Carl 11,064 Likes (Superhero)]

5 hours ago, _username7777 said:

Once the text hits the bottom

I think this is confusing us as blake's demo shows it's kind of weird to have text going down when you are expecting things to scroll up.

maybe you meant something like this?

See the Pen mdqNoqX?editors=1010 by snorkltv (@snorkltv) on CodePen

 

feel free to elaborate if you need something else

[_username7777 0 Likes (Newbie)]

@OSUblake Yes thank you, your example is more inline with the behaviour i expected! 

You're right though, its not very smooth.. 

The text within orange content in my actual website is about 75% full, which makes it look even funkier.. 
When you scroll down, the text should scroll smoothly until the bottom of the text hits the container and then releases the fixed orange background 
Is there anything that can make the experience smoother? 

thanks!

[OSUblake 18,456 Likes (Superhero)]

You could slow it down by make the ScrollTrigger's end value longer, and maybe delay the moving down part by using the position parameter. Also, try using a number instead of true for scrub.

 

And for better performance, add will-change: transform; in your CSS to elements you are animating.

 

See the Pen LYePbBP by GreenSock (@GreenSock) on CodePen

 

 

[_username7777 0 Likes (Newbie)]

@OSUblake
Thanks for that example! I realised I misunderstood the behaviour, as you're right it does look funky..
It's meant to be the full screen background frozen, until the text within it has finished scrolling upwards, and then when the bottom of the text div hits the top of the container, then the background unfreezes 
Apologies, I think i got confused! 

See the Pen popzeqR by sophielihenry (@sophielihenry) on CodePen

I reversed this part: 
 

  y: () => orangeContent.offsetHeight - orange.offsetHeight,

And its showing the right behaviour now, where the text scrolls up! I still need to detect as soon as the bottom of this text has scrolled up, the full screen background should unfreeze, and i can now scrolll down.

There seems to be a bit of a lag still