Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
deodat

ScrollTrigger, Horizontal Scroll, Split Text and Scrub

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

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:

 

  1.  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.
  2. Don't use that ScrollTrigger on your tlFadeOutTitle-timeline for pinning at all, but soleley for the scrub-animation of your text there.
  3. 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}`,
    })

     

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

 

 

  • Like 3
Link to comment
Share on other sites

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! 

  • Like 1
Link to comment
Share on other sites

 

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.

  • Like 3
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.
×