set transform without repaint?

[Payman]

I have a bunch of objects with inline style transforms (x,y,rotation) and gsap sometimes not picking up those transforms. So as a workaround I just use .set to let gsap know all the initial transform settings, however it triggers repaint and slows down everything a little bit because gsap replaces inline transforms with a matrix. Is there any way to let gsap know the initial coordinates and rotation, but not actually triggering repaint until any changes requested?

[Jonathan]

Hello @Payman and welcome to the GreenSock Forum!

 

If you can please provide a codepen example showing your issue. We will be more than happy to help you with the issue your having!

 

 

Happy Tweening

[Payman]

I am not asking about an issue, just have a question if it is possible to pass initial coordinates without triggering any change in the inline style

[OSUblake]

I have a theory about how you might be able to do this, but I don't have time to test right now.

 

Create a wrapper element around everything you want to update. If it includes everything on your page, that's fine. Now remove that wrapper element from the DOM. Create a documentFragment, and append the wrapper to that fragment. Now use GSAP to update all the transforms. Once that's done, append the document fragment back to where you removed the wrapper from.

 

That should work. Will it be faster? I don't know, but that is kind of like how a virtual DOM in a library like React works. As crazy as it might sound, it's faster to replace the entire DOM than it is to update each element individually.

[OSUblake]

From MDN.

 

Quote

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore()). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

 

[Payman]

ok will try, thank you.