The animation works fine, but I wanted them to take a bit longer and have multiple animations play at the same time.
To achieve this I set scrollTrigger.end to 'bottom -1000px', doing so, the animations will overlap and will be a lot slower.
However, the animation is now overflowing on the other content.
I understand why it happens, but I am unsure as to what other approach I should use to not have this issue?
Ideally, the the pins get removed when we reach the bottom of the container, but again, I am unsure how to achieve this.
Any help is greatly appreciated!