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?
Re: CSS export for animations.
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
Re: CSS export for animations.
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.
Re: CSS export for animations.
Re: CSS export for animations.
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
5 Attachment(s)
Re: CSS export for animations.
2 Attachment(s)
Re: CSS export for animations.
Quote:
Originally Posted by
Braden
Thanks a lot Acorn.
Close..
Attachment 125215
Re: CSS export for animations.
Here's the closest I can get using your svg's
Not 100% but I'd need your xar logo file.
HTML5
LINK
Re: CSS export for animations.
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.
1 Attachment(s)
Re: CSS export for animations.
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