scrolltriger ScrollTrigger: Image sequence scroller inside first horizontal scroll slide

[Tieske]

Hello,

 

I would like to accomplish the following:

 

Step 1. Scroll down to horizontal scroll section. Keep scrolling until image sequence finishes in slide 1.

Step 2. After image sequence is finished, we need to horizontal scroll to slide 2. Then, we need to animate a background image position in slide 2 with some overlay text.

Step 3. Stop horizontal scroll functionalities and scroll to rest of the page

 

See attachment for a visual explanation.

I have a basic understanding of ScrollTrigger, but I think this is a trick which can be implemented in a very specific way. Can someone please help me with this?

 

Thanks!

 

See the Pen BaYmzqW by webberinteractief (@webberinteractief) on CodePen

[JakeWhiteleyDev]

Personally I wouldnt consider it as a scroll to the right at all.

 

What if you were to pin the image parent div for 2 * viewport height (as a suggestion), and then had a scrubbed animation which animated the xPercent of the img container -50% (assuming the two child images are of equal width). As you can scrub whole timelines with no effort, you can still animate the bg position as you are now in this scrubbed timeline.

 

That way the user is only every scrolling along the Y axis, but as the images are pinned it looks like they are scrolling horizontally.

 

Faking scroll direction is by far easier than actually making the browser scroll left/right etc.

 

Your codepen is basically this already

[Tieske]

1 hour ago, JakeWhiteleyDev said:

if you were to pin the image parent di

Thank you Jake for responding!

 

I understand what you are saying, but not everything unfortunately. I tried to tweak timelines etc. but I cannot get the horizontal movement and it's timing right. I understand that it is a fake horizontal scroll. Can you explain what I need te do in order to move the sections at the right moment?

 

Here is an updated version of the case:

See the Pen mdXqWww by webberinteractief (@webberinteractief) on CodePen

[Cassie]

Sure thing, we can step you through a bit!

Where's your baseline knowledge at. Are you comfortable with timelines and the position parameter?

This article is a good place to start if not.
 

[Tieske]

Hi Cassie,

 

Thanks for your  response. That is actually  a great video to help me think in timelines as a visual presentation. I will try this concept and hope I will expand my knowledge baseline

[Cassie]

Yeah, a great first step is to get comfortable with timing animations and spacing them out on a timeline.

ScrollTrigger is just a way to control the timeline really. Think of it like a timeline controller that's hooked into or triggered by scrolling. The core thing to understand is timelines and positioning tweens.