0

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. enter image description here

I was wondering why the 'adding key' solution fails? And is there any way to solve it? or better way to make it responsive?

iris-yu17
  • 25
  • 5

0 Answers0