Jump to content
Search Community

ScrollTrigger: Image sequence scroller inside first horizontal scroll slide

Tieske test
Moderator Tag

Recommended Posts

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!

 

ScrollTrigger-flow.jpg

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

Link to comment
Share on other sites

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 :)

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

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

Link to comment
Share on other sites

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 ;)

  • Like 1
Link to comment
Share on other sites

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.

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...