Is there a duration for each Shape properties ?

[Jeremboo]

Hi !

I'm actually trying a basic Shape animation on this codepen and I would like to know if it's possible to have a duration for each property of a unique Shape. Like mojs.Html.

For example, I have a square which I would like to draw the outline first and making disappear after a delay while he turns :

|----------------------------------- Rotate --------------------------------|
|--- StrokeDashoffset ---| - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -|-------- Opacity -------|

const square = new mojs.Shape({
  shape:       'rect',
  stroke:      '#FA6B6E',
  fill:        'none',
  radius:      20,
  strokeWidth: 8,
  angle:       { 0 : 90 },
  strokeDasharray: '100%',
  strokeDashoffset: { '-100%' : '0', duration: 500 },
  opacity:     { 1 : 0, delay: 1000, duration: 500 },
  // duration : 1500, // ???
});

But it doesn't work for me and, instead, I tried to use .then({})and I made something like this :

|----- Rotate * 0.25 ----||---- Rotate * 0.5 -----||----- Rotate * 0.25 ----|
|--- StrokeDashoffset ---| - - - - - - - - - - - - - - - - - - - - - - - - - 
- - - - - - - - - - - - - - - - - - - - - - - - - -|-------- Opacity -------|

const _rotate = dist => ({
  duration:    duration * dist,
  angle:       { 0 : [360 * dist], easing: 'linear.none' },
});
const square = new mojs.Shape({
  ..._rotate(0.25),
  shape:       'rect',
  stroke:      '#FA6B6E',
  fill:        'none',
  radius:      20,
  strokeWidth: 8,
  angle:       { 0 : 90 },
  strokeDasharray: '100%',
  strokeDashoffset: { '-100%' : '0' },
}).then({
  ..._rotate(0.5),
  strokeDasharray: false,
}).then({
  ..._rotate(0.25),
  strokeDasharray: false,
  opacity:     { 1 : 0 },
});

I did not find any examples of the searched approach and, if it is not possible to make a duration, how can I make something most clearly ?

Thank you for your work and for this library very promising :D

[legomushroom]

Hi Jeremie! Thanks for the issue, great question!

Shape delta properties don't support any tween property besides 'easing'. It will be fixed in near future and will be consistent with more flexible HTML deltas.

You did it right with 'then' chain. Another possible solution is to use HTML module to animate those properties, but you will have to bootstrap your shape by yourself. HTML actually animates whatever CSS on the DOM element, so it will animate presentation attributes of SVG too.

Hope it helps.

[Jeremboo]

Cool ! It will be very useful !

But seen like this, HTML module seem to be more powerful than Shape module if we put inside SVG elements. Why separate it on 2 modules with differents behaviors ?

[legomushroom]

HTML module is new one, Shape module is old one. So there was no HTML at all recently and frankly, I didn't plan it since you have a lot of libraries that support HTML pretty well. Turns out that only one of them supports timelines so I decided to add it. After refactoring, the HTML and shape will be almost entirely equal.

[Jeremboo]

Okay ! Thank you for these precisions ! I will stop my questions or we'll spend all the night on that 😅.

So in conclusion, we can say the tween properties (like the duration) will be added to the shape delta properties into a near release ?

I close this issue or we will wait for this release ?

[legomushroom]

Not sure about nearest release, but in near future for sure.

Don't close, I'll mark it as enhancement and close it when it will land to production. Thanks again!