Scroller-start/end & Mobile problems

[ELmanuelito]

Hey guys
I'm pretty new here and I have a important project due soon. I used fake horizontal scroll on my site and then stumbled across greensock. First of all, thank you for this great plugin. I think it's power is incredible, but I'm not sure what I'm doing wrong. Let's describe my problem: 
First I got rid of the fake Scroll and tried to implement this solution to my page.

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

The problem is, although it works fine on desktop, I think the scroller-start & end is somehow not tied on the horizontal scroll position.  I''ve tried to showcase my structure on this codepen example (at the bottom of the post). Although I'm not sure if this is the same as in my project, because I have a lot more code that might be the cause of the problem. But this is the shell of the outer container, and my site behaves the same (on desktop at least) 

The second problem is as mentioned mobile. I cant tap further than the fourth section (400% width) on mobile, then it gets blocked by gsap for some reason. I'll attach a screenshot.

 

 

And the other problem on mobile is I can scroll down very far (second screenshot) because the pin spacer and end markers are down there for some reason.

 


Do you maybe have an idea what I'm doing wrong? I would be incredibly thankful if one of you pros could have a look into it. 
Best,
Manuel

See the Pen vYpwGbq by mclauch (@mclauch) on CodePen

Edited April 24, 2022 by ELmanuelito
structure of post was a bit messy, hopefully better this way

[akapowl]

Welcome to the GSAP forums @ELmanuelito

 

1 hour ago, ELmanuelito said:

I think the scroller-start & end is somehow not tied on the horizontal scroll position. 

 

Technically it will never be, as there actually is no horizontal scrolling here at all  ...but I get what you meant. The problem is, that you set the end to an absolute value of 6000. For what you want you would need to make the end dependent on the container's scrollWidth. Something like this - the substracted clientWidth is to make it equal to the amount you are tweening the panels to the left.

 

end: () => "+=" + (container.scrollWidth - container.clientWidth)

 

 

 

The other thing is probably just some styling issues. Especially when working with flex and expecting the flexed elements to be of fixed dimensions, it would be best to set their flex-properties ( like flex-grow, flex-shrink and the flex-basis, or use the flex shorthand ).

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex

 

Alongside that I set the width of the container to auto and the height to 100vh.

 

Also, sometimes it will be neccessary to set overflow-x to hidden not only on the body but also on the container element that has overflowing content, because  it can create issues with the viewport on mobile - but here it seems to be the exact opposite so it is not set on the container.

 

Sometimes you'll just need to tinker with things a bit. All things considered this should work a bit better now - it does for me. I hope it will help.

 

There are lots of other fake-horizontal demos on the ScrollTrigger demos page and in this and this showcase over on codepen - slightly different requirements just need different approaches sometimes.

 

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

 

[ELmanuelito]

Hey akapowl first of all, thank you so much for your time! I can't tell you how grateful I am that actually somebody responds and that so fast. Thank you thank you! 

I've tried to implement your suggestions and it did indeed change up somethings. I do have the feeling this is almost the solution. So if I understood you correctly and changed things accordingly, this should now work both ways? I actually got the scrolling to the point where it works on desktop and does not mess up mobile. But I have the feeling that something is still wrong with these scroller start & end markers. (or the orientation of my page). Because they are still over each other (screenshot) and animations don't work on mobile because the start and end never meet there, only on desktop if I don't use containerAnimation. That doesn't work on desktop either. 

I've set the regular css code (mobile first page) like this:
 

body {
  overscroll-behavior: none;
  height: 100%;
  width: 100%;

  overflow-y: scroll;
  overflow-x: hidden;  
  
}

.container {
  overscroll-behavior: none;
  width: auto;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
 
  overflow-y: hidden;
  overflow-x: scroll;  
}

And the media queries like this: 
 

body {
    overflow-y: hidden;
    overflow-x: hidden;  
  }
  
  .container {
    overflow-y: hidden;
    overflow-x: hidden;   
  }

And like this it feels good on desktop and doesn't mess up mobile. 
But if I add my animation it only works on desktop because start and end markers are all on top of each other. 
Oh and my animation works on desktop only if I remove the containerAnimation: scrollTween, maybe you also know what I did wrong there? 
 

gsap.registerPlugin(ScrollTrigger);

let container = document.querySelector(".container");
let sections = gsap.utils.toArray(".panel");

let scrollTween = gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    markers: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + (container.scrollWidth - container.clientWidth),
  }
});


gsap.to(".d-line-black",{
  scrollTrigger: {
    //should pin the animation to the timeline
    containerAnimation: scrollTween,
    trigger: "#navi",
    markers: true,
    toggleActions: "restart pause reverse pause",
    start: "center left",
    scrub: true,
    
  },
  y: 700,
  duration: 3
})

Again thank you so much for your patience with my idiot code, I would love to pay you a dozen coffes at least for your help afterwards. 
Best,
Manuel

[akapowl]

 

54 minutes ago, ELmanuelito said:

Hey akapowl first of all, thank you so much for your time! I can't tell you how grateful I am that actually somebody responds and that so fast. Thank you thank you! 

 

Happy to help, but I'm not sure I'm following.

 

The positioning of the markers looks correct to me - what you are seeing on top of each other there are just the trigger points within the viewport - as they are set to be dependent on the viewports top, that's  where they are. When the end respective to the trigger element passes that point, that's where it will end.

 

 

 

 

Sometimes markers can tend to blow up the layout a bit just due to the way they need to be positioned. I now noticed that this will be the case in mobile view with markers set to true in my example above, but setting overflow to hidden on the container appears to fix things with that regard. [overflow-x was causing the pen to not be scrollable in the embed here before, that's why I commented it out before - but overflow seems to do the trick]

 

Does that work better for you?

 

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

 

 

 

I'm not sure what might be wrong with that other trigger of yours specifically as it doesn't appear in your demo, but for me it works fine with the containerAnimation on both, mobile and desktop. You can not have scrub and toggleActions both work their magic at the same time though. They are different methods for how to control a tween that is hooked up to a ScrollTrigger. If you have both set, the scrub will always win over the toggleActions and take control.

 

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

 

[ELmanuelito]

Hey akapowl thank you again for your fast reply, sorry I couldn't update you earlier, this project is getting a bit over my head. 

First of all, your explanations make sense about the markers. So I think they probably work as intended, I might just be doing something wrong with the viewport. 

Sorry that I didn't include the line of the animation. It's maybe way more easy if I just share the whole project with you on our Student Serverspace. The animation is on the second Section called #navi. Also I've removed a lot of the images as I'm posting this online now. This shoulnd't change the showcase.  
https://manuelr.mywdd.info/testfile.html

Although containerAnimation works fine on the codepen demo, it won't work in my project. I removed the toggle but the animation only plays if I remove containerAnimation. But this is actually not that huge of a problem. As long as it works somehow. My main problem right now is really mobile.  The animation wont work there, and I see with the markers turned on that start and end never touch as they do not move at all in mobile. If you had one last tipp on how to solve that I'd be incredibly grateful. You have already helped me so much, I know I shouldn't ask for more. 

Best regards,
Manuel

[akapowl]

34 minutes ago, ELmanuelito said:

It's maybe way more easy if I just share the whole project with you on our Student Serverspace.

 

Actually it is not - while it may be easier for you, it doesn't make it easier for those who are willing to help here.

 

For one, there usually is way more code on a live website than neccessary to reproduce the problem at hand, then there might also be other things interfering etc. - there is just too much involved and it would only take longer to get to the core of the issue (see the forum guidelines) and we can not even tinker with the code and test things. That is why debugging live websites is out of scope for these forums and a minimal demo is being asked for.

 

 

34 minutes ago, ELmanuelito said:

I removed the toggle but the animation only plays if I remove containerAnimation.

 

I took a quick look: the problem might be that you have set the start to "left left" meaning 'when the left side of the trigger element hits the left side of the viewport' - your trigger element is only a handful of pixels wide and you've got a scrub: 4 set, meaning it will take 4 seconds for the tween to catch up with the actual scrollposition - so after it hits the trigger point, your line will probably be long out of view before you could even notice any changes on the element. Keep in mind: all that is with regard to containerAnimation being set - not the way you've got it set up now.

 

If changing things with regard to the start and or scrub ( I would recommend just setting the scrub to true if you connect it to a containerAnimation) doesn't change anything for you, and you still need help, please provide an updated demo.

 

As for the viewport issues:

The last codepens I provided don't show the issues you mentioned with that regard for me, so I'm not sure how else to help with that 🤷‍♂️

[ELmanuelito]

Hey again 

Wow you are fast. I'm really sorry. This wasn't about me being lazy to show you my problem. I really thought it would be more understandable this way. But I do see the reason for these codepen demos now. I couldn't reproduce the problem in Codepen, that's why I thought it would be better on my workspace. 

First of all the scrollAnimation Problem. This seems now resolved. I don't know why it wouldn't work before, I've added center left as you proposed and it didn't work. Now it does. Thank you for your tip, I probably set start and end wrong, as you suggested.

I've set the scrub on 4 on purpose, that I see it moving. If I set it to true, it still is not moving. This can now also be seen on the codepen. 

See the Pen JjMQdmL by mclauch (@mclauch) on CodePen

Anyway, I think I could reproduce the problem now (yey). I added my media queries that I need to make it look ok on both devices. 
And if we go to mobile now we can see this

(screenshot from project) and this

(screenshot from codepen) which seems to be the same problem. As this only comes to play in mobile, I suppose my mobile overflow: hidden properties are the problem again. 

You have probably already given me the solution, and I'm just too dumb to understand it. If you need to close this topic or something just go ahead and I will just try everything and ask my teacher about this.

Thank you again for your help! 

[akapowl]

 

Honestly, I would recommend slowing down the pace a bit. It looks a bit to me like you are trying to turn too many wheels at once here and everytime you want to fix one thing, you create another issue - I get it, it's a lot to take in and that happens to me more than enough. 

 

46 minutes ago, ELmanuelito said:

First of all the scrollAnimation Problem.

 

It's not scrollAnimation but containerAnimation  - you have scrollAnimation in your code, too, and that is not valid.

 

Next thing is the start and end: I'm not sure if those are what you want them to be. The 'center left' as the start and 'right left' as the end only works in my previous example because I set a different trigger element which is much wider than your bar.

 

As it stands, in your example it would start when the horizontal center of the bar hits the left of the window and end when the right side of the bar hits the left of the window - so if you scroll with a decent speed, you will not see very much of that animation - again; especially with that scrub set to 4.

 

The first parameter of start and end always is is related to the trigger element and the second parameter always is related to the scroller/window/viewport. I've changed those up a bit here to clearly show a difference.

 

Maybe read up on start and end once more in the docs

 

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

 

 

 

I'm not sure why you need those media-queries - does the setup of the codepen in the other post of mine not work for you?

 

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

 

 

 

Because it does for me - the same on desktop as on mobile. The only thing that I could imagine is that maybe you don't actually want the ScrollTrigger to be active on mobile but instead use native horizontal scrolling? ...if so, you would have to set things up with ScrollTrigger.matchMedia() to create different setups for different viewport-widths.

 

But again, I'm not sure I'm following, so I might be totally wrong about that and don't know how else to help but point you to that setup I already proposed.