End pinned element when next div comes into viewport

[pixelarchitect 17 Likes (Newbie)]

I made a div with text that gets pinned at the bottom (left is shorter than right). This is good but I want the bottom of the text to be pinned until the next section comes into the viewport, currently it just randomly starts scrolling while the next div didn't enter the viewport yet. Somebody knows a solution or can help me in the right direction?

 

See the Pen yLXXOrZ by pixelarchitect (@pixelarchitect) on CodePen

[akapowl 5,135 Likes (Superhero)]

 

Hey there @pixelarchitect

 

You could define an endTrigger alongside the end property for something like that.

 

In this following example the endTrigger is set to the last one of your images (which I added a class of "last-img" to) with the end set to bottom bottom. So the pinning will now stop when the bottom of that last image hits the bottom of the viewport. Does that work like what you had in mind?

 

See the Pen 50e7ca641099eb5553d57ede890e13ec by akapowl (@akapowl) on CodePen

 

[pixelarchitect 17 Likes (Newbie)]

Hi @akapowl, I was just about to delete this question since I figured it out myself this morning by indeed using the endtrigger, the codepen I used is already updated to a working version but thank you for answering!