Jump to content
Search Community

Clip-Path / Circle Animation Problem

Technics1210 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

Hi,

 

i try to animate a circular clip-path with GSAP / CSS. 

 

I want an image to be masked like lit / searched with an flashlight.

TweenLite.to("#teaserBild", 2, {delay:1, webkitClipPath:'circle(' + '6.6%' + 'at' + '200px' + '500px)',  ease:Power1.easeInOut});

TweenLite.to("#teaserBild", 2, {delay:3, webkitClipPath:'circle(' + '6.6%' + 'at' + '100px' + '300px)',  ease:Power1.easeInOut});

Check out at Codepen

 

I don't get it work.

 

Another question is, how to make a circular mask that works in ALL browsers? IE has problems with the clip-path ... Or is there a more elegant way to do this?

 

-Rolf

 

See the Pen dYrqKm by technics1210 (@technics1210) on CodePen

Link to comment
Share on other sites

Okay,

 

i looked at your SVG "Hippo" solution - this works really well in all browsers.

 

Compared to the clip-path solution i have now an increase of 20fps in performance, using SVG masks. This is interesting for me because i am making a lot of mobile banners. 

 

I only have the problem when using a SVG mask, the redraw / animation in Firefox does not work / move, when animating the "x:" property. I do not need to use the MorphSVG class for my case. In IE / Chrome / Safari it works.

 

See

 

See the Pen dYrwEj by technics1210 (@technics1210) on CodePen

Link to comment
Share on other sites

This is @Jonathan's second favorite question, right after why scaling causes blurriness... but you need animate the actual attributes of your clip path using the attribute plugin. If your path is only going to be a circle, it might be easier to just keep it as a circle and animate the cx and cy attributes.

 

See the Pen rORPVz?editors=001 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hi OSUblake,

 

i am unfortunately not through with the clip-path problem. 

 

Your post which worked fine -

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

 

I got everything working with an inline svg clip-path as your example, BUT - when putting the file to e.g. Google Adwords - the google DoubleClick DCM parser is having an issue with the css-style "url(#svgPath)" -> it is looking for an external file which does not exist, because it is inline. This is why it  is not accepted. :-( - I know this is a little bit off-topic, and seems to be a DCM parser problem, but I have to deal with and find a solution :-)

 

The original error-message from Google is 

 

Fehler beim Hochladen
In Ihrer HTML5-Anzeige wird auf ein Element verwiesen, das in der ZIP-Datei nicht gefunden wurde: #svgPath. Stellen Sie sicher, dass alle Elemente in der ZIP-Datei berücksichtigt sind und dass die Dateiverweise keine Tippfehler enthalten. Versuchen Sie es anschließend erneut.
 
How do i put the path - working - as an external file? Or is there another workaround?
 
Thank you in advance
 
Rolf
Link to comment
Share on other sites

Hi, I was looking at these great examples of SVG masks, and I have what's probably a very dumb/obvious question... but I can't seem to figure it out.

 

I was trying to figure out how to position an image separately from a clipping mask.  

 

Repositioning the mask in the CSS doesn't seem to do anything: 

See the Pen MKgPXN by ohem (@ohem) on CodePen

and repositioning the image container moves the mask along with it.

 

Just wondering how I could I give an image one position, and the mask a slightly different one (controlling where they overlap)?  I guess doing a fromTo tween on the mask would work, but I'm sure there must be a way to control the position through the CSS too.  Does anybody have any suggestions as to how that might work?

 

Thanks so much!

Link to comment
Share on other sites

How would I change the initial position of the mask though?

 

Wrapping that in a group and changing the position of the "clipper" SVG, or the "shape" group, or the "svgPath" in the CSS does not seem to change the position like it would for a normal SVG.

 

I realize that a fromTo tween would work, but I'm slightly confused that positioning a SVG mask in basic CSS doesn't seem to work and I'm wondering if there's a trick to that. 

See the Pen bEbPOd by ohem (@ohem) on CodePen

Link to comment
Share on other sites

CSS won't work because the clip-path is not rendered, so it's going to be in the top left corner. To move it you would need to mess with something like the clipPathUnits. Seems like too much of a hassle to mess with, so I would just change the attributes of what's being used for the path. In this case, a circle, so you can change its center x/y and radius.

 

See the Pen gPYNVY?editors=101 by osublake (@osublake) on CodePen

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