Jump to content
GreenSock

retropunk

How do they do it without Flash?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×