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

    Default anime.js - Controls

    In Pro+, I have a collection of shapes grouped and flagged with htmlclass="acorn".

    I created a JavaScript object, initial, that produces random values for the animation.
    The animation is fired up on page load and will animate differently on each page load.

    The Links hook into the animation with javascript calls like javascript: animation.play();
    Pause only works during an animation. Play resume it. Restart goes back to the beginning.
    Reverse only works when animating.

    There is an input range control that shows where the animation is.
    It can also be used to set the animation to any step.

    There is one further control - page scrolling.

    Remix is experimental in that I was trying to dial up and keep a different animation. It doesn't keep.

    Demo: https://shared.xara.com/3XfHoMiZSt
    Design file: anime.js - Controls.xar

    Acorn
    Last edited by Acorn; 28 May 2022 at 09:21 PM.
    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
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: anime.js - Controls

    Great animation but is there a way to start it deconstruced then animate to a constructed state as I'd see this as more practicle?
    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

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

    Default Re: anime.js - Controls

    Quote Originally Posted by Egg Bramhill View Post
    Great animation but is there a way to start it deconstruced then animate to a constructed state as I'd see this as more practicle?
    Egg, I assume you are after the screen scroll.

    If so after anime(animation);, put animation.seek(animation.duration);
    The change the onscroll function to animation.seek((100 - scrollPercent()) / 100 * animation.duration);

    This has the graphic exploded and comes together as you scroll down to page bottom.
    Clearly, you can add Xara targets to any page position and the animation will open out to its equivalent position.

    You can also try altering direction: 'reverse',. With the Restart control, the animation implodes.

    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

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

    Default Re: anime.js - Controls

    No that's not what I'm after. I would like the shape to first appear in the exploded view (so a vistor wouldn't see it as an acorn) then have it play once to construct the acorn. In other words I wouldn't want the visitor to first see the acorn, then watch it explode, just the reverse. Is that clearer?
    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. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: anime.js - Controls

    Quote Originally Posted by Egg Bramhill View Post
    No that's not what I'm after. I would like the shape to first appear in the exploded view (so a vistor wouldn't see it as an acorn) then have it play once to construct the acorn. In other words I wouldn't want the visitor to first see the acorn, then watch it explode, just the reverse. Is that clearer?
    Egg, I did cover it in the second part.

    Here is an example: https://shared.xara.com/nz6HnKNRb7
    Design: anime.js - Implode.xar

    If you click the "Where's Acorn?", the graphic implodes.
    A second click explodes so you can disable this be adding a further statement to the animation:

    complete: function(anim) {
    anime.remove('.acorn');
    },

    Acorn
    Last edited by Acorn; 30 May 2022 at 03:28 PM.
    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 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: anime.js - Controls

    Ah! Thank you Acorn, that's perfect.
    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. #7
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: anime.js - Controls

    Maybe update your avatar with this crisp new version?

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

    Default Re: anime.js - Controls

    Quote Originally Posted by gwpriester View Post
    Maybe update your avatar with this crisp new version?
    Gary, my avatar is lumpy as I built it purely from tinted, rotated, scaled letters.
    What I am using in the animations is my original vector version.

    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. #9
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: anime.js - Controls

    As you wish. :-)

  10. #10
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: anime.js - Controls

    Acorn, does not work for me. Is it because I am not using pro +?
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

 

 

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
  •