react-curtains icon indicating copy to clipboard operation
react-curtains copied to clipboard

Flowmap example help

Open Forpee opened this issue 3 years ago • 1 comments

Hello, I am in need of assistance regarding the flow-map example. I am trying to resize the image but when I try to do that with css the screen goes blank. Secondly when I add another div under the flow-map element, the mouse movement create a weird effect on the image. here's my sandbox to demonstrate what I mean: https://codesandbox.io/s/react-curtains-flowmap-forked-ijie7?file=/src/App.js

Any help would be greatly appreciated. Thx.

Forpee avatar May 18 '21 11:05 Forpee

Hi @Forpee,

To get a correct behaviour I think you should use your flowmap texture in a ShaderPass component instead of your Plane. In order for the flowmap shader to work properly, it should be associated with a fixed div covering the whole viewport.

See https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/gsap-click-to-fullscreen-gallery/js/click.to.fullscreen.gallery.setup.js#L561 for an example implementation using curtainsjs.

Cheers,

martinlaxenaire avatar May 25 '21 10:05 martinlaxenaire