Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Mask Reveal Background Image

Recommended Posts

I'm struggling to make the mask animation to open 100% when I click the button.
I'm not sure how to reuse the function figureMask properly. I'm pretty sure the

 r = figureRadius(data.width, data.height) / 2; 

should be 

r = figureRadius(data.width, data.height);


but I don't know how to animate it.


Is it possible to have some directions please? 

- on load animate mask 50% of screen (works)
- 1st click animate mask 100% of the screen (doesn't work)
- 2nd  click return to 50%


See the Pen xaxZYX?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Hi DD77,


It appears you have found our previous discussion on the masking of images given the pen you have forked. Given that the

See the Pen xJNWez by PointC (@PointC) on CodePen

works as a full screen reveal, what did you change?  That will be the root of your issue here.


If I understand your request correctly, you need to create a timeline onLoad that goes from 0 to 100% of the screen. Add a pause at halfway its progress. Then, have some logic on the click event to detect if the timeline is at its end. If it is, play reverse it. If it isn't, play forward.


Does it make sense?


ps: You will have to make sure you recreate your timeline every time the window is resized.

  • Like 2
Link to comment
Share on other sites

Yes correct. Is the same logic pretty much. 

In this case I need the mask to load from 0 to 50%  which works. 

Then on click it will expand full bleed. 

I managed to do it by availing the circle on the svg, as I found to difficult in other way. 

Link to comment
Share on other sites

Do it like @Dipscom said.


Create a timeline and then you can animate the progress() to/from any percentage you like. You will have to rebuild the timeline for an updated radius when the window is resized.

  • Like 1
Link to comment
Share on other sites

Here you go, I had some downtime today and decided to have a crack at it.


See the Pen JqKZbv by dipscom (@dipscom) on CodePen


  • Like 3
Link to comment
Share on other sites

I can only say Thank you! You make it look so easy! 

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

@Dipscom Hi Alvaro, I hope I could grab your brain as I need to slightly add a functionality on this mask.

I managed to add a size calculation  of the W and H of the circle. 


, onComplete(){

function dim(){
    var c = document.getElementsByTagName("circle");
    var rec = c[0].getBoundingClientRect();
    console.log("width: "+rec.width);
    console.log("height: "+rec.height);


I'd like to apply this function it to a div <div class="clipboard" in here width and height of the circle> and have it on resize which hopefully is already being calculated.
Any thought or suggestion? 
I made a demo, doesn't work on resize, how can I have it also on resize?

See the Pen agoQpb?editors=1010 by davide77 (@davide77) on CodePen




Link to comment
Share on other sites

I don't understand the follow-up question. You want the red outline div to have the same width/height as the circle diameter? It appears that is working on resize so I'm confused about the desired result. What is it supposed to do and/or what is it not doing correctly?


Just FYI — you can use the .set() method in your resize function to apply the new width/height to the div rather than using jQuery.


  • Like 2
Link to comment
Share on other sites

TweenMax.set('.clipboard', {width:+rec.width / 1.8, height: +rec.height / 1.8});


Link to comment
Share on other sites

I see you changed your reply about the separate functions for each clipboard div. You don't need a function and resize listener for each div. The easiest way to make it work is give each clipboard a universal class. Something like this:


<div class="sizeMe clipboard"></div>
<div class="sizeMe clipboard02"></div>
<div class="sizeMe clipboard03"></div>
<div class="sizeMe clipboard04"></div>


Then your dim() function targets them all like this:


function dim() {
  var c = document.getElementById("cover");
  var rec = c.getBoundingClientRect();
  TweenMax.set(".sizeMe", {
    width: rec.width / 2.8,
    height: rec.height / 2.8


  • Like 3
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.