Jump to content
GreenSock

_username7777

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

Recommended Posts



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

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

@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 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×