How do they do it without Flash?

[retropunk]

Hello everyone, I am always interested in porting my AS skills to JS/CSS.

Today I was checking out this portfolio site

http://www.vitosalvatore.com

It uses Greensock well and the simplicity of the site makes me smile.

 

One thing I couldn't figure out is the circle mask effect upon site load. It appears to mask in the content but I'm not sure. Can anyone tell me how he did that?

 

And to that point, is there a solution for masking elements in HTML the way you can mask things in Flash? WebGL, SVG etc?

 

Thanks guys!

- P

[Michael71]

As far as I can tell he could be just creating a circle little by little as the page loads. I haven't checked his code but that's what I would do...

 

To create a circle with canvas is fairly easy, just like drawing circles with as3 shape.

[retropunk]

Creating the circle in canvas makes sense. I can even see where he's working with the canvas and using beginPath() on line 163 in script.js

 

Where I am stumped is how the circle animates and reveals the content underneath.

[retropunk]

I can see more of how its working now, animating the hole in the circle on the canvas.

It's not as straight forward as adding a mask to an element an tweening it but I am understanding more now.