ScrollTrigger with "sticky" image at bottom

[AntAreS24]

Hi,

 

I'm new to GSAP and I'm trying to have a sticky image at the bottom for few sections, then make it fit with the rest of the page. I have a feeling the order of my divs or the structure is preventing the right pin spacing from happening.

 

What I'd like to happen is have the grass image pinned until the .img-placer marker, but have the image "fit" in between the .before and .after divs.

 

Once this is achieved, I'd like to replace this image with another image (I'm pretty sure using the onEnter and onLeave), but that's the next step, so I prefer to have the first step right.

 

Thanks for the help.

Ben

See the Pen qBppbEY by AntAreS24 (@AntAreS24) on CodePen

[GreenSock]

Welcome to the forums, @AntAreS24. I read your post a few times and I'm still really fuzzy about what you're asking. Thanks for providing a demo. 

 

Looks like there's at least one typo - you had <dib /> instead of <div></div>

 

You mentioned you want the image to "fit in between .before and .after divs" but you have it in your markup at a totally different place. Is there some reason you don't just put it inbetween those in the markup? And I still don't understand the pinning effect you want, sorry. Maybe someone else understands and can offer some help. Here's a shot in the dark, though: 

 

See the Pen poppyZQ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Good luck with the project!

[AntAreS24]

Hi Jack,

 

Thanks for the quick response. Since I wasn't expecting since a quick response, I started working on another part of the project

I tried to draw what I want.

Step 1.

The "grass" image is sticky to the bottom of the red "title" screen. I want this grass to stay at the bottom until I reach the section 3.

 

Step 2.

Once I reach the section 3, the image stays and fit between section 2 and 3.

 

I looked at your sample, but I can't use a end trigger with +=100% as I have no idea how big will section 1 and 2 be, so I need to stop at the beginning of section 3.

 

Regards,

Ben

[Cassie]

Looks like you want to switch between fixed and relative position?

Maybe something like this?

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

[AntAreS24]

@Cassie, yes, it's getting really close!

 

Let me replicate on my real project and I'll come back to you.

 

Thanks for the help (and the quick response again).

[AntAreS24]

Thanks @Cassie, I didn't quite do as your example, but it gave me ideas on how to fix it. It's now working as expected!