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
    86

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

    It is not necessary that hypotheses should be true, or even probable; it is sufficient that they lead to results of calculation which agree with observations. -Nicolaus Copernicus

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    9,965

    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 - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

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

    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
    86

    Default Re: CSS export for animations.

    That is correct Paul.
    Braden

    It is not necessary that hypotheses should be true, or even probable; it is sufficient that they lead to results of calculation which agree with observations. -Nicolaus Copernicus

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    9,965

    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 - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

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

    Default Re: CSS export for animations.

    Thanks a lot Acorn.
    Attached Files Attached Files
    Braden

    It is not necessary that hypotheses should be true, or even probable; it is sufficient that they lead to results of calculation which agree with observations. -Nicolaus Copernicus

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

    Default Re: CSS export for animations.

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

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

    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 + 16GB Ram + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 16

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

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

    It is not necessary that hypotheses should be true, or even probable; it is sufficient that they lead to results of calculation which agree with observations. -Nicolaus Copernicus

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    9,965

    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 - My currently active Xara software: XDPX (current, v15, v12 & 11 (64-bit)), unserviced XWD Premium 15 & 12, XPGD10, X3D7; lots of licences back through time (to CC's Artworks). If your Post identifies a Xara software fault, please raise it directly with Magix --> support2.magix.com.

 

 

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
  •