CSS export for animations.

So, you've created a slick 60fps flash animation, it's uploaded to your site, and you get a warning telling you that flash won't be supportive by the end of December 2020.

Also, every new visitor who comes to your site will be asked to allow flash to play, which is pretty annoying, especially of you simply want your logo to animate for like a second or two illustrated on the following site:
https://pilgrimwayconstruction.com/sandbox/

But if only you could just export your animation in CSS and position it where you like.

Wouldn't that be nice?

Braden, that is what the Body Placeholder is for.

Pass over your logo and associated CSS file and I'll look at setting it up for you on a dummy page.

Acorn

Quote:

---

Originally Posted by Acorn

Braden, that is what the Body Placeholder is for.

Pass over your logo and associated CSS file and I'll look at setting it up for you on a dummy page.

Acorn

---

I think Braden wants Xara to generate the animation using CSS/HTML/Javascript . He doesn't have the animation in that form.

That is correct Paul.

Got it. Can I have as many of the tweened hammer images you have.
I would prefer everything is vector.

You could look at something like https://cloudconvert.com/swf-to-gif.

Acorn

Thanks a lot Acorn.

Quote:

---

Originally Posted by Braden

Thanks a lot Acorn.

---

Close..
Attachment 125215

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

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

HTML5

LINK

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.

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.

Attachment 125219

The CSS is all in the Page Head.

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.

Quote:

---

Originally Posted by 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.

---

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

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.

And another JS library for Coders: https://animejs.com/.

Acorn

Sorry it took me so long to get this on here.

@ Acorn: I'm not sure what you mean, I haven't removed anything.

But I'll re-attach everything here.

Braden, all the SVGs are static. What i was talking about is the one that was on your site that is the Flash animation. where it was is now a PNG version of your finalised Logo.
Without seeing the Flash file and stepping through, I cannot recreate it.

Acorn

It has been re-added to the home page.

Braden, it's still a Flash file. Flash is dead! To view it viewers need to click "Allow Flash" which not many have installed these days. You need to re-create it as a gif, avi, html5 or css file.

Quote:

---

Originally Posted by Egg Bramhill

You need to re-create it as a gif, avi, html5 or css file.

---

Unfortunately, Xara doesn't do that, and I don't know how to. (It does gifs but those are by nature, pretty messy)

I tried to use Hippani, but as said before, it comes out whack.

I may just have to go with a static logo.

Quote:

---

Originally Posted by Braden

Unfortunately, Xara doesn't do that, and I don't know how to. (It does gifs but those are by nature, pretty messy)

---

LOL, I already made you one, but it would probably need to be made larger and scaled down.

Two of us have made HTML versions, but that needs some care to include in Xara.

Quote:

---

Originally Posted by Egg Bramhill

Braden, it's still a Flash file. Flash is dead! To view it viewers need to click "Allow Flash" which not many have installed these days. You need to re-create it as a gif, avi, html5 or css file.

---

Egg, I asked for access to the file so I could look at it.

Acorn

Here's a final version created in Saola Animate. I like the fact that Saola retains svg's as svg's so you can size them up or down with no loss of definition and it's only 55Kb's. Unfortunately I created this one one an 800 x 600 px page whilst the size of the animation is only 200 x 250 px but I can't see anyway to reduce the page size to match in Saola. Said I had a love hate relationship with it ;)

I attach a xar file containing a mock up. Just preview.

Quote:

---

Originally Posted by Egg Bramhill

Here's a final version created in Saola Animate. I like the fact that Saola retains svg's as svg's so you can size them up or down with no loss of definition and it's only 55Kb's. Unfortunately I created this one one an 800 x 600 px page whilst the size of the animation is only 200 x 250 px but I can't see anyway to reduce the page size to match in Saola. Said I had a love hate relationship with it ;)

I attach a xar file containing a mock up. Just preview.

---

Great job Egg.

Thanks Paul

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.

Quote:

---

Originally Posted by Braden

I've just been really busy with work.

---

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

No worries.

In the end, I made a number of newbie errors in designing a CSS Animation approach.

The main one was that I used absolute units (pixels) so all the translations are fixed so the end result cannot be easily scaled. Similar problem to Egg, I suppose.
I am sure that knowing the width and height ratio, percentages could be used to allow this scaling.

This is my updated file with some workings: Attachment 125257.

Had this been for a client, I would have ended up saving lots of time buying a commercial solution but I would have missed on on the learning experience.

Acorn