Start and End calculation is not correct even after scrollTrigger.refresh()

[MIR-MEDIA]

I dug into old topics and found some solutions but none of them worked or maybe I couldn't correctly try them so forgive me if I'm repeating an old question. I just want to implement a simple sticky inside its parent and though the element sticks to the correct position, the    start    seems wrong. The main problem is the     end     because the sticky element stops before it reaches the bottom of its parent.

 

 

See the Pen WbNbqam by arishojaei (@arishojaei) on CodePen.

[mvaneijgen]

Hi @MIR-MEDIA welcome to the forum and thanks for being a club member 🎉

 

Currently you've set your end trigger to be the center of the browser, but you want it to be the bottom of the sticky element. Eg you want to write some logic to get that pixel value of that element and use that as the end trigger. 

 

I've updated your pen and I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen VYwLYGV by mvaneijgen (@mvaneijgen) on CodePen.