HTML IDs/classes based on AE Layer Names? about lottie-web HOT 20 CLOSED

Something I've seen before in Illustrator SVG export scripts is assigning classes/IDs based on a naming convention in the layer name. Optimizing the SVG by removing groups is great and I totally understand why you do it. I wonder if users could "opt-in" to certain things being grouped with an ID based on the layer name.

For example, if a layer name was prepended with >#, it would get exported with an ID based on the name of the layer. So if this was my list of layers:

• Forehead

• #Eye Brows

• Nose

• #Mustache

The layers with prepended names would get output as groups with IDs, looking something like this:

<svg>
  <polyline>...</polyline>
  <g id="eye-brows">...</g>
  <polyline>...</polyline>
  <g id="mustache">...</g>
</svg>

Thoughts?

Sorry, I know the preferred process for feature requests is a proposed code solution rather just a concept. I'm just not that familiar with the internals of the plugin. Love it though. Great work!

from lottie-web.

@sanderson yes it absolutely makes sense.
It's a good trade off.
I'll look into it soon.

from lottie-web.

@sanderson It's not that easy right now because elements don't get nested into g tags unless necessary.
I do that to improve performance.
But that's definitely something I have considered and should look into it.

from lottie-web.

@sanderson how would you use it?

from lottie-web.

Essentially what I'd like to do is target specific elements within the SVG and apply different states to them using CSS. For example, a dynamic color shift when hovering on a certain element within the animation without have to load an entirely new animation.

Quick example:

html

<svg>
  <g id="little-man">...</g>
</svg>

sass

svg g#little-man:hover {
  polyline { stroke: blue; }
  path     { fill: green; }
}

from lottie-web.

@bodymovin Awesome, thx!

from lottie-web.

@sanderson I've uploaded a first attempt at this.
I'm no longer setting svgs properties, I've moved them to css.
But they still are inlined, so in order to override them, you'll need to use !important on your stylesheets.
Another use for ids is adding interaction to specific elements.
Regarding naming, I'm not modifying the original name set on AE, so you should use the exact same name removing the "#".
Let me know how this works for you.
cheers and thanks for the suggestion!

from lottie-web.

Great! I'll give it a go tomorrow and let you know how it goes.

from lottie-web.

@bodymovin, I've downloaded the updated .zxp file and updated the extension, but in my tests, the IDs aren't being assigned to the outputted svg elements.

from lottie-web.

@sanderson That's strange, it works here.
Can you email me the .ae or the exported .json?

from lottie-web.

I just created a repo with my test files: https://github.com/sanderson/bodymovin-id-test

from lottie-web.

@sanderson I see the issue now. I didn't clarify correctly.
It needs to be prepended by a '#', not a '>#'.
Sorry for the misunderstanding.
Nevertheless, is there a reason you thought adding two chars instead of only a '#'?

from lottie-web.

I tried both, but neither worked. Initially the thought process behind two characters was a "barrier to opt-in", preventing unintentional output if users are already using naming conventions with hashes. But I actually prefer the single character. I know there may some looking for classes as well (.), but I'm happy with IDs.

from lottie-web.

@sanderson can you send me a json exported with only the '#' to check it out?

from lottie-web.

Oh, sorry about that. Just pushed the updated json file and AE file to that repo.

from lottie-web.

@sanderson the exported json has the layer name correctly set.
And I can see the g tag with the id correctly set. Did you update the player with the one from the latest plugin?

from lottie-web.

I thought I did. Let me test again.

from lottie-web.

😑 Looks like I forgot to update the player. So sorry to bug you. It's working great.

from lottie-web.

@sanderson no problem!
I'm glad it's working.
I'm going to upload a small fix later related to transforms. With this modification they stopped working on older browsers and even the plugin has the animations corrupted.
I'm closing the issue. If anything turns up let me know!

from lottie-web.

Sounds good. Thanks again!

from lottie-web.