Apple iMac With Retina

apple.com/imac-with-retina/

Have you seen the latest Apple iMac with Retina product page? If not, go and check it out (in Chrome or Safari).

How was the fancy zoom out effect created? Scaling down a single huge image? Or was there some other trick?

Quick Overview

The powerful zoom out effect which reveals the amount of details of these all in one computers was created by using multiple canvas elements and transform: scale().

Keep reading for a more detailed explanation.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

Can’t See The Effect In Your Browser?

Here is a video showing the zoom out effect in Chrome. For some reason it’s disabled in Firefox.

Zoom Out Effect

Apple is famous for their products and beautifully designed product pages. Remember Apple Mac Pro page?

The new iMac with Retina page takes the advantage of the very popular scrolling animations and zooms out from a large image to a small iMac view.

How was it done? Here is the simplified HTML markup.

There is a large container .section-intro which contains the zoomed in elements.

It contains .intro-image div containing 15x canvas elements positioned absolute in a grid with 3 rows and 5 columns.

.section-intro-lockup contains the zoomed out view of the iMac screen and has a huge padding-top: 1572px.

Have a look at a more visual demonstration.

Intro Image Deconstruction

Let’s start by deconstructing the .intro-image and its position when you completely zoom out.

It will make it easier to understand what’s happening on page load.

.section-intro-lockup is a div containing the main content of the page and has a huge padding top.

This essentially creates a space at the top of the page for the zoom-out effect.

The position of the .intro-image is set to position: absolute; left: 50%.

The rest of the css properties of the .intro-image are calculated by JavaScript.

It is scaled down and pulled left, to make this element sit exactly on top of the .section-intro-lockup.

More on this in the next section.

The Magic Of CSS Transforms

On the image below you’ll see both sections precisely positioned on top of each other.

transform-origin: 50% 0 defines a point which controls the direction of scaling.

In other words this is a point from which the image is scaled up.

Apart from width and height you’ll also see the Y offset calculated by JavaScript.

332px is the top offset when both elements are overlapping.

So what’s actually happening on page load?

The Position On Page Load

It took us some time to break things down and the following image shows the position of .intro-image on page load.

Two CSS properties are animated. Scale and Y offset.

Given the large width and height, scale(1) makes it almost 6 times bigger then the browser viewport.

-1277px pulls the top of .intro-image above the top of the viewport.

Remember the transform-origin: 50% 0 that’s what made the top centre of the image the anchor point for the animation.

Does it make more sense now?

Demo

You can visit a Codepen demo from Marius Balaj, trying to recreate a similar effect using a single background image.

Conclusion

To recap this effect, a large container is scaled down from the original scale(1) with the top offset.

The zoomed out css properties make this image align perfectly with the image below it.

I hope it answered a lot of your questions and let me know in the comments below what you think about this creative effect.

Until next time, happy coding.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

11 Comments

  1. Matheus Pereira
    Reply

    Hi Petr, thanks for the deconstructions.

    Imagine how things are possible as well is one of the first things I think when confronted me with a site like this.

    In fact, I wonder how the construction of such a project.
    How many people are involved in building something like this? The brainstorm for things like this should be fantastic.

    Congratulations for the work.

    • Petr Tichy
      Reply

      Thanks for the feedback Matheus.

      I think the key for projects like this is a very close collaboration between a designer and developer.

      And the size of the team? I don’t necessarily think there is a lot of people involved in the actual work, but I am sure a lot of people need to approve the concept and implementation before it goes live.

  2. Jeremy Axelrod
    Reply

    Do you have a video or gif of the zoom out effect?

    • Petr Tichy
      Reply

      Jeremy, I’ve included a video of the effect. Cheers

  3. Jochen
    Reply

    Hi Petr, another great deconstruction. I really appreciate your insight and am always happy to learn some new tricks. On a side note: The effect you are refering to does not show in my Firefox-Browser (Chrome and Safari are fine). Maybe it’s just me (it was kind of funny: “what super-effekt is he talking about? I just see a display?”), but maybe you could look into it and add a note to your text.

    • Petr Tichy
      Reply

      Good point Jochen, I should have mentioned that it only works in Chrome and Safari. I’ve also included a video for people checking the deconstruction on mobile phones.

      And thanks for your feedback, I really appreciate it.

  4. Chris
    Reply

    This was really interesting to read, thanks!

  5. Peter
    Reply

    As always, great deconstruction. Is there any reason for dividing .intro-image into 15xcanvas sections? Why didn’t they use a single image as the Codepen demo?

    Is the reason for the switch to .intro-fallback-image (after the zoom is finished) , which also seems to me have a lower quality, just to get at smoother scroll?

    • Petr Tichy
      Reply

      Thanks Peter. Performance might be why they used canvas elements instead of one image.

      The fallback image is showing for Firefox and smaller screens and is essentially a starting point in these browsers.

      I think they treated the zoom out effect as an addon, if that makes sense.

      Interested to know what you and others think about their approach.

    • Nikita Golodenko
      Reply

      I’ve tried to make a similar effect but with different image (1925 × 4659, 3.1 Mb)
      And FPS on animation of H1 (“The ultimate display… bla bla bla”) appearance was very low. Even on my superfast MacBook Pro with Core i7. Slower PC would just die and show like 3 frames at all.

      My suggestion is that rendering of animation takes whole big image every time to create a current frame. While small parts can be rendered separately that improves performance and FPS.

      • Petr Tichy

        Thanks for sharing your experience Nikita, great insights. Is your project live or was it only an experiment?

Leave a Reply to Chris

Click here to cancel reply.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">