Implementing a morphing page transition about curtainsjs HOT 3 CLOSED

Hi @ajayns!

I think the way you're doing your transition is not the most optimal: as I understand you're animating the HTML element size and position and call the updatePosition() to sync your plane.
That means you'll trigger a repaint at each frame of your animation which is not really good in terms of performance.

For that kind of animations, I usually tween the scale and position of the plane:

• Get your plane current size and position with plane.getBoundingRect() (and eventually your canvas/window size with curtains.getBoundingRect())
• Calculate your plane final scale and position based on the previous values and the final plane's size and position
• Set your plane transform origin to [0, 0] (top left corner) to make your calculations easier: plane.setTransformOrigin(0, 0);
• Start your tween and update your position and scale in the update callback with plane.setScale() and plane.setRelativePosition()

Since you'd want to keep that plane alive, just don't remove it but instead reset it with the new according HTML element once your new content has been appended:
const newHTMLEl = document.getElementById("my-element"); // you could use querySelector() plane.resetPlane(newHTMLEl );

That should do the trick (at least that's how I'm doing it myself).

Also, planes do work well with fixed elements. In your case it might be because the actual HTML element isn't in your viewport or something like that?

Cheers,

from curtainsjs.

Thank you for the fast response.

I was aware it isn't the best performance-wise, I was mostly prototyping and experimenting on how to achieve the effects while using this library. Your approach seems solid though, so I'll try what you've mentioned and get back to you soon.
Also, the resetPlane was probably what I was looking for, I was unaware of that. Good job on covering a wide range of options in your API!

Thanks again

from curtainsjs.

This works perfectly, thanks again Martin. I'm closing the issue.

from curtainsjs.