Scroll trigger, Pinned sections, unpinned bg image animate next section image to push previous image out

[azarif]

Hello,

 

This forum seems very friendly and has been an asset in my journey so far. I’m hoping you can help me. I have created a scroll trigger section for a website. In the backend there are sections with a background image. And within those sections, a variable number of content, between 1-3.

 

The sections are pinned to allow the content to scroll through however I’m having an issue with the background image. I’m trying to get the background image to be fixed, and for the new background image to slide in as the previous one slides out together, triggered around the center before the next section content gets pinned.

 

As they are pinned, it ends up being more of a zig zag with the background image sliding out and a load of blank space till the previous pin scrolls out

Can you suggest where I am going wrong here, or point me in the right direction?

Thank you
 

See the Pen QWOXgNR by azarif (@azarif) on CodePen

[OSUblake]

Welcome to the forums @azarif

 

Can you elaborate more on what you're trying to achieve here? I get the basic idea, but I don't know how you are expecting it to look. Like are you trying to have the images overlap, kind of like they are in the same container, so it looks like the next image is pushing the other one out?

 

 

[azarif]

Hi @OSUblake

 

Yeah that's spot on, I've had a play around and managed to get the images moving with two other timelines, but they are still separated. If they were in the same container when the animation happened that would be perfect but I don't know how to work around that while they are pinning.

 

See the Pen qBpZOmo by azarif (@azarif) on CodePen

[OSUblake]

If I understand you correctly, I would try to put all the images in the same container and then control everything with a timeline kind of like this.

 

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