Jump to content
GreenSock

Akash Ranjan

Scroll children on fixed pin parent

Recommended Posts

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

Link to comment
Share on other sites

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? 

 

Link to comment
Share on other sites

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.

 

 

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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?

 

image.png

 

 

 

Link to comment
Share on other sites

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

 

 

Screenshot 2022-02-16 113030.png

Link to comment
Share on other sites

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

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.
×