How it works?
The 2D and 3D transitions are inspired by the designs of Flux Slider created by Joe Lambert and are made using the Famous transition library. Lets take the example of the blocks transition from the demo of our library to see how its implemented.
Every transition is in the Json format of
The blocks transition involves the current image being cut into 25 blocks each disappearing independently to reveal the next image. The images are represented by div tags with background-image property set to respective images. Firstly add 25 child elements to the current image div, each background-image property set to the current image and positioned to give the illusion of the entire image. Remove the background-image of the parent div to expose the child elements. Create the customized transitionable functions for respective properties to be transitioned with user given options. Also note the start time of the transition. In each animation loop identify the current active child element and assign the values to the properties from their respective transitionables.
3d transitions also work in the same way with the only difference that each child element has the current image on front face and next image on back face. This is acheived by adding two child elements with the second one rotated by 180 degrees on y-axis.
At our startup Lifetape, an online media preserving and publishing platform, we have a lean back experience that renders high quality templates on the fly with user's media. You could check out our channels to see a few samples! The transitions when included into our templates have shown an FPS of 10-20 during a media change while steadily being at 60 FPS otherwise.
When we recorded the timeline of the blocks transition as seen in the below image, you can clearly see the FPS dropping off significantly during the transition. After digging a little deeper into the rendering cycle of that instance, it was found that the composite layer stage, which calculates the positioning and properties of all the layers, is taking way more than we could afford to achieve 60 FPS. It was no surprise as each child element adds a new layer which in this case added 25 extra layers to the DOM resulting in such low FPS. The only solution that we have as of now is to decrease the number of layers and do the blocks transition with 9(3X3) blocks instead of 25(5X5).
Thank you for being able to make it till the end ! This is my first tech article and I would love to hear any comments/suggestions from you guys. Please do reach out to me incase of any quesries. :)