Creating a round (clipping) mask to unveil a ray of lights

[mrsam]

Imagine having a set of light rays surrounding a circle - just like the sun. What I want to do is reveil the rays, so the appear to be "rising" from the sun.

 

In Flash I would be able to create a nice effect for this by doing something like the following steps:
- Divide the rays into x amount of groups (symbols)

- Create a circle mask that will scale up "grow" to reveil the rays

- Run the circle mask with 0.3 delay on each of the x amount of groups

 

I figured that I could emulate something similar with the clipping mask, but that only works with rectangles? 

[Rodrigo]

HI,

 

I haven't played too much with the clipping part of the engine but you could create a clipping rectangle inside a div element with border-radius:50% 50% 0 0;

 

One question though, are your sun rays DOM elements or is it an image?, if they are DOM elements you could use absolute positioning, rotation and scaling them down and then scale them up in order to complete the effect.

 

Unfortunately you caught me without enough time so I can't set up a sample until tomorrow.

 

Hope this helps,

Cheers,

Rodrigo.

[mrsam]

Hey rhernando,

 

Thanks so much for your response.

My sun rays are currently an image sitting in a div. I was thinking to split up the image to 3 separate images and place them each in a div of their own - with the rays split among and then run the clipping property on each image.

 

I was thinking to create the ray lines with pure css and html and then change the reg point to the bottom center of the ray and then rotate / scale it up - but curious to how this could be achieved with an .png image sitting in a div (if possible at all?)

[Rodrigo]

Hi,

 

Turns out that your final though was quite on the mark. The thing is that animating div elements becomes quite a nightmare, because you have to tween a lot of different css properties (height, width, margins, etc.) which makes the animation quite jittery. But creating the elements independently and positioning them with a loop and then tween all at the same time makes the process more simpler.

 

I tried two approaches starting with other thing I came up for circular rotation, first positioning the elements based on the points from a bezier tween of some objects. In the second way I setted the angles in the same way but every element is in the same position.The only downside in both approaches is that there's a lot of trial and error in setting each element's angle. After that just tween the height property and done.

 

You can see them working here:

Bezier positioning

See the Pen sxwoy by rhernando (@rhernando) on CodePen

 

Absolute positioning

See the Pen inDzv by rhernando (@rhernando) on CodePen

 

Finally the sun is created with a simple half circle created with canvas.

 

Hope this helps,

Cheers,

Rodrigo.