Share Posted February 14 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 More sharing options...
Share Posted February 14 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 More sharing options...
Author Share Posted February 15 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 More sharing options...
Share Posted February 15 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 More sharing options...
Author Share Posted February 15 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 More sharing options...
Share Posted February 15 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 16 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 Link to comment Share on other sites More sharing options...
Share Posted February 16 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? Link to comment Share on other sites More sharing options...
Author Share Posted February 16 No after the second slide ends there is almost 100vh of black emply space Link to comment Share on other sites More sharing options...
Share Posted February 16 You'll need to prevent animating the last panel up, kind like this. https://codesandbox.io/s/reverent-northcutt-ujcypt?file=/src/App.js 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16 Wow the last panel trick was really new thing for me. Thanks a ton @OSUblake 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 16 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 More sharing options...
Share Posted February 16 You can use something described here to know when the fonts are loaded... https://stackoverflow.com/a/32292880/2760155 And then do ScrollTrigger.refresh() Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now