Jump to content
Search Community

Create a radial wipe

anotheruser test
Moderator Tag

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

Yeah, there's no easy solution for a clip path like. Well, it's pretty easy to do with canvas, but most people aren't willing to try it.

 

For SVG, you have to recalculate the arc paths on every change, which can be really hard to understand. I understand how they work, but still get confused by all the different parameters.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs

 

Here's a somewhat related demo that explains how the arc paths are calculated in the comments.

 

See the Pen OmgMNm by osublake (@osublake) on CodePen

 

  • Like 1
Link to comment
Share on other sites

17 minutes ago, anotheruser said:

Thanks again , is it possible to reverse the curve creation , now its clockwise , i need to do anticlockwise in your example i think it has to be done using startangle and sweep angle?

 

Hehe. And now you know why I hate SVG arc paths. :angry:

 

Try this. Set the start and end to 360, and tween the end to 0. Instead of messing with the internals of the getPath function, swap the start and end parameters around in updatePath function.

 

var arc = {  
  start: 360,
  end: 360,
  cx: 250,
  cy: 250,
  r: 150 
};

TweenMax.to(arc, 3, {
  end: 0,
  ease: Linear.easeNone,
  onUpdate: updatePath
});


function updatePath() {
  // clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.start, arc.end)); 
  clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.end, arc.start)); 
}

 

 

See the Pen e2fdfa0e2e5a5cf296655485402907f3 by osublake (@osublake) on CodePen

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 3 months later...

Awesome! Thanks! I see all the images are in an <aside> set to display: none. Can the images in the <g> be removed and/or what do they do? I forked your pen and replaced the source images with SVGs. It doesn't appear to be cycling through like your. Also does centering have to do with viewbox in the SVGs? See: 

See the Pen NYoRry by jamesneufeld (@jamesneufeld) on CodePen

 

Link to comment
Share on other sites

Hi @OSUblake!

 

@James Neufeld is my teacher, and actually found this thread/posted his questions on my behalf.

 

I'd like to do something similar to the radial wipe pen you linked above, but using SVGs with transparent backgrounds.

Because of the nature of your solution, when using images with transparencies #image1 is still visible behind #image2 as #image2 is revealed (as shown in my forked pen below).

 

What I would ideally like to do is re-mask #image1 in time with #image2's reveal, but I don't know how to go about inverting the effect of updatePath() to make it hide instead of reveal. Is this possible? Any help you can give would be greatly appreciated.

 

See the Pen dmLbLJ by Memenaar (@Memenaar) on CodePen

Link to comment
Share on other sites

  • 3 years later...

Hi there! I'm super brand new to GSAP and haven't been able to find much more than this thread in reference to a radial wipe... I've tried a few things from in here, but it seems like some of the syntax is deprecated. Does anyone have a more updated version of this they've used and could share?

Link to comment
Share on other sites

  • 1 year later...
On 12/12/2017 at 2:44 PM, OSUblake said:

 

Hehe. And now you know why I hate SVG arc paths. :angry:

 

Try this. Set the start and end to 360, and tween the end to 0. Instead of messing with the internals of the getPath function, swap the start and end parameters around in updatePath function.

 

var arc = {  
  start: 360,
  end: 360,
  cx: 250,
  cy: 250,
  r: 150 
};

TweenMax.to(arc, 3, {
  end: 0,
  ease: Linear.easeNone,
  onUpdate: updatePath
});


function updatePath() {
  // clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.start, arc.end)); 
  clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.end, arc.start)); 
}

 

 

 

 

I can't make width and height 100%, does anyone know a solution?

Link to comment
Share on other sites

On 1/9/2023 at 7:05 PM, Rodrigo said:

Hi @sawacrow,

 

You already created a thread for this particular effect, so please keep all the related questions in that so it's easier for us to track where to help you with your GSAP issues regarding this.

 

Thanks and Happy Tweening!

Thank you very much

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.
×
×
  • Create New...