Horizontally scroll a wide image while scrolling vertically?

[waffl]

Hello! This is my first post, I came across Scrolltrigger while initially researching scrollmagic and realized that one of the official examples (codepen.io/GreenSock/pen/eYpOZvX) is so incredibly close to what I'm hoping to achieve but i can't quite get it to work.

 

I need to essentially scroll a large wide image horizontally from right to left, while scrolling down the page.

 

The image needs to be fully visible (thus no taller than 90vh or so), and thus have a dynamic width. Ideally, it begins moving before it reaches the top of the screen, and the page can keep scrolling vertically before it is complete.

 

Is something like this achievable with Scrolltrigger/Scrollmagic? I've been experimenting a bit but having difficulty I believe simply because I am not familiar with the framework. I'm finding it works when the image is near the top of the page but not at the bottom where it becomes a bit broken/jumpy.

 

Please pardon the terribly quick sketch of what I am trying to achieve. Endless thanks in advance if someone could point me in the right direction

 

 

See the Pen qBaPRXa by wafflwaffl (@wafflwaffl) on CodePen

[akapowl]

 

Hey @waffl - welcome to the forums.

 

Of course that is possible with ScrollTrigger, and once you get a hang of it, you will notice that it's incredibly powerful.

 

Judging from your png, I suppose it is something like this, you want to achieve?

 

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

 

 

There is probably different ways to do this, but I chose to go with a fromTo-tween on the ScrollTrigger.

And I am tweening on the x-value instead of your approach of the xPercent here.

 

From: 

-( document.querySelector('#scroller').offsetWidth - window.innerWidth )

So a portion as wide as the window will stay visible (thus the right side of the image will be meeting up with the right side of the window initially)

 

To: 0

So it will tween to it's 'original' position with the left side meeting up with the left border of the window in the end.

 

 

I removed the pin from your ScrollTrigger, so it remains freely scrollable, and set the

 

- start to 'top 75%' - so it will start when the top of the image hits 75% (from top) of the window

 

and the 

 

- end to 'bottom 25%' - so it will stop when the bottom of the image hits 25% (from top) of the window.

 

 

I also chose to use function-based values for the tween and add an invalidateOnRefresh: true to the ScrollTrigger, so it properly responds to resizes.

 

 

 

It might seem like a lot to wrap your head around at first, but it actually isn't that complicated.

 

Hope this helps.

 

Cheers,

Paul

 

[waffl]

Wow @akapowl not only is that precisely what I need to achieve, you've explained it so clearly that it's empowered me to do even more with this library moving forward!

 

Thank you so much I really appreciate it, I'm not only blown away by the library but how supportive the community is to a newcomer