Tech Blog

2D and 3D animations using Famous transition library

Famous transitions library ( Github Code )

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

{ name: 'Blocks', //name of the transition type: 'Crossover', //type of transition - Crossover for 2d and Crossover-3d for 3d transitions numberOfChildEls: 25, //number of child elements transitionDelay: -340, //the delay between start of animation of each child element width: [], //array of widths of child elements height: [], //array of heights of child elements numberOfRows: 5, //number of rows in transition Ex: 5 rows in blocks transition numberOfColumns: 5, //number of columns in transition Ex: 5 columns in blocks transition startTime: 0, //startTime of transition randomSelection: false, //bool to select the child elements at random totalDuration: 0, //total duration of transition childElsPositioning: 'SequentialX', //position of child elements childTransitions: [ { properties: ['scale','opacity'], //the properties of child elements to change in transition transitionables: [], //transitionables are famous library tween curves to get values based on time durations: [], //array of durations of each transitionable options: null, //options given by the user to customise transition transitionablesfunc: [] //functions that are used to create above transitionables in famous } ] }

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.

Performance Evaluations

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.

Furthur Improvements

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

My Tracks

The Geeky Jack

This is the jack from IIT Bombay, CSE, class of 2013. Since then she has been a founding team member of a Bangalore based startup, Lifetape and she intends to share her knowledgde and tech experience here!

Her major focus as of now is in web full stack development with biased interest towards web frontend development and iOS app development.

The Rhythmic Jack

This is the jack that is too obsessed with drumming since the very first time she played. She has recently finished Trinity Music School, Grade 4, drums examination which gives her just a little bit of confidence to call herself a drummer. She intends to put up drum cover videos and original compositions here!

She is currently into rock/metal genre.

The Lyrical Jack

This is the jack that just occasionally writes when something inspires her. She never had any professional training as the other two jacks but has published one of her poems in the book named 'Inspired by Tagore' to consider herself an amatuer poetess. She intends to put up her poems & song lyrics here!

She writes motivational and love poems