Super nice front end design!!

[geekyme]

is this atmosphere also a meteor app itself?

[zol]

@geekyme - you bet! If you hang out long enough you'll see packages update in front of yours eyes.

[geekyme]

geeeeeeeee. now you guys gotta update discovermeteor to show off how to make this sort of wicked animations!

[patrickleet]

Beautiful site, of course I had to know how it works. Although it looks pretty complicated at first glance, it’s actually quite simple.

Here’s the basic simplified site structure in jade

.applicationLayout
    .packagesSearchOverlay
    .content // main page content

And some css for each overlay (theres a bit more, but these are the important parts) { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
opacity:0; z-index: -1; transition: all 250ms ease-in-out; /* animate all css that changes */; transform: scale(1.5); }

Css for content is basically the same, starts at scale(1)

When clicking “search” it simply adds the class “searching” to applicationOverlay

Which causes these css rules to match: .applicationLayout.searching > .packagesSearchOverlay // this has the following css changes compared to the original { z-index: 9; opacity:1; /* and scale for animation */ transform: scale(1); }

.applicationLayout.searching > .content { opactity: .5; scale(.85)
}
The transform changing from 1.5 to 1 causes the zoom-in effect, and the z-index change caused it to be on top, while the opacity change causes the fade-in, and the opposite for .content

Happy css3-ing

[domyen]

@patrickleet spot on! We'll go over it in more detail in the next few months but you've got the meat of it.

This technique is the basis of how we transition in Atmosphere. For a meteor package that supports page-to-page transitions follow our package iron-transitioner (we'll be updating it soon for iron-router and meteor UI).