Hi all,
On a homepage i’m working on is a collection list of blog items. This is now limited to the two newest blog items.
These two are layed out via a grid. So far so good.
On the top of every item I want a single line to grow from 0 to 100% during a scroll-trigger.
In the list-item i have added a div-block with the class ‘.border_hide’:
On this div I added this scroll-trigger:
When I scrub the GSAP timeline, both borders are animated:
but as soon as I scroll the page only the second (right) border is animated:
When I publish the site only the right border animates. And after inspecting the code I see that both borders have the appropriate transform styles added, but only the right one updates while scrolling.
What am I doing wrong?
I cannot share a link at the moment, but I hope you understand what the problem is.