Jump to content
Search Community

ScrollTrigger: Horizontal Scroll pin-spacer height issue

Its_Lefty test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi there!


I'm currently trying out the fantastic ScrollTrigger Horizontal Scroll. Since almost all examples use scroll-sections with a height of 100vh, I wonder if it is also possible to use sections without a defined height.

 

I tried it myself by using a pen from this forums and removing the 100vh. The issue is that the height of the pin-spacer is still occupying the whole screen. You should view the CodePen below in Full Page Mode to see this.

 

Is it possible to match it to the height of the horizontal-container?

Thanks in advance! :)

 

screen.thumb.jpg.d15c86bc779873e5cbaf3cad6c39e01d.jpg

 

 

See the Pen oNoJwKz by ItsLefty (@ItsLefty) on CodePen

Link to comment
Share on other sites

Hi Its Lefty,

 

This video might help clear up how pinSpacing works and how tall it will be.

 

 

I'm not sure what you're trying to achieve here, but if you want the section after the horizontal part to be visible while it's pinned, then you would need to put it inside the same container as the horizontal part and then pin that container.

 

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello @Its_Lefty

 

To get that non pin-spacing-showing type of pinning, you could wrap your content in a div and pin that wrapping div instead.

In the demo below I wrapped all of the content, but you could also just wrap the parts that might be visible at any point.

[...and now after I wrote that, I realize that this is pretty much what Blake already pointed you to 😅]

 

Beware though: For any subsequent ScrollTriggers within that same wrapper/pin-spacer you will want to set the pinnedContainer property to have their starts/ends where you'd expect them to be. 

 

I hope that helps. Happy scrolling!

 

See the Pen JjOwryZ by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

10 hours ago, akapowl said:

Hello @Its_Lefty

 

To get that non pin-spacing-showing type of pinning, you could wrap your content in a div and pin that wrapping div instead.

In the demo below I wrapped all of the content, but you could also just wrap the parts that might be visible at any point.

[...and now after I wrote that, I realize that this is pretty much what Blake already pointed you to 😅]

 

Beware though: For any subsequent ScrollTriggers within that same wrapper/pin-spacer you will want to set the pinnedContainer property to have their starts/ends where you'd expect them to be. 

 

I hope that helps. Happy scrolling!

 

 

 

 

Hi there again!
Can you tell me how to modify the code so that the ending position is exactly after the last image?

 

ending.thumb.jpg.3bfc40dfb338700991d087c33dbac947.jpg

 

I've tried playing around with the padding-left value and the maxWidth in the JS but I'm struggling to achieve it. 🙁

Link to comment
Share on other sites

Very nice, thank you again, especially for additionally commenting the code! As I'm not a developer primarily, it is sometimes tough to accomplish the desired result. But I am definitely going to invest more time in reading the docs and atm I am watching the Vimeo-Videos, thanks GreenSock! 💚

  • Like 2
Link to comment
Share on other sites

On 3/3/2022 at 1:03 AM, akapowl said:

Beware though: For any subsequent ScrollTriggers within that same wrapper/pin-spacer you will want to set the pinnedContainer property to have their starts/ends where you'd expect them to be. 

I've just additionally tried this by adding another .to animation in the forEach part of the code and setting the appropriate pinnedContainer property. I'm using the .active class to trigger the text animation. Unfortunately it's not working correctly (the animation is only triggered once and also not reverting).
Is this the correct approach? Here is my attempt:

 

See the Pen YzEgBOv by ItsLefty (@ItsLefty) on CodePen

 

 

Link to comment
Share on other sites

8 hours ago, Its_Lefty said:

Is this the correct approach?

 

No, there are some problems with your approach.

  • you are targetting all ".horizontal__item h2" in every tween you are creating in the forEach loop when you'll actually only want to target the specific h2 in the section that is being looped over at that point. You'll want to do something like this
     
    sections.forEach((sct, i) => {
      
      const heading = sct.querySelector(".horizontal__item h2")
      
      heading && gsap.to(heading, {
        duration: 1,
        
        ...

     

  • You don't actually need this
     

      ScrollTrigger.create({
        trigger: sct,
        start: () =>
          "top top-=" +
          (sct.offsetLeft - window.innerWidth / 2) *
            (maxWidth / (maxWidth - window.innerWidth)),
        end: () =>
          "+=" + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
        toggleClass: { targets: sct, className: "active" }
      });


    That is just an older approach to toggling things within a fake-horizontal-scrolling scenario. Since GSAP 3.8.0 there is containerAnimation which makes things a lot easier in a scenario like this. You don't even need to toggle the active class on anything in your case, just use sct as the trigger. Here is what the docs say about containerAnimation
     

    containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

    See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

     and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 


     

  • 8 hours ago, Its_Lefty said:

    the animation is only triggered once and also not reverting


    Those are the default settings of toggleActions - which gives you the opportunity to change how the ScrollTrigger is suppsosed to control the tween onEnter/onLeave/onEnterBack/onLeaveBack. Here is what the docs say about toggleActions
     

    toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks again for your patience, it helped me a lot. It is working now. 🙂

One last issue with the start of the text animation: would it be possible to set the start of the text-animation accordingly to the pinned container position? So that the text animation starts as soon the container is pinned (it starts too early atm). I've tried setting the pinnedContainer parameter but it didn't help.

 

See the Pen QWOPwNO by ItsLefty (@ItsLefty) on CodePen

Link to comment
Share on other sites

1 hour ago, Its_Lefty said:

would it be possible to set the start of the text-animation accordingly to the pinned container position?

 

Sure it is, but you would have to add some sort of exception to the behaviour you have implemented so far for all the headings, like e.g. with if-statements in the forEach loop. Since that first heading is in the first .horizontal__item (which you are looping over) you could check wether the i(ndex) is 0 - if it is create a ScrollTrigger with one sort of behaviour, and if it isn't create the ScrollTrigger with that other sort of behaviour.

 

Something like this maybe:

 

See the Pen ExbJKZK by akapowl (@akapowl) on CodePen

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hi again!

I tried to combine the fake horizontal scroll with GSAP Draggable (without inertia) and it is working.

I have a section where the horizontal scrolling part is very small. That's why I'm thinking about removing the fake horizontal scroll and just use the draggable option instead. Is there an easy way to just use the draggable option and remove the fake mousewheel scroll?
I hope you guys don't mind to ask here again or should I open a new topic?

 

See the Pen YzEbOBy by ItsLefty (@ItsLefty) on CodePen

Link to comment
Share on other sites

Thank you for the example!

 

My pen above your post is already using draggable (thanks to examples from akapowl). My question is though, if I can just deactivate the fake horizontal scroll with the mousewheel and only have the Draggable movement. ScrollTrigger should still be included though, so that the animations fire.

 

All of the other examples using ScrollTrigger and Draggable in combination make use of the fake horizontal scroll so I'm not sure how to do this. Additionally I'm thinking about using matchMedia to switch between fake horizontal scroll on desktop and draggable at a specific breakpoint.

I'm trying to do it this way, because in my opinion it feels a bit weird swipeing vertically in order to move horizontally.

 

I guess this is hard to implement for a beginner like me, do you know of any examples using this?

Atm I'm reading this topic with a similar approach:

 

Link to comment
Share on other sites

9 hours ago, Its_Lefty said:

My question is though, if I can just deactivate the fake horizontal scroll with the mousewheel and only have the Draggable movement

 

I'm confused because you said you didn't want the fake horizontal scroll and just Draggable, which is what my demo is showing.

 

And on mobile, you don't even need to use Draggable as a regular horizontal scrolling container is swipeable.

 

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.
×
×
  • Create New...