Animating SVG

[Acorn]

Until a few weeks ago, I was relying on anime.js to animate content including SVG.
The biggest downside to this approach as @Egg and @handrawn was the lack of a Timeline Panel.

My go-to application for SVG production for as few years has been Boxy SVG and a few weeks pack launched v4, which handles SVG animation with timelining.
There is no current tutorial or documentation, just a commitment to fully develop the animation aspects:

animate over 50 different properties such as fill color, stroke width, font size, view box and path data. Motion paths and transform animations are also supported in this release

In other words, you can currently achieve a hell of a lot.

I produced this, while learning my way: SVG - Animated.xar

If you open into https://boxy-svg.com/app, you can roll your own.
If you want to see what I worked on, drag this into Boxy: TG.svg.

The mechanics of adding the animation into a Xara design are a bit crude presently but essentially create a Box 500px square.
Open the exported SVG file, saved from Boxy, in a text editor and copy the contents into the Box's Placeholder Body.

It even works as far back as Xara WDPv11.
Do note, you see nothing in Preview, you have to open into a more modern browser.

Acorn

[Egg Bramhill]

Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.

https://parkeston.com/!!!!!!test/boxy-ani.svg

[Acorn]

Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.
https://parkeston.com/!!!!!!test/boxy-ani.svg

Egg, thanks for having a go. Sometimes the silence is deafening.

If you start with a clutch of SVG Shapes then select them all before switching to the Animation pane.
You can then apply any transformation to each individually.
Paths are Bezier and can have nodes added.
All effects can be set to Infinity, loops for a set period and/or ended.
Freeze set keeps the shape in place at its reached end point.
You can drag the timeline back and forth.
You set up values when you have selected the Start or End nodes or any added node in-between.
You can also apply an overall effect to the SVG as a whole.
The one thing I have yet to find is to be able to reverse the motion or effect.

I did mention there was no help as yet. The best read of the possible is https://css-tricks.com/guide-svg-animations-smil/. Not all aspects are implemented currently.

Acorn

[Egg Bramhill]

Understand most of that but a looping timeline would be a huge benifit. Also a way to change a shapes origin would be good.

Here's an animation I created in Boxy that does loop but the workaround is very limiting.

I attach a xar with one embedded copy and one svg text pasted into a placeholder but Xara Designer Pro X 17 truncates the text. I can't test wether Xara Designer Pro+ is better.

[Acorn]

Egg, perhaps it's how we approach the animations.
When you click the Bar and pick infinity, it greys out for the rest of time.

I use Web properties > Placeholder > Replace with graphic file for local files.. I use your for already uploaded SVGs.
When the Placeholder code is too big, try SVG-OMG; you can compact a fair amount.
Placeholdering is good if you intent to manipulate the SVG with JS or CSS after rendering.

If the design is complex then save out the static SVG parts as a separate file.
Your original file seemed to have a few invisible part that make the size on the page wider then the visible design.

Your animation reworked: Copper.svg.
Still too big for Placeholder but works well embedded.

Acorn

[handrawn]

I don't have pro+ so I can't use this in xda ?

I'll look at the online app, but it does not appear to be supported in firefox so it will have to wait for now...