Jump to content
GreenSock

Payman

set transform without repaint?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

ok will try, thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×