Comments (3)
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 withcurtains.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()
andplane.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.
Related Issues (20)
- Domain Warping HOT 1
- Planes are missing after resize HOT 3
- Multiple ShaderPasses per Plane HOT 3
- Incorrect sampler name HOT 2
- blocked because of a disallowed MIME type HOT 4
- Copying a texture with different sourceType doesn't work HOT 4
- Make an option for a plane with rounded edges
- ShaderPass transparensy
- error occuring in curtains s
- Planes have unwanted offset when page is refreshed after scroll on mobile HOT 1
- Multiple Canvas + Locomotive Scroll V5 HOT 3
- Flowmap resizing HOT 2
- WebGPU Shaders or Three Shader Language support
- when resizing positions of planes misplaced HOT 2
- Creating a new texture or setting the source of an existing one dynamically throws a WebGL render error HOT 1
- reusing a past video texture HOT 5
- Strange behaviour on Safari ping/pong shading flowmap example HOT 4
- WebGL2 Support HOT 2
- Typescript types. HOT 2
- autoResize disabled, but right after refresh, the curtain gets resized HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from curtainsjs.