Clever Geek Handbook

Is it better to revitalize the translation for one large area or many small areas?

I am working on a project with lots of animations. I've stuck with the properties that do the best - translate, opacity, scale, etc. But I am still having performance issues on mobile devices. I need to insert some new dom elements here and there, but I am trying to do this between animations. One thing that I think might slow it down is that I have a large div translating with a lot of other elements inside it. (think carousel). I'm starting to think that performance could be improved by animating individual elements at the same time, however I can't find any evidence of this when searching.

Does anyone know if one way is better? Having some documentation to support the application would be great! I'll just reorganize the project and find out for myself, but I'm against the deadline and I don't want to split the whole project apart for guesswork.

Thanks in advance!

+3


source to share


1 answer


Better to transfer the parent instead of all the children. The problem is that you want to animate a lot of elements.

Are you trying to use hardware acceleration? Thi is not the right way, but at the moment it is the only one doing it.



.anim {
   ...
   transform: translateZ(0);
   ...
}
0


source






More articles:


All Articles