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
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    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
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  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,659

    Default Re: CSS export for animations.

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

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    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 Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  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
    17,746

    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 Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

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
  •