I am planning to add multiple variables support in one element

[stevenlei]

Usually, we want to update several CSS properties in one go. For now, we have to wrap a few elements to archive this, for example, if we want to fade in an element and move it:

<div tg-name="move" tg-from="-200" tg-to"200">
  <div tg-name="opacity" tg-from="0" tg-to="1">
    <span>Hello World</span>
  </div>
</div>

span {
  transform: translate(var(--move) * 1px);
  opacity: var(--opacity);
}

To make it simple, I would like to change to:

<div
    tg-name="opacity, move"
    tg-from:opacity="0"
    tg-to:opacity="1"
    tg-from:move="-200"
    tg-to:move="200"
  >
    <span>Hello World</span>
</div>

span {
  transform: translate(var(--move) * 1px);
  opacity: var(--opacity);
}

Please feel free to comment, thank you.

[DominguitoLamo]

I got your idea. However, it is complicated. Duplicate tokens are necessary for multiple variables. Perhaps syntax sugar is needed.
Furthermore, multiple variables implies complicated attributes. Writing all tg-directives is difficult to control. I suggest the feature of template (tg-template) is necessary.

Here is the example:

<div
    tg-name="opacity, move"
    tg-from:@fromDemo
    tg-to:@toDemo
  >
    <span>Hello World</span>
</div>

<tg-template id="fromDemo">
{
  opacity: 0,
  move:-200
}
</tg-template>
<tg-template id="toDemo">
{
  opacity: 1,
  move:200
}
</tg-template>

span {
  transform: translate(var(--move) * 1px);
  opacity: var(--opacity);
}

[stevenlei]

Thanks for your suggestion, however I think the syntax is quite difficult and not straightforward. Maybe we will have this template syntax in the future, but for now, I would rather suggest to have a designer-friendly syntax.