Possible to add class/id to svg elements?

[a10k]

To add some interactivity to the animation on the webpage, I would like to know if it is possible to add ID/classes to the svg elements to later add event listeners to them (after loading the animation) to control some parts of the animation with JS. Also, please let me know your advise on the best way/recommendation to add interactivity to the animations as I'm planning to use them for some UI elements.

[a10k]

Sorry to bug you, just found out this is a duplicate of #32

Thanks though! Great Library.

[nilooy]

hello, can you tell me how you have added the class and id's? what the way of export to get id and class?

[bodymovin]

@rezwanferdous name your layers starting with a "." or a "#" and they will get exported with the name as a class or an id respectively.

[nilooy]

should i export with glyph? sorry i'm actually still learning this tool. i just love using it. thank you so much

[bodymovin]

@rezwanferdous glyphs are only intended for text layers. If not, they have no effect on the export.

[nilooy]

alright i got it. Thank you so much...it's so much. You have no idea how much i love this bodymovin.

[panksi]

@bodymovin Hi, I maybe have new possible use case for this. what I am trying to do is to clip element that is outside of the SVG generated by lottie. At the moment I cannot do that because lottie generates random ID for defs clipPath element.

[bodymovin]

@Panksi hi, I just uploaded a new version that sets incremental ids instead of random ones, as long as the animations don't change. It can help for your use case.

[trisghosh]

Hi @bodymovin,

Can I add bodimovin to many elements based on element ids. So I can add hover and out animation on indiviual element. Otherwise it work with all element on a single.

Thanks

[bodymovin]

@trisghosh yes, you can load different animations on different dom elements on your page

[panksi]

@Panksi hi, I just uploaded a new version that sets incremental ids instead of random ones, as long as the animations don't change. It can help for your use case.

Thanks dude, that's awesome. somehow I missed the reply , but I have seen it just now. nevertheless, it will be useful in the future projects.

[trisghosh]

@bodymovin,

Dont you think that your answer is no where relvant to my question. I have used your Plugin many times and loaded diifferent animations too. For your help I am pasting my question again, with an huge expectation of correct answer from Author himself. Thanks in advance :

Can I add bodimovin to many elements based on element ids. So I can add hover and out animation on indiviual element. Otherwise it work with all element on a single.

[bodymovin]

@trisghosh can you rephrase your question or give more info of what you need?

[fjcero]

Hey @bodymovin! Is this still possible? I have a json file exported and wanted to test quickly if names on layers are converted to IDs without success. I think having this is really cool, but kind of undocumented.

[bodymovin]

@fjcero Hi, yes this is still possible. Here is the documentation on how to use it. https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript Let me know if it is not working for you.

[fjcero]

@bodymovin Amazing! I didn’t checked the Wiki, not sure why I didn’t find it quickly. This is really cool, thanks for the link!

[AndroidDeveloperLB]

I tried to edit an SVG and put parts of it in different layers with the names as shown here: https://github.com/airbnb/lottie-web/issues/59#issuecomment-351250409

But for some reason converting to Lottie (JSON file) still didn't result in these names using this tool: https://lottiefiles.com/svg-to-lottie/convert

How come?

[arsbirdman]

@bodymovin I’m using feature with “#” for classes in development at the moment, everything’s working fine! Brilliant product, thank you

[amirfarzamnia]

@bodymovin Is this still working? I did whatever I could, but it didn't work.

[amirfarzamnia]

@bodymovin Is this still working? I did whatever I could, but it didn't work.

I have a simple lottie JSON animation like this:

{
  "v": "5.5.7",
  "meta": { "g": "LottieFiles AE 0.1.20", "a": "", "k": "", "d": "", "tc": "" },
  "fr": 30,
  "ip": 0,
  "op": 41,
  "w": 100,
  "h": 100,
  "nm": "Comp 1",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "#id-is-here",
      "sr": 1,
      "ks": {
        "o": {
          "a": 1,
          "k": [
            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 20, "s": [0] },
            { "t": 35, "s": [100] }
          ],
          "ix": 11
        },
        "r": { "a": 0, "k": 0, "ix": 10 },
        "p": {
          "a": 1,
          "k": [
            {
              "i": { "x": 0.667, "y": 1 },
              "o": { "x": 0.333, "y": 0 },
              "t": 20,
              "s": [64.9, 50, 0],
              "to": [0.552, 0, 0],
              "ti": [-0.552, 0, 0]
            },
            { "t": 35, "s": [68.215, 50, 0] }
          ],
          "ix": 2
        },
        "a": { "a": 0, "k": [-7.393, 0, 0], "ix": 1 },
        "s": {
          "a": 1,
          "k": [
            {
              "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
              "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
              "t": 20,
              "s": [85, 85, 100]
            },
            { "t": 35, "s": [100, 100, 100] }
          ],
          "ix": 6
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [-0.391, 0.387],
                    [-0.391, -0.387],
                    [0, -2.892],
                    [2.062, -2.045],
                    [0.391, 0.387],
                    [-0.391, 0.387],
                    [0, 2.366],
                    [1.687, 1.673]
                  ],
                  "o": [
                    [0.391, -0.387],
                    [2.062, 2.045],
                    [0, 2.892],
                    [-0.391, 0.387],
                    [-0.391, -0.387],
                    [1.687, -1.673],
                    [0, -2.366],
                    [-0.391, -0.387]
                  ],
                  "v": [
                    [-2.171, -7.71],
                    [-0.757, -7.71],
                    [2.464, 0],
                    [-0.757, 7.71],
                    [-2.171, 7.71],
                    [-2.171, 6.308],
                    [0.464, 0],
                    [-2.171, -6.308]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 1",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "fl",
              "c": { "a": 0, "k": [0, 0, 0, 1], "ix": 4 },
              "o": { "a": 0, "k": 100, "ix": 5 },
              "r": 1,
              "bm": 0,
              "nm": "Fill 1",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": { "a": 0, "k": [0, 0], "ix": 2 },
              "a": { "a": 0, "k": [0, 0], "ix": 1 },
              "s": { "a": 0, "k": [300, 300], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 6 },
              "o": { "a": 0, "k": 100, "ix": 7 },
              "sk": { "a": 0, "k": 0, "ix": 4 },
              "sa": { "a": 0, "k": 0, "ix": 5 },
              "nm": "Transform"
            }
          ],
          "nm": "Volume",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 41,
      "st": 0,
      "bm": 0
    },
    {
      "ddd": 0,
      "ind": 2,
      "ty": 4,
      "nm": "Wave 1",
      "sr": 1,
      "ks": {
        "o": {
          "a": 1,
          "k": [
            { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] },
            { "t": 15, "s": [100] }
          ],
          "ix": 11
        },
        "r": { "a": 0, "k": 0, "ix": 10 },
        "p": {
          "a": 1,
          "k": [
            {
              "i": { "x": 0.667, "y": 1 },
              "o": { "x": 0.333, "y": 0 },
              "t": 0,
              "s": [53.6, 49.985, 0],
              "to": [0.671, 0, 0],
              "ti": [-0.671, 0, 0]
            },
            { "t": 15, "s": [57.624, 49.985, 0] }
          ],
          "ix": 2
        },
        "a": { "a": 0, "k": [-5.196, 0, 0], "ix": 1 },
        "s": {
          "a": 1,
          "k": [
            {
              "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
              "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
              "t": 0,
              "s": [85, 85, 100]
            },
            { "t": 15, "s": [100, 100, 100] }
          ],
          "ix": 6
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [-0.391, 0.387],
                    [-0.391, -0.387],
                    [0, -1.577],
                    [1.125, -1.115],
                    [0.391, 0.387],
                    [-0.391, 0.387],
                    [0, 1.051],
                    [0.75, 0.744]
                  ],
                  "o": [
                    [0.391, -0.387],
                    [1.125, 1.115],
                    [0, 1.577],
                    [-0.391, 0.387],
                    [-0.391, -0.387],
                    [0.75, -0.744],
                    [0, -1.051],
                    [-0.391, -0.387]
                  ],
                  "v": [
                    [-1.439, -4.205],
                    [-0.025, -4.205],
                    [1.732, 0],
                    [-0.025, 4.205],
                    [-1.439, 4.205],
                    [-1.439, 2.803],
                    [-0.268, 0],
                    [-1.439, -2.803]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 1",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "fl",
              "c": { "a": 0, "k": [0, 0, 0, 1], "ix": 4 },
              "o": { "a": 0, "k": 100, "ix": 5 },
              "r": 1,
              "bm": 0,
              "nm": "Fill 1",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": { "a": 0, "k": [0, 0], "ix": 2 },
              "a": { "a": 0, "k": [0, 0], "ix": 1 },
              "s": { "a": 0, "k": [300, 300], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 6 },
              "o": { "a": 0, "k": 100, "ix": 7 },
              "sk": { "a": 0, "k": 0, "ix": 4 },
              "sa": { "a": 0, "k": 0, "ix": 5 },
              "nm": "Transform"
            }
          ],
          "nm": "Volume",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 41,
      "st": 0,
      "bm": 0
    },
    {
      "ddd": 0,
      "ind": 3,
      "ty": 4,
      "nm": "Volume",
      "sr": 1,
      "ks": {
        "o": { "a": 0, "k": 100, "ix": 11 },
        "r": { "a": 0, "k": 0, "ix": 10 },
        "p": { "a": 0, "k": [33.502, 49.792, 0], "ix": 2 },
        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [-0.346, -0.165],
                    [0, -0.381],
                    [0, 0],
                    [0.346, -0.165],
                    [0.3, 0.238],
                    [0, 0],
                    [0, 0],
                    [0, 0.548],
                    [0, 0],
                    [-0.552, 0],
                    [0, 0],
                    [0, 0]
                  ],
                  "o": [
                    [0.346, 0.165],
                    [0, 0],
                    [0, 0.381],
                    [-0.346, 0.165],
                    [0, 0],
                    [0, 0],
                    [-0.552, 0],
                    [0, 0],
                    [0, -0.548],
                    [0, 0],
                    [0, 0],
                    [0.3, -0.238]
                  ],
                  "v": [
                    [4.934, -7.833],
                    [5.501, -6.939],
                    [5.501, 6.939],
                    [4.934, 7.833],
                    [3.876, 7.713],
                    [-0.851, 3.965],
                    [-4.5, 3.965],
                    [-5.501, 2.974],
                    [-5.501, -2.974],
                    [-4.5, -3.965],
                    [-0.851, -3.965],
                    [3.876, -7.713]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 1",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ind": 1,
              "ty": "sh",
              "ix": 2,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [0, 0],
                    [0, 0],
                    [0.227, 0],
                    [0, 0],
                    [0, 0],
                    [0, 0],
                    [-0.177, -0.141],
                    [0, 0]
                  ],
                  "o": [
                    [0, 0],
                    [-0.177, 0.141],
                    [0, 0],
                    [0, 0],
                    [0, 0],
                    [0.227, 0],
                    [0, 0],
                    [0, 0]
                  ],
                  "v": [
                    [3.5, -4.877],
                    [0.125, -2.2],
                    [-0.5, -1.983],
                    [-3.5, -1.983],
                    [-3.5, 1.983],
                    [-0.5, 1.983],
                    [0.125, 2.2],
                    [3.5, 4.877]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "Path 2",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "mm",
              "mm": 1,
              "nm": "Merge Paths 1",
              "mn": "ADBE Vector Filter - Merge",
              "hd": false
            },
            {
              "ty": "fl",
              "c": { "a": 0, "k": [0, 0, 0, 1], "ix": 4 },
              "o": { "a": 0, "k": 100, "ix": 5 },
              "r": 1,
              "bm": 0,
              "nm": "Fill 1",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": { "a": 0, "k": [0, 0], "ix": 2 },
              "a": { "a": 0, "k": [0, 0], "ix": 1 },
              "s": { "a": 0, "k": [300, 300], "ix": 3 },
              "r": { "a": 0, "k": 0, "ix": 6 },
              "o": { "a": 0, "k": 100, "ix": 7 },
              "sk": { "a": 0, "k": 0, "ix": 4 },
              "sa": { "a": 0, "k": 0, "ix": 5 },
              "nm": "Transform"
            }
          ],
          "nm": "Volume",
          "np": 4,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 41,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

As you can see, in this Lottie animation, on line 17, there is an "nm" key, and its value starts with #, which I expected to give this element an ID after rendering in SVG, but it didn't work as expected. Here is the JavaScript code I've used for testing this:

import animationData from './simple-icon.json' with { type: 'json' };
import Lottie from 'lottie-web';

Lottie.loadAnimation({ container: document.getElementById('lottie-container'), loop: true, autoplay: true, animationData });

console.log(document.querySelector('#id-is-here'));