Hyperlinking Lottie SVG

Lottie in Web
1

Is there anyway I can programmatically add a link to a Lottie file SVG tag?
Any way to bind multiple URLs to multiple tags in the same Lottie animation?

Need to add links to each of the circle shapes in this .json SVG:

[Album] Imgur
1 Like
2

Yes. In After Effects, either:

  • Add a class name to the layer/object by appending text like " .link" or similar to the layer/object name
  • Add an ID to the layer/object by appending text like “#circle1” or similar to the layer/object name

Then generate the Lottie output and render using the SVG renderer. You can query and locate the element at runtime using document.querySelector("#circle") or similar and programmatically respond to clicks and mouse events for those elements.

You can see a demo at: https://codesandbox.io/s/lottie-dom-handlers-qjos4

1 Like