when resizing positions of planes misplaced

[Dushyant1295]

I've created a template for handling planes with locomotive scroll and facing two issue

[1] when I resize the window Planes are sometime disappear and some time misplaced

  i think i've to do something here ....

 onAfterResize(() => {          // Need Help here  });

[2] since I'm using gsap i've used
gsap.ticker.add(curtains.render.bind(curtains));

for render works fine but how to remove it later from gsap.ticker
gsap.ticker.remove(curtains.render);

but it seems not removing
i'm removing it on destroyPlane function

Code :

import { Curtains, Plane } from "curtainsjs";

import vSheder from "./vertex.glsl";
import fSheder from "./frag.glsl";

var curtains;
var effectParameter;


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                1.  Initialization
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

function initCurtain() {
  
/*   Curtain Variable Initialization  */
  curtains = new Curtains({
    container: "canvas",
    premultipliedAlpha: true,
    production: false,
    pixelRatio: Math.min(1.5, window.devicePixelRatio),
    autoRender: false,
  });

  gsap.ticker.add(curtains.render.bind(curtains));


  curtains
    .onError(function () { document.body.classList.add("no-curtains") })
    .onContextLost(() => { curtains.restoreContext() });




  /*        Effects  Parameters  */

  effectParameter = {
    vertexShader: vSheder,
    fragmentShader: fSheder,
    shareProgram: true,
    widthSegments: 20,
    heightSegments: 1,
    texturesOptions: { minFilter: curtains.gl.LINEAR_MIPMAP_NEAREST },
  
    uniforms: {
      time: {
        name: "uTime", // uniform name  passed to our shaders
        type: "1f",    //Float
        value: 0,
      }
    },
  };

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                3.       Create the  Plane
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

var planeElements;
var curtainPlane;


function createPlane() {

  curtainPlane = [];
  planeElements = document.getElementsByClassName("plane");
  initCurtain();

  for (let i = 0; i < planeElements.length; i++) {
    const plane = new Plane(curtains, planeElements[i], effectParameter);
    curtainPlane.push(plane);
    planeEffect(i);
  }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                      4.     Effects  For  Plane
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


function planeEffect(index) {
  const plane = curtainPlane[index];

  plane
    .onReady(function () {
      plane.userData.mouseOver = false;

      planeElements[index].addEventListener("mouseenter", function (e) {
        plane.userData.mouseOver = true;
      });

      planeElements[index].addEventListener("mouseleave", function (e) {
        plane.userData.mouseOver = false;
      });

    })
    .onRender(() => {
      if (plane.userData.mouseOver) {
        plane.uniforms.time.value += (45 - plane.uniforms.time.value) * 0.0375;
      } else {
        plane.uniforms.time.value += (0 - plane.uniforms.time.value) * 0.0375;
      }
    })
    .onAfterResize(() => {
           // Need Help here
  });
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                  5.     Function for  Destroying  the  Plane
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



function destroyPlane() {
  if (planeElements) {
     gsap.ticker.remove(curtains.render);
    for (let i = 0; i < planeElements.length; i++) {
      curtainPlane[i].remove();
    }
    curtainPlane = [];
  }
}








/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                                 6.         Call 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


  setTimeout(() => { createPlane() }, 200);

Note- i've also update ScrollValues and works fine
scroll.on("scroll", (obj) => {
curtains.updateScrollValues(obj.scroll.x, obj.scroll.y);
});

[martinlaxenaire]

Hi @Dushyant1295,

It's not possible to help you with your issues without a minimal working codepen or fiddle demonstrating the bugs.

1. There might be a conflict with locomotive scroll plugin, but it's hard to say without any example. You shouldn't use onAfterResize callback to update your planes positions. You can however use it to log your planes bounding rectangles, that could help you with debugging.

2. You shouldn't remove the render() method from the gsap ticker. If you wish to switch rendering on and off, you should have a look at the enableDrawing() / disableDrawing() methods.

Cheers,

[Dushyant1295]

Thanks for reply

somehow this works

adding ticker

gsapRender = curtains.render.bind(curtains);
 gsap.ticker.add(gsapRender);

removing ticker

function destroyPlane() {
 gsap.ticker.remove(gsapRender);
    for (let i = 0; i < planeElements.length; i++) {
      curtainPlane[i].remove();
    }
    curtainPlane = [];
}

its working fine now, but also

these methods enableDrawing() and disableDrawing() are better way to do so

Thank you for suggestions, thanks for this great library