Jump to content
Search Community

Animated, masked SVG Bevel and Carve

fruityth1ng 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'm trying to bevel (extrude) and carve (cut into the page) this shape as an animated button.

 

I have more complex shapes to do this with, which is why I came up with this layer stacking approach. I'd love to hear better ones!

I've also used this approach with images, which one can smear & darken this way, a nice effect when used with textured images!

 

My ask is about the few frames that the shape is closest to being "flush" with the panel it's on/in. When masking between the bevel / carve parts, we see an aliasing artefact that is made worse by it being so close, in time, to the other state. When the white part pops out, it's a bit "fat", and when it's going in, the dark part is visible at the edges.

 

The glitchyness is most noticeable on non-retina screens.

 

Would you have any idea on how to make the less extreme states of this animation less glitchy?

See the Pen zdOGap by fruityth1ng (@fruityth1ng) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very cool effect.

I'm not really aware of anything related to GSAP which is going to help remove the artifacts / anti-aliasing glitchiness, but perhaps someone else around here has ideas on an alternate approach.

Link to comment
Share on other sites

Hello nice bevel effect!

 

This looks like the inconsistent rendering of each browser causing those aliasing glitches / artifacts.

 

I only see your example work in Chrome (webkit based browsers) not Firefox. Like the animated X is only rendering in webkit based browsers like Chrome, Opera, and MS Edge at least on Windows based OS.

 

It looks like each browser is rendering differently

  • MS Edge - just shows the x move up and down, with the lighter x underneath no inset bevel effect
  • Chrome - looks like the x is moving within the darker x. Kind of like pushing a kids toy block shape inside the shape hole cut out
  • Opera - renders like Chrome
  • Firefox - renders no x shape, just a the blue button shape (GSAP is animating the value in the inspector but no rendering)
  • Safari - didnt get to check it

 

  • Like 3
Link to comment
Share on other sites

Thanks!

The way it shows in Chrome is the way I intended it.

 

My more technical friend is looking at the crossplatformy'ness. He got firefox working at least, and we're thinking of using fallbacks for browsers that give us too much pain. I'll pass him this thread for your very kind testing report :)

 

Right now we're looking at dynamically disabling layers when there's too many in the same place, to combat those overlapping edges. I'll report back!

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