How to create icloud.com scale effect in Angular.JS

Question

The new icloud.com site was recently released and there is a neat effect that I would like to try and imitate on a project I'm working on.

If you visit https://www.icloud.com/#calendar and login, you will see a loading gif for a brief moment and then the calendar app scale outwards to the edge of the screen.

Here's what I'm interested in learning:

• What would you call this effect?
• Can someone discuss the mechanics of how this might be implemented in AngularJS (or a similar framework), more specifically, the page structure, how the new content is being loaded, how the transition is being applied, etc
• Examples, links, or other resources would be much appreciated

Answer 1

Not quite sure how to call this effect (enter the scene or scale maybe) but after a quick look it appears that the website is using a mix of absolute positioning, opacity and -webkit-transform.

If you inspect the page you will see that both opacity and -webkit-transform:scale() are incremented with some javascript function (appears to be done by the _calculateTransforms function of javascript-packed.js). At the beginning of the effect opacity starts at 0 and end at 1. webkit-transform starts with scale(0.9) and end at scale(1). Please note that the animated div is already present in the DOM but invisble when the effect start.

Finally I think ngAnimate could be a good candidate to mimic this effect (see here for more details)