Jump to content
GreenSock

ppdc

Image Clipping

Go to solution Solved by GreenSock,

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 did play around with your new Plugin, and tried to morph a svg shape used as clippingPath on an image.

I know, support for this varies among browsers, IE being the usual spoilsport, but still... I was playing around with that recently while trying to port a flash-banner to html. The ability to animate masks is one of the few things I still miss from the Flash-days.

 

However, it kind-of works out of the box, but there seems to be a redraw issue.

Here's my pen:

See the Pen epgbXg by ppdc (@ppdc) on CodePen

 

Firefox works fine, Chrome and Safari only update the mask on the image if you force a redraw, by scrolling or resizing the frame in codepen.

 

Having said that, exceptional work, as always Mr GreenSock!

 

 

Link to comment
Share on other sites

  • Solution

Yeah, browsers seem to have a lot of strange redraw issues when it comes to things like masking.

 

I noticed that I could get Chrome and Safari to render beautifully if I also animated the backgroundColor of the element (in this case the <img>) at the same time!

 

I think what's happening is that it's pushing the image to the compositor/GPU but then the animation on the mask isn't triggering it to re-push the revised pixels over to the compositor/GPU. But if you animate the color, it forces that trigger. Totally a guess on my part. 

Link to comment
Share on other sites

Some browsers just love to be fooled.

That does the trick and the explanation sounds ... sound.

 

Just sad to see that support by IE doesn't even seem to be planned, says caniuse.com.

  • Like 1
Link to comment
Share on other sites

Worked fine on my Windows IE - did you have trouble Blake? 

Link to comment
Share on other sites

Nope. I updated the pen to work in IE.

  • Like 1
Link to comment
Share on other sites

I had thought of that, but didn't try. Nice! It even works down to IE9!

 

@Jack: Did you change anything in the MorphSVGPlugin? I noticed, you don't need the dirty hack you came up with anymore...

Link to comment
Share on other sites

The only thing I changed recently is the algorithm for determining the shapeIndex automatically. It works better now when the shapes are further apart. But no, I didn't do anything like forcing the backgroundColor to update during the tween :)

Link to comment
Share on other sites

:D

Why not? A little useless tween never did no harm...

 

Still kind of odd that it works now. Browser voodoo... at least white voodoo for once :)
Link to comment
Share on other sites

This is great dude!  Thanks for posting this.. .. .. ..   It tried to build this sort of thing over the weekend, but didn't follow through and finish it.   Nice work!

Link to comment
Share on other sites

Anyone have any luck with animating the clip-pathing? ie... translating it may 50px over and scaling it some. Got it to work in webkit, firefox has issues. Was looking into using attr plugin.

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.
×