Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Lightbulb anime.js - Motion Path Animation

    For XDAs that handle SVGs (XPro+ only) [Not yet released for Magix XWD(P) & XDPX v19+], most shapes are rendered as SVG.
    IMPORTANT
    If you Preview this animation with Shapes as SVG unticked , you will not see any animation.

    The Animation Path has a special Name htmlclass="curve"
    Anything you want to move along this path has a special Name htmlclass="shape".

    anime.js is called from the Website Code (head).
    The Animation script is in the Page code (body).

    You can make changes:
    The numbers her are all milliseconds.
    The object action's parameters all are on separate line ending with a comma.
    I would avoid messing with any part of the path() ones unless you are comfortable with anonymous JS functions.

    anime.js - Soaring.xar

    Adding a stagger makes something that is quite regular appear more natural.
    Drag on the butterflies or the blobs. You CPU may start to chug if you add too many.
    Change the shape; I added a rounded corner box to swap in.
    anime.js documentation is https://animejs.com/documentation/#motionPath.

    Acorn
    Last edited by Acorn; 18 May 2022 at 10:42 AM.
    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

  2. #2
    Join Date
    Oct 2000
    Location
    Wiesbaden, Germany
    Posts
    419

    Default Re: anime.js - Motion Path Animation

    Hey Acorn,

    that's cool – thank you.

    http://flysolo.de/xara_ani_js/

    FLy


    Quote Originally Posted by Acorn View Post
    For XDAs that handle SVGs (XPro+ & Magix XWD(P) & XDPX v19+), most shapes are rendered as SVG.
    IMPORTANT
    If you Preview this animation with Shapes as SVG unticked , you will not see any animation.

    The Animation Path has a special Name htmlclass="curve"
    Anything you want to move along this path has a special Name htmlclass="shape".

    anime.js is called from the Website Code (head).
    The Animation script is in the Page code (body).

    You can make changes:
    The numbers her are all milliseconds.
    The object action's parameters all are on separate line ending with a comma.
    I would avoid messing with any part of the path() ones unless you are comfortable with anonymous JS functions.

    anime.js - Soaring.xar

    Adding a stagger makes something that is quite regular appear more natural.
    Drag on the butterflies or the blobs. You CPU may start to chug if you add too many.
    Change the shape; I added a rounded corner box to swap in.
    anime.js documentation is https://animejs.com/documentation/#motionPath.

    Acorn

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,489

    Default Re: anime.js - Motion Path Animation

    Awesome Fly.

  4. #4
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: anime.js - Motion Path Animation

    Quote Originally Posted by Acorn View Post
    IMPORTANT
    If you Preview this animation with Shapes as SVG unticked , you will not see any animation.
    Where can I find this setting in XDP 19, Acorn?

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

    Default Re: anime.js - Motion Path Animation

    Quote Originally Posted by FLySOLO View Post
    Hey Acorn,
    that's cool – thank you.
    http://flysolo.de/xara_ani_js/
    FLy
    FLy, likewise.

    As you have used the animation on individual letters, it is running a bit jumpy.
    I suggest making the targets, the words "bring", "down" & "the" and use the letters b-i-r-d-s.

    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
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: anime.js - Motion Path Animation

    Quote Originally Posted by Boy View Post
    Where can I find this setting in XDP 19, Acorn?
    Boy, Web Properties > Website > Other > Shapes as SVG.

    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

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: anime.js - Motion Path Animation

    Shapes As SVG is only an option on XDP+ at the moment.

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

    Default Re: anime.js - Motion Path Animation

    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
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: anime.js - Motion Path Animation

    Quote Originally Posted by Egg Bramhill View Post
    That's you in the middle then Egg.

    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

  10. #10
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: anime.js - Motion Path Animation

    Quote Originally Posted by Chris M View Post
    Shapes As SVG is only an option on XDP+ at the moment.

    No wonder I couldn't find it. This setting is not available in XDP 19 and, so, the Magix crowd will have to wait a (long) while till it can join the TG animation fest.....

    @Acorn: You might want to edit your OP.

 

 

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
  •