Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
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. –  Random O'Reilly Feb 11 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 at 6:30

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
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 at 14:50
2  
@ckpepper02 jsbeautifier or jspretty are good tools to unminify .js files. –  Matt Feb 11 at 15:30
    
@Gramps well that was awesome! Worked like a charm –  ckpepper02 Feb 11 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 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 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.

share|improve this answer
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 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 –  poepje Feb 14 at 10:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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