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: Attachment 132117

Acorn

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?

Quote:

---

Originally Posted by Egg Bramhill

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

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?

Quote:

---

Originally Posted by Egg Bramhill

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: Attachment 132119

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

Ah! Thank you Acorn, that's perfect. =D>

Maybe update your avatar with this crisp new version?

Quote:

---

Originally Posted by gwpriester

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

As you wish. :-)

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

Quote:

---

Originally Posted by wizard509

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

---

Yes, but when Magix releases Shapes as SVG you'll be cooking.

Acorn