2

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.

Improve this question
2
  • 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, 2014 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, 2014 at 6:30

2 Answers 2

Reset to default
3

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

Improve this answer
5
  • 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, 2014 at 14:50
  • 2
    @ckpepper02 jsbeautifier or jspretty are good tools to unminify .js files.
    – user9447
    Feb 11, 2014 at 15:30
  • @Gramps well that was awesome! Worked like a charm
    – ckpepper02
    Feb 11, 2014 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, 2014 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, 2014 at 6:43
0

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.

Improve this answer
2
  • 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, 2014 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, 2014 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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