Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22
  1. #11
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Setting up better Animations

    Still trying my hardest to follow Episode 1 Acorn. I'll get there in the end. Thak you, this is a lot of work for you
    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

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

    Info Re: Setting up better Animations

    EPISODE 4

    This is quite simple: you can run Animations back-to-back with careful use of the animation-delay property.
    This level of granularity requires CSS coding that would be over-complex trying to squeeze into a Name value.

    The displayed code is in Website > HTML Code (head.
    The ClassName (htmlclass="inforapenny") is all that is required for the Name value for the image. Note, ClassNames are case-sensitive so 'inForAPenny' would not work.

    CSS - All the Animations.xar

    The animation and delay of each effect are comma-separated.
    The duration can follow the animation-name with something like 3.2s or 473ms.
    for fuller explanation on all animation properties: https://www.w3schools.com/css/css3_animations.asp.

    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. #13
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Setting up better Animations

    You're cooking on gas Acorn. I can't keep up with you!
    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

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

    Default Re: Setting up better Animations

    Just to ensure you know we are here and following you, here's my experimenting with your great input.
    Attached Files Attached Files
    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

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Setting up better Animations

    Quote Originally Posted by Egg Bramhill View Post
    Just to ensure you know we are here and following you, here's my experimenting with your great input.
    I think you have it Egg!

    The off-page button is not needed as you have applied a SlideinLeft animation to the LB shape.
    Neither is the link to ani.css for the same reason.

    To get the others to replay on "reveal", I might add FadeIn&0 to UL, UR & BR shapes as well.

    I would use the full property presentation when adding multiple animations, otherwise
    { animation: pageRotateFlipBI 2.5s ease-in-out 0s 1 forward; } works well.

    I can't wait until you start tweening with keyframes.

    Acorn
    Last edited by Acorn; 09 June 2021 at 08:42 PM. Reason: typo corrected
    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. #16
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Setting up better Animations

    I can't wait until to start tweening with keyframes.
    You can't wait until......?

    I tried the link to ani.css in the head first and this didn't work but I forgot to remove it.
    The button worked prior to giving me giving it a reveal attribute.
    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

  7. #17
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Setting up better Animations

    Egg, I entered 'to' instead of 'you'.

    Corrected in OP.

    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

  8. #18
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Setting up better Animations

    EPISODE 5

    This is all around handling mousing out of an animation; Xara's approach chops it dead so it is very abrupt and disconcerting.

    The CSS Code in the example file, CSS - CoX.xar, adds an animation into default ClassName and a different one into its :hover pseudo-attribute.
    All prior constructions still apply.

    The end result is chaotic but harder to force jumps.

    A further example to implement:
    .HeadShake {
    animation: headShake;
    animation-duration: 3.27s;
    animation-iteration-count: 2;
    }
    .HeadShake:hover {
    animation: heartBeat;
    animation-duration: 1.62s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    background-color: green !important;
    }
    This throws in an immediate hover colour change, which could have been set up as a slower transition by adding ' transition: all 5.37s;' at the end of the first-bracketed HeadShake code.
    All timings are random and there for you to tweak.

    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

  9. #19
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Setting up better Animations

    Acorn, I'm just today looking at the posts in this thread and at the files you attached. This is really an awesome way to "force" the Xara software to do precisely what you want. Thanks, kudos and congrats!

  10. #20
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Setting up better Animations

    Acorn, your development in this thread is impressive and very useful. I had the opportunity to experiment with it for a while yesterday so that I could grasp the potential.

    I have a couple of concerns if you’re willing to entertain them.

    I have been using Xara’s built-in animation effects on the website I’m developing, specifically reveal animations. Some of them include triggers, and all of them are set to reveal “Once only”. As best as I can determine using your method, both of these features still require use of the Web Animations dialog box.

    For the trigger feature, I selected the animation set to “Instant”. The result is that the specifications set up through CSS classes that you developed work without interference. Using animation-iteration-count (as in your inforapenny class) does not stop the reveal from repeating if the element moves out of and back into the viewport. The trigger function undoubtedly relies on a JavaScript Intersection Observer meaning it would be more complex to extract it from the Xara set up and use the “manual” approach that you gave us.

    I don’t know if the reveal “Once only” feature relies similarly on JS, or if it could be accomplished through CSS. I was able to get the desired effect by using the Web Animations dialog and selecting the same reveal function specified in the htmlclass name (e.g., FadeIn) with Speed (and Delay) set to 0s. As I think you point out in the thread somewhere, the times defined in the named classes override the times in the dialog and the reveal works perfectly. Fortunately, the “Once only” feature is entirely compatible.

    Are either, or both, of these issues part of your Setting up better Animations initiative? It would be quite powerful to be able to eliminate the Web Animations function from our Xara sites entirely and rely on our own coding.

    Again, thanks for the effort and great results.

 

 

Tags for this Thread

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
  •