deodat Posted November 29, 2020 Share Posted November 29, 2020 Hello, I'm trying to scroll sections horizontally with a first section that scrubs the time a split text is animating (that one works). The problem is that my others sections seem to go below the first one with the pin and scrub of this last one. And I can't scroll the sections anymore (if I remove the split text animation, it does). I've tried many things (pinSpacing, etc.) but I can feel I miss something important. Any help very much appreciated, Deodat See the Pen PoGwezG by deodat (@deodat) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 29, 2020 Solution Share Posted November 29, 2020 Hey @deodat This whole approach would probably be way easier if you were to really scroll horizontally, instead of faking the horizontal scroll. I would actually be doing quite a few things different, because the approach you try with setting your sections to display: none and on complete of the pin to display: block actually brings the whole thing pretty much out of control. Here is how I would tackle this: Don't set those sections to display: none and let them be flexed inside that container like they are supposed to. At first you might think, since those sections each have a height of 100vh thus the body would have a height of 100vh it wouldn't be scrollable now. But that will change when we get to the actual pinning of things - because of the pinSpacing. So don't worry about that for now. Don't use that ScrollTrigger on your tlFadeOutTitle-timeline for pinning at all, but soleley for the scrub-animation of your text there. Add a seperate ScrollTrigger, that only handles the pinning part. But unlike you tried to do, it should not only pin the intro-section here, but the whole container now for the 'duration' of your fake-scroll x-translation-tween plus the duration of the intro-text-tween. ScrollTrigger.create({ trigger: container, invalidateOnRefresh: true, pin: true, start: () => 'top top', end: () => `+=${container.scrollWidth - document.documentElement.clientWidth + window.innerWidth * 1.0}`, }) Because the container will be pinned all the time, thus it won't move on the vertical axis, change the trigger of the x-animation-ScrollTrigger to your #wrap instead - with its start set to start: () => `top top-=${window.innerWidth * 1.0}`, so the x-translation-tween will start after the duration of the tlFadeOutTitle-timeline has passed. Also adjust the end accordingly, so it fits nicely with the animation 'duration'. end: () => `+=${container.scrollWidth - document.documentElement.clientWidth}` Doing all of the above results in this, which is pretty much what I understood you wanted. Not the easiest to wrap your head around, as you can see. See the Pen c7fef15d9dfeb9f5d7155ba6d5e592f8 by akapowl (@akapowl) on CodePen Hope this helps you in getting where you exactly want with this, though. Cheers, Paul 3 Link to comment Share on other sites More sharing options...
deodat Posted November 29, 2020 Author Share Posted November 29, 2020 Thanks you so much Paul for taking the time to explain all the process in details to me (and maybe others)! It's exactly what I wanted to achieve. I know it would have been a lot easier with a real horizontal scroll (I did it pretty fast with the vertical scroll) but it's not easy to scroll horizontally with a mouse I'm gonna to dissect it all and play with it! 1 Link to comment Share on other sites More sharing options...
akapowl Posted November 29, 2020 Share Posted November 29, 2020 Yeah, it's a bit messy on the JS part, since I didn't set the start and end in the same style as you did. Anyways; happy dissecting, playing, adjusting and most of all scrolling and tweening Cheers. Edit: @deodat I made some changes to the demo and description in the thread above, because I got some things mixed up. It worked, but it didn't feel quite right. Should be better now, if I didn't mix something up again. 3 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