Hey,
I am currently working on a project that requires full page transitions. As an example pages are div elements that are approximately 1024x600 in size and contain content. Pages slide in and out from left to right (emulating the ebook feel).
At the moment the page change/transition process goes like this:
* Page in view has visibility 'visible' and willChange '' set
* set willChange 'transform' on outgoing page
*Slide outgoing page out of view
* set visibility 'hidden' and willChange '' on outgoing element after animation finished
* set visibility 'visible' and willChange 'transform' on incoming element.
*Inserted delay (~300ms) - to allow some breathing room for browser paint times and composition(layer creation)
*Slide incoming page into view
* set willChange '' on incoming page once animation is finished
I have put in the delay to give the browser time to paint and promote the div to a composite layer before animating for smooth animations. However the delay required on different devices obviously varies.
Is this something lagSmoothing can help with or does any one have any other/better techniques for this type of situation?
Jack has already suggested:
Don’t alter the will-change property at all. Take the layerization hit at a time that’s less critical. Maybe at startup (not sure how many things you may have to layerize, so you may have to stagger things). You can, for example do TweenLite.set(element, {force3D:true}) and it’ll get layerized right away. That way, when you actually go to animate its transforms, it’s already layerized and ready-to-go.
My understanding was that setting will-change:'transform' on the element layerized when it is set, so is there any differences between using that or TweenLite.set(element, {force3D:true}) ?
The other thing is deciding when to layerize the pages. Because the pages are quite large doing all the pages ahead of time floods the GPU memory and would probably kill the device so it seems the only option is too layerize pages as they are needed. Since that can take some time depending on the device I am currently inserting the delay during the animation sequence to help but I would much rather a more dynamic approach (no need delaying on devices that dont need too or might need longer).
Any input or advice would be appreciated, thanks.