Jump to content


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

Moderator Tag

Recommended Posts



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

Link to comment
Share on other sites

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?



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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


  • Like 1
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.