Jump to content
GreenSock

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

Gumby Adventure - SVG Masking

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

Hello Friends!

Currently the SVG has buttons with simple hover treatments (mouseover and mouseout functions). This year the customer wants to have a mask head pop into a circle frame on hover, (pop away on mouseout). I have masked the head, but when running the hover effect, the mask travels with the head piece instead. 

The Gumby Head button will have mouseover and mouseout functions eventually, but this is a proof of concept to test how to build it. I plan to rewrite other animations in Timeline too. The button will link to a page with an amazeballs 3D animated Gumby, Pokey and Blockheads. 

Thanks so much!
Greg (shrinkray)

See the Pen VMzMrQ by shrinkray (@shrinkray) on CodePen

Link to comment
Share on other sites

Hi @shrinkray :)

 

Welcome to the forum.

 

I had a hard time going through and finding things in your pen as you have a couple hundred lines in your SVG and several hundred in your JS. It appears that you are trying to animate a masked group. Doing that will just drag the mask along for the ride. You have a couple ways to animate with masks: you can tween the elements that make up the mask or tween the elements that make up the masked group. Here's a really basic example to show you what's happening:

 

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

There are three rectangles, (r/g/b) that are being masked by three circles. You can see the red one is animating the masked group. Everything including the mask is moving - probably not what you want. The green one is animating the rectangle within that group. It moves up and down to reveal itself behind the circular mask. The blue one is not animating the masked group, but rather animating the circle that creates the mask so it looks more like a spotlight moving over the elements. 

 

Hopefully that helps. If you still can't locate your problem area, could you please reduce your pen to just the basics to create the issue? It really helps to get you the best answers. Thanks.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Thanks PointC,

 

Thank you for your example, very helpful. I understand and apologize for the unnecessary complexity.

 

Questions: 

  • The part that is to be masked is made up of smaller parts. Does each part of the group get ` mask="url(#svg-mask)" ` added?  
  • Are the parts to be removed from group? 

Thanks for the info on groups, I'd not found anything about that; very good to know. I'm testing the two questions above. Now the masked image does not appear at all.

  • Does each shape need its own <def> defined mask? Or can the same be applied to many elements? 

The image complexity could be part of the problem here. I'll set about simplifying the image to make the work clearer. While it is not masking, and not the most elegant solution, I think it might work to add a 'cover' shape positioned to cover the group when outside the circle. I'd 'flunk' GSAP school if I implement that technique. 

 

--Greg

 

Link to comment
Share on other sites

You don't need a separate mask for each part of the group. Instead of animating the masked group, you simply wrap an inner <g> around the pieces you want to animate together. Also, while on the topic, masks are not always necessary. Sometimes clip-path is the preferred choice. Since you just have a circle revealing your Gumby character and don't need any gradients or opacity changes, I'd recommend a clip-path in this case. Here's a revised version of my example from above with a few elements in a group that move together behind the clip-path.

 

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

 

Sarah Drasner has a good article about masks and clip-paths here:

https://css-tricks.com/masking-vs-clipping-use/

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

These are great demos, Craig. Simple and to the point. I'm sure others will be able to build off of these and save themselves some hours of frustration!

  • Like 2
Link to comment
Share on other sites

Yup, thanks so much. I've been researching a fix for the mask problem for a few days. So glad to have a solution that works cross browser (Mac & Windows). I've read several things that put down the clip-path using CSS, but this SVG method works just fine. 

  • Like 2
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.
×