SVG Mask Reveal Background Image

[DD77 8 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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.

[DD77 8 Likes (Newbie)]

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. 

[PointC 8,599 Likes (Superhero)]

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.

[Dipscom 2,815 Likes (Superhero)]

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

 

[DD77 8 Likes (Newbie)]

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

[DD77 8 Likes (Newbie)]

@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(){
  dim();
}

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

 

 

 

[PointC 8,599 Likes (Superhero)]

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.

 

[DD77 8 Likes (Newbie)]

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

 

[PointC 8,599 Likes (Superhero)]

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
  });
}