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

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

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

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