gingerman

UPDATE !!!!! FIX !!! My colleague MagnusPi has solved this here by using a transparent PNG instead of a SVG to do the masking. http://codepen.io/magnuspi/pen/zKoQgk Thanks Magnus - this works in all major browsers now.

Hello, You are correct I was mistaken. I will have to produce this in a different way - animating an svg. Similar to how this works http://codepen.io/gingerman/pen/pjaZgx Thanks Steve

This is closer to the effect I need to achieve, thanks for everybody's help - http://codepen.io/gingerman/pen/qaapAd ( I will edit the question to include this further up ) This also works in FireFox, Chrome and Safari.

Hi WarenGonzaga, I am trying to move the clipping on the front text ( so that the rear text is still visible ). That's why 2 text clips. What I actually have to do is a little different, but this demonstrates the layers etc better ( otherwise you would not get what was trying to be achieved ). Steve

Hi I'm sorry to ask here, but I have been looking at this for ages now and tried a few different start points including SVG. I want to animate the CSS so that I can change the clip-path's properties using GreenSock - TweenMax. If you take a look at the codePen link you will see some white text which is clipped into a circle. I want to be able to animate that circle's size and position, but am having real problems. .clipcircle1{ clip-path: circle( 50px at 70px 70px ); } As you can see I have tried tracking the position using onUpdate - so that I could set the clip-path's properties like that, but I failed at that. Thanks EDIT [ SOLVED thanks to the people on here ] I have created another codePen to show what I needed to achieve here http://codepen.io/gingerman/pen/qaapAd Despite this there is useful information in the thread ( this is just for your convenience ) Thanks guys