I'm working on a project with react-gsap
and scrollTrigger
and it needs to be responsive.
Please find the example for your reference.
In the example, I would like the blue block to always be 100vw
. But it seems that the width is fixed at the first render.
I had to add a key
and update the key
on resize, to make the element re-mount.
But it's not working well sometimes, for example, the pinned element goes to wrong position.
I think you can reproduce the issue by checking the DevTools device mode and rotate it.
I was wondering why the 'adding key' solution fails? And is there any way to solve it? or better way to make it responsive?