ScrollTrigger horizontal scroll only when activated

[jackkemm]

Hi there,

 

I am looking for an opinion on some ScrollTrigger functionality.

 

I am creating a horizontal timeline which I don't want active until a user clicks on a button to make it active - this timeline could have many years and I only want it to work if a user interacts.

 

The issue I am having is creating the ScrollTrigger on click, there is a layout shift (to be expected).

 

There is a starting/intro panel where the button is which is 100vh/100vw and was going to clone this to act as an overlay until the ScrollTrigger has been created to hide the layout shift, but not sure this is a suitable solution.

 

I tried pairing this with enable/disable, but on load the pinSpacing exists which isn't what I want when I need it to be disabled, but also the pin divs gets added/removed too which also causes another layout shift (again to be expected).

 

Now I can go for the panel overlay route to hide the creating/shifting until it's ready, but I was wondering if having my scrollable content in a modal which only appears when the user clicks is a better solution. I see there is a .scroller property which may be handy, but not sure on the best way to use it in a modal for example. Are there any examples of how this can be implemented?

 

Thanks in advance!

 

Jack

[Rodrigo]

Hi,

 

Sorry to hear about the issues and yep what you're trying to do sounds like quite a pickle. On that not it'd be really helpfull if you could provide a minimal demo showing what you have so far in order to get a better idea of what your setup looks like, how you're trying to build it and what the best course of action would be.

 

In the mean time the only advice I could offer you is try to set pinSpacing to false and just accommodate your HTML and CSS accordingly. I know that it's far easier to write a one-line suggestion than actually doing that, but beyond that I can't think of any other idea rather than the way I'd approach this.

 

Sorry I can't be of more assistance. Let us know if you have more questions.

 

Happy Tweening!

[jackkemm]

Hi Rodrigo,

 

Thanks for the response.

 

I will try and set up a simplified Codepen today to hopefully get a better understanding.

 

I appreciate the idea there. If setting pinSpacing: false, how would I account for the scrolling space which pinSpacing cleverly fixes?

 

Anyway, the above question may be answered when I get a Codepen set up.

 

Please bare with and I will post the link in here!

 

Thanks,

Jack

[jackkemm]

Hi Rodrigo,

 

Was quicker than expected to set up

See the Pen a12381251fdbd3eeb29dfa765dc04606 by jackkemm (@jackkemm) on CodePen

 

If you scroll down to the the blue panel and click the trigger button, I am creating the ScrollTrigger. There is then a close button which takes you back to the start and disables the ScrollTrigger (removing the pin spacer div etc).

 

So everything seems to work fine on initial trigger, then if you scroll down when the ScrollTrigger is disabled after close and trigger it again, it scrolls back into place and then jumps slightly after the ScrollTrigger has been re-enabled.

 

It looks fine if it's lined up perfectly when triggering, the issues seem to arise if the div is not aligned when triggering.

 

My version on the site I am building jumps too but then scrolls back into place after, maybe because I am using ScrollSmoother here too - but this still gives a good understanding of the issue I am having.

 

Hope this gives you a better understanding!

 

Thanks,

Jack

[Rodrigo]

Hi,

 

First a note regarding the Codepen example. It was great as it is super simple, but for future examples keep in mind that private codepens can't be forked so I had to copy/paste it. No biggie as it's actually super simple to select all the code on each panel and paste it into a new codepen, but it took me about 2-3 minutes to figure that you are using SCSS since the styles were a bit off.

 

Here is an example that hopefully comes closer to what you're after:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[jackkemm]

Hi Rodrigo,

 

Sorry about that, will remember for next time!

 

Thanks for the solution. I will have a look and see what you've done and go from there.

 

Will get back to you when i'm happy

 

Thanks again!

 

Jack

[jackkemm]

Morning Rodrigo,

 

What you sent worked like a charm.  I tweaked it a little using a setTimeout in my project as there was still a slight jump, but the additions you made is making sure I get to the right positions before enabling/disabling the ScrollTrigger.

 

Thanks again!

 

Jack