Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 27
  1. #1
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

    Default 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?

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,059

    Default 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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #3
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,403

    Default Re: CSS export for animations.

    Quote Originally Posted by Acorn View Post
    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.

  4. #4
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

    Default Re: CSS export for animations.

    That is correct Paul.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,059

    Default 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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #6
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

    Default Re: CSS export for animations.

    Thanks a lot Acorn.
    Attached Files Attached Files

  7. #7
    Join Date
    Sep 2000
    Location
    Bracknell, UK
    Posts
    8,403

    Default Re: CSS export for animations.

    Quote Originally Posted by Braden View Post
    Thanks a lot Acorn.
    Close..
    Name:  logo.gif
Views: 135
Size:  21.1 KB
    Attached Images Attached Images  

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    19,930

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  9. #9
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

    Default 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.

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,059

    Info 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.

    JS-Hammering.xar

    The CSS is all in the Page Head.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •