CSS export for animations.

[Braden]

Thanks a lot Acorn.

[pauland]

Thanks a lot Acorn.

Close..

[Egg Bramhill]

Here's the closest I can get using your svg's

Not 100% but I'd need your xar logo file.

HTML5

LINK

[Braden]

Hey Egg,

I was able to make something using Hippani, but upon export it comes out real wonky.

I also don't know how to get it placed in the Xara site.

I'll have the logo's Xar file posted here momentarily, I'm out and about using the mobile version of TG, it needs an update.

Thanks everyone, peace be with you all.

[Acorn]

I didn't get a chance to download the SVG before you removed it.

My approach was two animations of the hammer and the nail. I didn't get around to the crack.
Each group has a special Name of htmlcass="hammer" or htmlcass="nail".

I guessed the timing as well and I couldn't remember the pathing, scaling or start position.

To get the punch through, I made a notch in the ring and added a orange filler behind.

I used https://cssanimate.com/ to scale translate and rotate the hammer and translate the nail.
I took about 7 steps for the hammer as it has the final bounce; the nail as three, one of which was the delay waiting for the hammer to appear.
I suggest you have three pages of the site open to experiment with the hammer, nail and crack as unfortunately there is only a CSS code save, no restore.

JS-Hammering.xar

The CSS is all in the Page Head.

Acorn

[Egg Bramhill]

Like that a lot Acorn. I'm no coder so I prefer using software to achieve this. HERE I've used Saola Animate, which I have a love/hate relationship with.

@ Braden I did try creating this in Hippani but I found it very unstable too.

[Acorn]

Like that a lot Acorn. I'm no coder so I prefer using software to achieve this. HERE I've used Saola Animate, which I have a love/hate relationship with.
@ Braden I did try creating this in Hippani but I found it very unstable too.

Saola Animate looks interesting and comprehensive but I wouldn't buy it.

I do like experimenting with code like CSS animations to understand the basics like keyframes. Once there, I am in a better position to understand the market.
If I had the money, I would go for https://greensock.com/gsap/.

Acorn

[pauland]

Tumult Hype..

http://ipauland.com/logo/logo.html

I would have masked the hammer, but didn't on this occasion. Sadly Hype doesn't output SVG and I no longer have an Adobe Animate licence.

[Braden]

Paul, Acorn, Egg:

Sorry I've been slow to reply, and slower to understand.
I am very grateful that you have done everything you've done to help me with this, I've just bdden really busy with work.

[pauland]

I've just been really busy with work.

..and you guys do real work, not just tapping a keyboard!

No worries.