How can i change the start and end trigger position when the layout changes?

[Balram]

Hi,

 

I have included a codepen where i have a simple animation that turns a block to red when it enter the start position but when there is some change in layout the trigger position stays the same but i want it to change the trigger positon to where the actual trigger element is. For example i have included a another block that expands on click and when that happens the trigger position doesn't changes.

See the Pen XWyVGKr by veuxon (@veuxon) on CodePen

[GreenSock]

For performance reasons, ScrollTrigger pre-calculates all the start/end positions so that it's super fast when scrolling. So if you CHANGE the layout after initial load, you must tell ScrollTrigger to refresh those values (recalculate them). 

ScrollTrigger.refresh();

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

 

Does that clear things up?