Need help from an animation Jedi

So I recreated the cool logo on the back of a Veuve Chicquot box while getting familiar with Affinity Designer (great alternative to Illustrator for those sick of adobe :slight_smile: and I was thinking about how one might go about making it an animated button. I’m not sure CSS can do convex curves, but I’d like to see my example be able to be clicked and the bottom layer (anchor portion) sinks further in or something.

It would make a nice transition button to navigate down a page rather than the bouncing arrow we see everywhere.

Attached is my attempt. Thanks for the help!

Affinity Designer is absolutely neat, and really starts to export great SVG code.

However there’s no need to compare to or ditch AI. They’re really not addressing the same crowd and their prices are drastically different :slight_smile:

No, but Canvas can. That will require external visual development though, then integration into Webflow.

But I don’t fully understand the goal. I’m sure it’s possible, but could you draft the final step of the animation?

Something like this?

http://vincent.polenordstudio.fr/snap/5l4s1.jpg

If yes, then you need to spread your design into a svg of the shape with bg color and shadows, a svg of the shape only, and the layer with the anchor. You will animate the anchor down and use the SVG as a mask.

The technology is called clip-path, but as you well noted, because of convex curves, you’re going to need a SVG for the mask, instead of a CSS path.

Read the whole article though :slight_smile: SVG appears down the page.

Great info! I’m not familiar with SVG animation, so I’ll have to look into that. Here is a mock up of the sequence.