ScrollTrigger help with horizontal scroll

[andev]

I'm a junior developer and it's my first time creating an animated section with GSAP. An example of the animation's behavior is shown in the attached image.

 

There are 5 elements on the page, of which only 4 are visible. As you scroll, the images should move to the right and accordingly disappear and reappear. When an image reaches the element with the number 4, everything should shift so that the fifth element is visible and then the subsequent sections that are on the page. Can someone help me with this?

See the Pen bGOQmoy by PawlikA (@PawlikA) on CodePen

[Carl]

I’m not at my computer and it’s unlikely I’ll have the time necessary over the weekend to be of much help. However, this is a fairly intriguing scenario. 
 

it’s clear you’ve put some effort into this and you know a fair bit about gsap and ScrollTrigger. 
 

i have quite a bit of experience and after thinking of this for awhile I’m still not exactly sure how I would approach it. However, I do think you could do it by putting the majority of animation in one timeline that you scrub through with a single ScrollTrigger. 
 

in fact I would strongly suggest that you take some time to approach this fresh and just make all the animation work without ScrollTrigger. 
 

this serves 2 purposes:

 

1 it forces you to make sure you understand exactly what needs to happen on the animation side. 
 

2 it gives us a much better idea of what the final product should look like and better see where things like loops, callbacks, and additional scrolltriggers can be used to streamline the process. 
 

I’m guessing this will also need to be responsive which is hard to account for later in the process. So that’s another thing to have planned out prior to adding ScrollTrigger too. 
 

there is no standard way of approaching these types of animations and it takes a lot of experimenting to find a solution that works best. 
 

from the demo and images you provided there are still quite a few unknowns. If you can provide a more complete animation mock-up without ScrollTrigger then myself and others will be better suited to offer some actionable guidance. 
 

again I think a lot of this can be done by scrubbing a single timeline. 

[Carl]

Although this relies on svg I think some of the basic concepts could apply

 

 

See the Pen KKmZYGy?editors=1000 by snorkltv (@snorkltv) on CodePen

[Rodrigo]

Hi,

 

I don't have time to go through all your code so instead I came up with, what at least I consider, a good starting point for this:

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

 

Hopefully this helps getting you started.

Happy Tweening!