Creating a GSAP and CurtainJs Slider Canvas Image Issue about curtainsjs HOT 5 CLOSED

It looks like you're attempting to fade the image element in and out. That doesn't make much sense because you want the image to be rendered by Curtains (on a canvas). You should instead have curtains fade out the old texture and fade in the new one.

Also you're making some of the most common GSAP mistakes.

from curtainsjs.

Please make a minimal and complete demo of the issue if you'd like help debugging.

from curtainsjs.

I am creating a slider with GSAP and curtains (applying wave effect on image). I want to change the content of the slider along with image but I am not able to achieve that. Text is changing but opacity or display: none for plane is not working like current slide plane is fade out and next slide plane is fade in.

Codepen Link: https://codepen.io/saadtanvir/pen/gOWMPMr

Only the last slider plane image is rendered and shown!

from curtainsjs.

Thank you for your response! Please let me know how I can do it: "You should instead have curtains fade out the old texture and fade in the new one."

from curtainsjs.

Hey @saadtanvir1994,

As @ZachSaucier pointed out, you need to create as much planes as elements in your slider, and tween a uniform like uOpacity to handle each plane's opacity.
There are plenty examples on the lib documentation's website and CodePen available to point you in the right direction.

I'm closing this as this clearly isn't related to a bug.

Cheers,

from curtainsjs.