Horizontal Scrolling Scrub timing (locomotive & scrolltrigger)

[ilike.idontlike]

Hey everyone!

 

I'm having some issues with getting my horizontal scrolling to time up right and have been scratching my head on this for a while now. 

 

As you can see Im using Locomotive scroll to create the horizontal scroll on mousewheel down and have scroll trigger timed up to my sections that wrap where my images would go (called .imger) and a background colour. What I would like to achieve is that the center of the background colour matches the center of the .imger when they are in the middle of the viewport. This works on certain screen sizes but since the imger is defined by the Vh the effect goes completely out of line at small or large screen sizes. I don't want to sync the animation of my .bg layer to Vh as the images will be different dimensions (some landscape and some portrait etc.) 

 

is there any other way of doing this?

 

Thankyou so much in advanced!

 

 

Click 'edit on codepen' to see the pen - I have no idea why it breaks when embeded? perhaps someone can also help with this?

 

See the Pen dyWpMyG by jo02 (@jo02) on CodePen

[akapowl]

 

Hey @ilike.idontlike

 

I'm not entirely sure that I'm clear about the expected outcome, but here are some notes on that:

 

If you want to get the timing right, the first thing that I would suggest is setting ease: 'none' on your tween. GSAP will by default set an ease of 'power1.out' and that will cause things to move at a different pace than you would probably expect over time/duration of scroll.

 

Then if you want the backgrounds to be centered when the respective imger is in the center of the screen, with the start and end of your ScrollTrigger an equal distance each away from the center of the screen, you would have to move them to a point on the left equal to the amount you have set them to be offset to the right initially - which would be -150vw in this case.

 

Also, if you want to make it responsive to resizes, I'd suggest using either functional values here alongside setting your initial transform with GSAP and/or a fromTo tween as I have in the demo below (which seems to properly work on resize).

 

Note: the way things are set up, now you would get a white area in between your backgrounds - so you'll likely want to consider adjusting the width of the background to your liking (I set it to 250vw here).

 

Is that more like what you wanted to achieve?

 

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

 

[ilike.idontlike]

Hey @akapowl

 

Thanks so much for getting back to me. the tip on the easing solved a massive headache I could not figure out before (i just expected default to be linear!). Im still seeing the same issue though on smaller sizes where the background isn't centre with the imger? I have no idea why though and im scratching my head over it. The only thing I can think is that the scroller-end and scroller-start positions are throwing it off somehow?

I've attached a screen grab so you can see what I'm getting at my end. (the first .imger should have a blue background and the second should have a yellow when the .imger boxes are in the middle of the viewport)

[ilike.idontlike]

I got it to work!! I did this to the start and end positions so they would update from the center with the viewport height;

 

        start: () => 'left center+=' + window.innerHeight*0.4,
        end: () => 'right center-=' + window.innerHeight*0.4,

This meant the trigger worked at all resizes of the browser  

now just to figure out why when i scroll all the way to the end. The horitzontal scrolling breaks 😕

[akapowl]

 

It worked for me with what I had suggested on smaller sizes, too, before changing the width of the background - I did not check again after changing the width - sorry for that. But the solution you came up with appears to be working just great - good job!  

 

47 minutes ago, ilike.idontlike said:

now just to figure out why when i scroll all the way to the end. The horitzontal scrolling breaks 😕

 

One thing I noticed, is that you are missing a closing </div> tag in your markup. That's not the culprit of the scroll breaking though. It appears just to be the markers messing with the setup - if you remove them it doesn't break anymore.

 

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

 

 

Edit: 

Well, it doesn't break anymore when simply just scrolling to the end.

There is an issue with locomotive-scroll though (of which I thought it would be the problem here at first - and it is not related to ScrollTrigger) when resizing down after reaching the end of the horizontal scroll, that you might not be aware of, mentioned in this thread here - just wanted to let you know:

 

 

[ilike.idontlike]

I actually just hacked around from google for that fix. and don't apologise please! I appreciate your help all the same! Thankyou so much!

 

Last bit thought is I really would like to get these snapping to the center of the viewport (after a delay, similar to the demo). I can't use the typical way because like I said earlier is they will all be variable widths (being images nd whatnot). I've tried a few different methods but nothing seems to work (like at all hahaha). Any suggestions?

[akapowl]

59 minutes ago, ilike.idontlike said:

Any suggestions?

 

My suggestion would be just the same that I have already given you in that older thread of yours  

 

 

 

 

Thing is, it does work properly with native horizontal scrolling (I did get it to work when removing everything related to loco-scroll from your pen) but unfortunatelly it does not appear to be working with locomotive-scroll here 🤔 In fact I can't get any snapping to work with locomotive-scroll and I have no idea why it does not work - maybe it's something in the scrollerProxy, but I honestly can't tell.

 

Maybe someone else has an idea?

 

Here's a simpler example with snapping in a native scroll-environment vs. locomotive-scroll. Not sure, I'm missing something obvious here that makes it not work (the loco-scroll one would need to be viewed in a new tab/window as in the preview it uses native scroll).

 

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

 

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

 

[ilike.idontlike]

Hahaha! I thought you'd say that. Yeah I tried your earlier suggestion with my horizontal locamotive scroll and it didn't work. I don't know why though, guess there must be a conflict like you say! I wonder if maybe it would work using scrolltrigger to horizontally scroll the whole container combined with your method snapping the sections? Alternatively I've been trying to hack together a way of using the scrollTo plug in to scroll the it to the center when it lands on one but I don't know if Locomotive scroll plays nice with this either. I'll let you know how I go