curtainsjs icon indicating copy to clipboard operation
curtainsjs copied to clipboard

Planes are missing after resize

Open Dushyant1295 opened this issue 2 years ago • 3 comments

Planes are misplaced or disappears when resizing the window

To Reproduce

Steps to reproduce the behavior:

  1. Go to http://36fm.in/
  2. go to full screen or resize the browser
  3. See error

its simple setup with locomotive scroll

Dushyant1295 avatar Mar 15 '22 13:03 Dushyant1295

Hi @Dushyant1295,

It would be easier to debug with a live codepen or fiddle. My guess is that the curtains resize event is fired before the locomotive's one, resulting in a misplacement of the planes. You could try to handle the resize event manually, or update the scroll values in the curtains onAfterResize() callback maybe?

Cheers,

martinlaxenaire avatar Mar 17 '22 09:03 martinlaxenaire

Hi @martinlaxenaire Thanks For Replying

I'm Using Same setup but on codepen on resize its fine but on the site plans are missed after resize

see same example here on live http://36fm.in/ and here is the codepen codepen

Dushyant1295 avatar Mar 19 '22 11:03 Dushyant1295

Hey @Dushyant1295,

I can remember now that there's indeed a conflict due to how Locomotive Scroll is translating its scroll sections. If you inspect the DOM you'll see that each section is actually inside the viewport but is hidden with opacity: 0; and each curtains plane is at the "right" position.

This is not a curtainsjs bug but sadly there's definitely a conflict between the 2 libraries.

Cheers,

martinlaxenaire avatar Mar 22 '22 11:03 martinlaxenaire