I'm trying to add animation when scrolling with pin:true property
I expect something like this :
original website : https://www.captions.ai/
I am trying to recreate this animation, but I am experiencing lag issues when implementing it. Whenever I scroll to the start position, the content of the section disappears.
After some investigation, I realized that I had wrapped all my divs inside a container div
which initialized a container query with the propertycontainer-type: inline-size However, when I removed this line, the animation started working again.
I am not sure if GSAP doesn't work with the new container query or if I am missing something.
Can someone please explain why this is happening?
I also found that setting the property "pinRearent" to true fixes this problem. However, after reading the documentation, I discovered that it has some downsides. Therefore, I would like to avoid using it if there is another solution available.
https://i.imgur.com/QLqWIGl.gif