enter image description here

How was this animation created? Can someone give an example how to create animation like this one? Is it possible to achieve animation like this one using canvas and logo in .svg format? Is this some kind of masking effect on canvas or what...?

Preview logo animation visiting apple official website.

  • 1
    Hello and welcome to GD. The animation is simply made with canvas. A search for "canvas animations" should give you a big bunch of tutorials and examples. – benteh Feb 11 '14 at 13:36
  • @boblet Thanks! I was searching google before I asked this question here, but I couldn't find any specific example of such complex animation using canvas. – Andy Feb 12 '14 at 6:30

The animation seems do with the canvas element.

<canvas height="496" width="688" style="width: 317.4284274193549px;"></canvas>

But i can't find the Javascript code on apple.com

  • 1
    Here is a link to the code on the page the I think is controlling it. images.apple.com/v/home/ap/scripts/home.js It's all minimized so it's difficult to tell where exactly, but a search within that code pulls up numerous references to "canvas". – ckpepper02 Feb 11 '14 at 14:50
  • 2
    @ckpepper02 jsbeautifier or jspretty are good tools to unminify .js files. – DᴀʀᴛʜVᴀᴅᴇʀ Feb 11 '14 at 15:30
  • @Gramps well that was awesome! Worked like a charm – ckpepper02 Feb 11 '14 at 15:31
  • 2
    some of the references in the above linked js look like they come from "nanosome" open source actionscript 3 replacement project ( assembla.com/code/nanosome/subversion/nodes/278/trunk/as3/flow/… ). Alternatively, the references are to Adobe ActionScript itself. In either case, then this is probably some flavor of Flash animation. – horatio Feb 11 '14 at 15:47
  • Hi guys, thanks for trying to answer this question, also thank you @horatio for pointing out it could be some kind of flash animation. I even forgot on flash these days when everything is around html5 and canvas. So I made search for exporting flash animation to html5 canvas and I come to this links below. It could be that they did animation using flash and exported it to canvas animation. Look at this: link1 and link2 – Andy Feb 12 '14 at 6:43

To reply to the 'how to'/methodic part of this animation, it looks like the '3' and the apple logo both have a mask that starts of covering the picture almost entirely, then moving away from it in one straight line.

It's hard to see whether the masks are made out of simple shapes (such as a circle or rectangle) or a little more complex, but to me it looks like they're not too special, shape-wise.

  • 1
    Thanks for response. Look at this video, it's almost the same mask effect: youtube.com/watch?v=fM_svH50fmM So, you could create logo mask animation like this one using Adobe Flash Pro CC or Adobe Flash Pro CS5 and above, and export it to html5 canvas. Exporting to html5 canvas produces necessary html and javascript files to handle animation. – Andy Feb 13 '14 at 8:06
  • Yep, that's the technique I had in mind. And thanks for the tip, I wasn't aware of the fact that Flash could convert it to html5! :D – paddotk Feb 14 '14 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.