Scroll children on fixed pin parent

[Akash Ranjan]

Hi,

 

I am trying to scroll the contents in the text-block while pinning the parent. But as you can see in this demo the scroll is taking children of both the parent divs.

 

I want it like once the first section i.e {.phone-text-scroll-block} has finished scrolling the other {phone-text-scroll-block} should come as a pinned layer

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

and then the same animation repeats as the first one.

 

Please help me.

Thanks

 

 

See the Pen wvPqNBz by akashrwx (@akashrwx) on CodePen

[OSUblake]

Hi Akash,

 

I've read your questions several times, and I'm really confused about what you are asking. How are you expecting something to be pinned and scrollable at the same time? 

 

[Akash Ranjan]

Hi @OSUblake,

 

Sorry for the confusing question. Let me try to simplify it.

 

There are 2 sections with same class and interaction. ( <div class="phone-text-scroll-block">).

 

So first I want the first section to be pinned and the text contents (On the right side of phone image) to scroll.

 

Then the second section will scroll up like a layered pin section as shown in this demo (

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

) and the same text section animation happens like first section.

 

 

 

 

[OSUblake]

That demo really isn't pinning the sections, it's just animating them up. This demo is doing more of a pin, is that what you are going for?

 

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

 

And like most ScrollTrigger related animation questions, I would suggest getting your animation the way you like first without ScrollTrigger. Once you have it working correctly, then hook it up to ScrollTrigger. Your text animations could all be part of a single timeline. You just need to make use of some durations and the position parameter.

 

If you're going for the layered demo like you posted, then at the end of the timeline you would just animate the section up. If you are going for the layered demo like I posted, then it should just continue on with the layered effect once the timeline has ended.

 

[Akash Ranjan]

Hi @OSUblake,

 

I tried using creating that using animations first but don't know why i am unable to layer scroll the second section and then pin it.

 

https://codesandbox.io/s/fervent-pare-ptxt4?file=/src/App.js

 

I have created a minimal demo for this. Everything i working fine except I want the last text to not go up and the second section to scroll up as layer and then pin in place. Please Please help me

 

Thanks

[OSUblake]

Hi Akash, 

 

Like I was saying, that layering is all done with a single animation. So make a timeline, and add what you need in between. How long something appears can all be controlled with durations and the position parameter.

 

Just a really simple example of rotating some text.

 

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

 

[Akash Ranjan]

Hey @OSUblake,

 

Thanks a lot for this demo. You are a savior. This solved my problem.

 

https://codesandbox.io/s/fervent-pare-ptxt4?file=/src/App.js

 

The only problem is that I have a bit of extra empty space after the animation. How can I remove it.

 

Thanks again

 

 

[OSUblake]

8 minutes ago, Akash Ranjan said:

The only problem is that I have a bit of extra empty space after the animation. How can I remove it.

 

Where? Do you mean after the 4th item?

 

 

 

 

[Akash Ranjan]

No after the second slide ends there is almost 100vh of black emply space

 

 

[OSUblake]

You'll need to prevent animating the last panel up, kind like this.

 

https://codesandbox.io/s/reverent-northcutt-ujcypt?file=/src/App.js

 

[Akash Ranjan]

Wow the last panel trick was really new thing for me. Thanks a ton @OSUblake

 

 

[Akash Ranjan]

Hey @OSUblake,

 

I just noticed one small bug. It is something I always fall prey off. So the scroll trigger start points move out of place on page load which I found i due to fonts.

 

So basically the browser loads fonts little later which changes the height of viewport. Can you tell me how I can reload the scrolltrigger positions once the page is completely loaded

[OSUblake]

You can use something described here to know when the fonts are loaded...

 

https://stackoverflow.com/a/32292880/2760155

 

And then do ScrollTrigger.refresh()