Best way to achieve scrolling blocks with a "slide" of images inside

[Joaquim Azevedo]

Hi all,


I'm new to ScrollTrigger, and I'd like to hear you suggestions on how to achieve the following layout:

Consider multiple blocks (full width and full height of page), each of those sections have text on the left, and images on the right. When the user scrolls, it should pin in the section, "scroll" all the images of its right side, and at the end of it go to the next section block. The user shouldn't "feel" that it's scrolling, i.e., the container must be fixed and I guess the blocks have to be absolute positioned so that they are in fact in the same "place", and use opacity to change the block. 

Could I hear anyone's thoughts on this?
 

[Cassie]

Hi there @Joaquim Azevedo,

 

Welcome to the GSAP forums! I hope you've been enjoying the tools. We love helping with GSAP questions, but you're going to be much more likely to get help around here if you've given a solution a go yourself.

 

There are a bunch of examples here -  https://greensock.com/st-demos

I bet one of them will give you a headstart!

[Joaquim Azevedo]

9 hours ago, Cassie said:

Hi there @Joaquim Azevedo,

 

Welcome to the GSAP forums! I hope you've been enjoying the tools. We love helping with GSAP questions, but you're going to be much more likely to get help around here if you've given a solution a go yourself.

 

There are a bunch of examples here -  https://greensock.com/st-demos

I bet one of them will give you a headstart!

Hi!

Thank you!
I've seen those, and I've tested a few things. 
I need something like this: 

See the Pen vYRexLQ?editors=0010 by joaquim-azevedo-madigital (@joaquim-azevedo-madigital) on CodePen

 but I needed the blue and red section and the "dogs" image to be in the same place, absolutely positioned. So that the user scrolls and at the end of a section (after all the dog images "slided"), change opacity between them so that the red section appears. 
Is it even possible to do that in that way, with absolute positioned elements?

[GreenSock]

Hi @Joaquim Azevedo. I read your post several times and I'm still totally lost, sorry. 

 

You want all those things sitting directly on top of each other (all the blue and red sections, all those dog images, all right on top of each other)? 

 

Maybe it would be best if you ignore ScrollTrigger for now and JUST make an animation with your absolutely-positioned elements so that it plays the way you'd want it to (disconnected from scroll - just start to finish). Once you figure that out, THEN try connecting it to the scroll position and pinning it. 

[Joaquim Azevedo]

I'm so sorry, now that I read it I see that's not a good explanation.

I want those sections on top of one another, and the images of the dogs on top of each other, absolute positioned. I'm just kind of lost about the direction I should take. I see for example that some examples use timeline to achieve something similar. On the other hand, when I try to do it with absolute positioned elements things don't work, I'm guessing it's because of the height. 

[Cassie]

Hey there @Joaquim Azevedo - As Jack suggested - Could you possible create a timeline that does what you want. No ScrollTrigger for now. Just make an animation timeline that moves and fades the sections in the order you want.

 

That's often a good first step, best case scenario it's just one extra little bit of code to hook it up to scroll. Worst case it needs a little restructure, but at least we can see what you're intending to do.