Jump to content
GreenSock

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

Tween shape inside SVG clip path?

Recommended Posts

Hi, I’m trying to figure out how to scale a circle within a SVG clipping mask, while keeping the mask static.  Currently, the clipping path seems to scale along with the shape.

 

Here's an example:

 

Based on my searches, it seems like the AttrPlugin could help, but I don’t seem to be able to implement it:

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


 

Any suggestions as to how to implement this would be much appreciated.

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

Link to post
Share on other sites

Hi ohem :)

 

Is this what you need to happen?

 

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

 

:)

Yes!  What sorcery is this?  (Thank you lol.)

 

Can you explain what was wrong in my file so I can avoid it with other SVGs?  I just created the clipping mask in Illustrator & then generated the SVG code from there.  Is there a setting I should leave checked (or unchecked) to avoid this problem?

  • Like 4
Link to post
Share on other sites

The group element in you original pen started before the <defs> for some reason. I'm assuming AI kicked out the code like that.  ;-)

 

I usually just export the path I'm going to use as a clip-path or mask and manually put it in the <defs> to avoid little Adobe issues like that. This also gives you the option of creating more meaningful names when you have a lot of masks or clip-paths.  Your pen had the clip path created and referenced like this:

//this works fine, but adds an extra step IMHO
<defs>
<path id="clip" d="M35.5,95.9c0,0,18.1-27.9,44.1-17.2s64,19.3,74,4.7s51.3-38,67.3-24s25.3,31.3,37.3,22.7
c12-8.7,42-1.5,41.7,13.9s-18.3,34.1-19,53.4s24.7,31.3-6.7,42.7s-70.5,67.3-106.6,52s-62.1-36.7-72.1-31.3
c-10,5.3-29.3,5.3-32-13.3S75,155,64.3,150.8C53.7,146.7,20.1,110.6,35.5,95.9z"/>
</defs>
<clipPath id="clip_1_">
<use xlink:href="#clip"  style="overflow:visible;"/>
</clipPath>

// I find this a bit easier to manage
<defs>
<clipPath id="clip_1_">
<path d="M35.5,95.9c0,0,18.1-27.9,44.1-17.2s64,19.3,74,4.7s51.3-38,67.3-24s25.3,31.3,37.3,22.7
c12-8.7,42-1.5,41.7,13.9s-18.3,34.1-19,53.4s24.7,31.3-6.7,42.7s-70.5,67.3-106.6,52s-62.1-36.7-72.1-31.3
c-10,5.3-29.3,5.3-32-13.3S75,155,64.3,150.8C53.7,146.7,20.1,110.6,35.5,95.9z"/>
</clipPath>
</defs>
The scaling issue was caused by the clip-path being applied directly to the element that was being scaled. To solve that, I just wrapped it in a group and applied the clip-path to the group instead. Since the group isn't scaling, the clip-path stays static.
<g clip-path="url(#clip_1_)">
<circle id="smoothCircle" cx="169.4" cy="129.8" r="138.1"/>
</g>

Hopefully that make sense.

:)

 

  • Like 2
Link to post
Share on other sites

Thanks, that does make sense!  I appreciate the help.

 

I only wish it was easier to export usable files directly from Illustrator...

Link to post
Share on other sites
  • 3 weeks later...

Hey, any idea why this works on Codepen, but the clipping path doesn't work in Firefox when I download it?  

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

 

Firefox seems to have some issues with combining blend modes and clipping paths, but it's so odd that it would work on Codepen and not locally.

 

My first attempt with clipping paths and blend modes didn't work in Firefox at all: 

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

but the above pen seemed to do the trick... until I downloaded it.  I can't figure out what the difference could be.

Link to post
Share on other sites

When running locally. Make sure you link to the GreenSock TweenMax CDN scripts. The codepen GreenSock JS linked script files will only work on the codepen website.

 

Also make sure you remove the following xml tag from your html code since it isnt needed on an html page:

<?xml version="1.0" encoding="utf-8"?>

:)

Link to post
Share on other sites

When running locally. Make sure you link to the GreenSock TweenMax CDN scripts. The codepen GreenSock JS linked script files will only work on the codepen website.

 

Also make sure you remove the following xml tag from your html code since it isnt needed on an html page:

<?xml version="1.0" encoding="utf-8"?>

:)

Greensock is still working overall; just the clip path is no longer in working in Firefox with blending modes.  It's just so strange since it does work in Codepen.  When I download the files from codepen, it does use the standard cloudflare CDN.

 

Removing the xml version doesn't seem to make a difference.

Link to post
Share on other sites

It may just be a bug with Firefox.  At least one other person seems to have experienced the same thing: http://stackoverflow.com/a/36147023

 

But I still can't figure out why it would behave differently in Codepen vs locally.

 

 

My last resort solution is to have two copies of the same SVG and apply the blend modes individually to each SVG container.  That works, but it seems like a lot of extra markup so I'm hoping to get the two blend modes working within the same SVG (with a clip path).

Link to post
Share on other sites

ohem... I downloaded and tested both of your codepen's above locally from my desktop and they worked for me!

Link to post
Share on other sites

ohem... I downloaded and tested both of your codepen's above locally from my desktop and they worked for me!

Hmm... are you seeing the wiggly clip path though?  When I download it (in Firefox on a Mac) I only see the circle, but not the wiggly clip path.  In Chrome it's fine.

Link to post
Share on other sites

Hmm... it seems to work now if I apply the clip path inline, like  

 <g id="holder" clip-path="url(#clippy)">

instead of in the CSS.

 

I still have no clue why it worked on Codepen but not locally the previous way.

Link to post
Share on other sites
Okay, I have everything working for the most part in almost every browser, but I have a (hopefully final) super specific question.  Can anyone confirm whether this works on Opera Mini on an Android?  

 

New pen: 

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


 

It works on all other browsers (including Opera mini on my iPhone) but when I test on Opera Mini on an Android using CrossBrowserTesting.com, the animation isn’t showing up; it’s just a static blob.  Not sure if it’s just an issue with how the testing site is rendering things or if it is an actual bug with GSAP on Opera Mini on Android.

 

Any insight is appreciated; as always the support in this community is unparalleled. :)

Link to post
Share on other sites

I see your above codepen link working in Opera Mini on Motorola Droid Turbo latest Android build. It renders like it would render in Chrome.

  • Like 1
Link to post
Share on other sites

Thanks for checking!

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

×