I am trying to load multiple JSON / Lottie animation in one page but different element. Since I'm clueless about Javascript, I can't get it to work.
I already have working code for loading single JSON, and I am trying to duplicate and modify by adding another JSON.
var logoSvgData =
// Here's JSON Bodymovin code for logo
;
const animation = bodymovin.loadAnimation({
container: document.getElementById('logo'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: logoSvgData
})
var introSvgData =
// Here's JSON Bodymovin JSON Bodymovin code for intro
;
const animation = bodymovin.loadAnimation({
container: document.getElementById('intro'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: introSvgData
})
I know I am doing it wrong, the animation didn't load at all.
Here's the original code that works for single JSON.
var logoSvgData =
{"assets":[{"id":"13","layers":[{"ind":12,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[4.5,18.5]},"r":{"a":0,"k":0},"s":{"a":0,"k":[9,37]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,27.27],[0,0],[6.31,0],[6.31,2.09],[2.39,2.09],[2.39,25.18],[6.31,25.18],[6.31,27.27]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"18","layers":[{"ind":17,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[4.5,18.5]},"r":{"a":0,"k":0},"s":{"a":0,"k":[9,37]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[6.75,27.27],[6.75,0],[0.44,0],[0.44,2.09],[4.36,2.09],[4.36,25.18],[0.44,25.18],[0.44,27.27]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"21","layers":[{"ind":15,"ty":0,"parent":11,"ks":{},"w":9,"h":37,"ip":0,"op":121,"st":0,"refId":"13"},{"ind":11,"ty":3,"parent":10,"ks":{"p":{"a":1,"k":[{"t":0,"s":[0,0],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":60,"s":[0,0],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":120,"s":[-79,0],"h":1}]}},"ip":0,"op":121,"st":0},{"ind":20,"ty":0,"parent":16,"ks":{},"w":9,"h":37,"ip":0,"op":121,"st":0,"refId":"18"},{"ind":16,"ty":3,"parent":10,"ks":{"p":{"a":1,"k":[{"t":0,"s":[19,0],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":60,"s":[19,0],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":120,"s":[97,0],"h":1}]}},"ip":0,"op":121,"st":0},{"ind":10,"ty":3,"parent":9,"ks":{"a":{"a":0,"k":[14,18.5]},"p":{"a":0,"k":[93,18.5]}},"ip":0,"op":121,"st":0},{"ind":9,"ty":3,"ks":{"p":{"a":0,"k":[79,0]}},"ip":0,"op":121,"st":0}]},{"id":"6","layers":[{"ind":5,"ty":4,"parent":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[96,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[192,100]}},{"ty":"fl","c":{"a":0,"k":[1,1,1]},"o":{"a":0,"k":100}}]},{"ind":4,"ty":3,"parent":3,"ks":{"a":{"a":0,"k":[96,50]},"p":{"a":0,"k":[93,18]}},"ip":0,"op":121,"st":0},{"ind":3,"ty":3,"ks":{"p":{"a":0,"k":[3,32]}},"ip":0,"op":121,"st":0}]},{"id":"34","layers":[{"ind":33,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[9,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[18,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0,22.12],[0,0.3],[13.08,0.3],[13.08,2.64],[2.64,2.64],[2.64,10.02],[12.1,10.02],[12.1,12.36],[2.64,12.36],[2.64,22.12]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"39","layers":[{"ind":38,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[11,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[22,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.09,-0.58],[-0.52,-1.01],[0,-1.29],[0.53,-0.99],[1.09,-0.57],[1.69,0],[0,0],[0,0],[0,0],[-0.71,0.34],[-0.32,0.63],[0,0.88],[0.33,0.65],[0.72,0.36],[1.18,0],[0,0],[0,0]],"o":[[0,0],[0,0],[1.7,0],[1.09,0.57],[0.53,1.01],[0,1.29],[-0.52,1],[-1.09,0.56],[0,0],[0,0],[0,0],[1.16,0],[0.71,-0.34],[0.33,-0.63],[0,-0.87],[-0.33,-0.66],[-0.72,-0.36],[0,0],[0,0],[0,0]],"v":[[0.36,22.12],[0.36,0.3],[7.73,0.3],[11.93,1.17],[14.36,3.55],[15.14,6.99],[14.36,10.41],[11.94,12.75],[7.77,13.59],[1.8,13.59],[1.8,11.21],[7.69,11.21],[10.5,10.7],[12.05,9.25],[12.55,6.99],[12.05,4.7],[10.49,3.18],[7.64,2.64],[3,2.64],[3,22.12]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[10.63,12.32],[16,22.12],[12.93,22.12],[7.64,12.32]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"44","layers":[{"ind":43,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[13,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[26,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[3.19,22.12],[0.42,22.12],[8.43,0.3],[11.16,0.3],[19.17,22.12],[16.4,22.12],[9.88,3.75],[9.71,3.75]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[4.21,13.59],[15.38,13.59],[15.38,15.94],[4.21,15.94]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"49","layers":[{"ind":48,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[14.5,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[29,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.07,0.3],[3.22,0.3],[10.64,18.41],[10.89,18.41],[18.31,0.3],[21.46,0.3],[21.46,22.12],[18.99,22.12],[18.99,5.54],[18.78,5.54],[11.96,22.12],[9.57,22.12],[2.75,5.54],[2.54,5.54],[2.54,22.12],[0.07,22.12]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"54","layers":[{"ind":53,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[9.5,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[19,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.51,22.12],[0.51,0.3],[13.68,0.3],[13.68,2.64],[3.15,2.64],[3.15,10.02],[13,10.02],[13,12.36],[3.15,12.36],[3.15,19.77],[13.85,19.77],[13.85,22.12]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"59","layers":[{"ind":58,"ty":4,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":0,"k":[11,15]},"r":{"a":0,"k":0},"s":{"a":0,"k":[22,30]}},{"ty":"fl","c":{"a":0,"k":[0,0,0,0]},"o":{"a":0,"k":0}}]},{"ind":0,"ty":4,"ks":{"s":{"a":0,"k":[133.33,133.33]}},"ip":0,"op":121,"st":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.91,0.6],[1.32,0],[0.73,-0.31],[0.4,-0.55],[0,-0.7],[-0.28,-0.42],[-0.44,-0.28],[-0.48,-0.18],[-0.41,-0.11],[0,0],[-0.7,-0.26],[-0.64,-0.45],[-0.42,-0.7],[0,-1.02],[0.62,-0.95],[1.18,-0.56],[1.68,0],[1.14,0.5],[0.66,0.9],[0.08,1.19],[0,0],[-0.48,-0.54],[-0.75,-0.26],[-0.87,0],[-0.8,0.32],[-0.47,0.59],[0,0.79],[0.41,0.45],[0.66,0.29],[0.77,0.21],[0,0],[1,0.91],[0,1.47],[-0.66,0.91],[-1.12,0.5],[-1.39,0],[-1.09,-0.5],[-0.64,-0.87],[-0.04,-1.1]],"o":[[-0.13,-1.08],[-0.91,-0.6],[-0.96,0],[-0.71,0.31],[-0.4,0.55],[0,0.58],[0.29,0.41],[0.44,0.27],[0.48,0.17],[0,0],[0.57,0.15],[0.7,0.27],[0.64,0.45],[0.42,0.7],[0,1.18],[-0.61,0.95],[-1.17,0.56],[-1.56,0],[-1.14,-0.5],[-0.64,-0.9],[0,0],[0.07,0.82],[0.49,0.54],[0.75,0.25],[1.01,0],[0.8,-0.34],[0.47,-0.6],[0,-0.73],[-0.41,-0.46],[-0.66,-0.29],[0,0],[-1.7,-0.49],[-0.99,-0.91],[0,-1.22],[0.67,-0.92],[1.13,-0.51],[1.41,0],[1.09,0.5],[0.64,0.87],[0,0]],"v":[[13.12,5.75],[11.57,3.24],[8.22,2.34],[5.68,2.81],[4,4.1],[3.41,5.96],[3.82,7.47],[4.91,8.5],[6.29,9.17],[7.63,9.59],[9.84,10.18],[11.73,10.8],[13.75,11.88],[15.35,13.61],[15.98,16.19],[15.05,19.39],[12.36,21.66],[8.09,22.5],[4.04,21.74],[1.35,19.63],[0.25,16.49],[2.98,16.49],[3.81,18.54],[5.66,19.73],[8.09,20.11],[10.81,19.63],[12.71,18.24],[13.42,16.15],[12.81,14.38],[11.21,13.27],[9.07,12.53],[6.39,11.76],[2.34,9.66],[0.85,6.09],[1.84,2.9],[4.52,0.77],[8.3,0],[12.05,0.76],[14.66,2.8],[15.68,5.75]]}}},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100}},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]},{"id":"62","layers":[{"ind":36,"ty":0,"parent":32,"ks":{},"w":18,"h":30,"ip":0,"op":121,"st":0,"refId":"34"},{"ind":32,"ty":3,"parent":31,"ks":{},"ip":0,"op":121,"st":0},{"ind":41,"ty":0,"parent":37,"ks":{},"w":22,"h":30,"ip":0,"op":121,"st":0,"refId":"39"},{"ind":37,"ty":3,"parent":31,"ks":{"p":{"a":0,"k":[23,0]}},"ip":0,"op":121,"st":0},{"ind":46,"ty":0,"parent":42,"ks":{},"w":26,"h":30,"ip":0,"op":121,"st":0,"refId":"44"},{"ind":42,"ty":3,"parent":31,"ks":{"p":{"a":0,"k":[46,0]}},"ip":0,"op":121,"st":0},{"ind":51,"ty":0,"parent":47,"ks":{},"w":29,"h":30,"ip":0,"op":121,"st":0,"refId":"49"},{"ind":47,"ty":3,"parent":31,"ks":{"p":{"a":0,"k":[76,0]}},"ip":0,"op":121,"st":0},{"ind":56,"ty":0,"parent":52,"ks":{},"w":19,"h":30,"ip":0,"op":121,"st":0,"refId":"54"},{"ind":52,"ty":3,"parent":31,"ks":{"p":{"a":0,"k":[111,0]}},"ip":0,"op":121,"st":0},{"ind":61,"ty":0,"parent":57,"ks":{},"w":22,"h":30,"ip":0,"op":121,"st":0,"refId":"59"},{"ind":57,"ty":3,"parent":31,"ks":{"p":{"a":0,"k":[134,0]}},"ip":0,"op":121,"st":0},{"ind":31,"ty":3,"ks":{"a":{"a":0,"k":[77.651,15]},"p":{"a":0,"k":[92.651,18]}},"ip":0,"op":121,"st":0}]},{"id":"28","layers":[{"ind":27,"ty":4,"parent":26,"ks":{},"ip":0,"op":121,"st":0,"shapes":[{"ty":"rc","p":{"a":1,"k":[{"t":0,"s":[0,21],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":60,"s":[0,21],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":120,"s":[79,21],"h":1}]},"r":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[0,42],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":60,"s":[0,42],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":120,"s":[158,42],"h":1}]}},{"ty":"fl","c":{"a":0,"k":[1,1,1]},"o":{"a":0,"k":100}}]},{"ind":26,"ty":3,"parent":25,"ks":{"a":{"a":1,"k":[{"t":0,"s":[0,21],"i":{"x":[1,1],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":60,"s":[0,21],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":120,"s":[79,21],"h":1}]},"p":{"a":0,"k":[93,18]}},"ip":0,"op":121,"st":0},{"ind":25,"ty":3,"ks":{"p":{"a":0,"k":[79,3]}},"ip":0,"op":121,"st":0}]}],"fr":60,"h":36,"ip":0,"layers":[{"ind":23,"ty":0,"td":1,"parent":2,"ks":{"a":{"a":0,"k":[79,0]}},"w":264,"h":37,"ip":0,"op":121,"st":0,"refId":"21"},{"ind":8,"ty":0,"tt":1,"parent":2,"ks":{"a":{"a":0,"k":[3,32]}},"w":195,"h":132,"ip":0,"op":121,"st":0,"refId":"6"},{"ind":2,"ty":3,"parent":1,"ks":{},"ip":0,"op":121,"st":0},{"ind":64,"ty":0,"td":1,"parent":24,"ks":{},"w":171,"h":33,"ip":0,"op":121,"st":0,"refId":"62"},{"ind":30,"ty":0,"tt":1,"parent":24,"ks":{"a":{"a":0,"k":[79,3]}},"w":330,"h":45,"ip":0,"op":121,"st":0,"refId":"28"},{"ind":24,"ty":3,"parent":1,"ks":{},"ip":0,"op":121,"st":0},{"ind":1,"ty":3,"parent":0,"ks":{},"ip":0,"op":121,"st":0},{"ind":0,"ty":3,"ks":{},"ip":0,"op":121,"st":0}],"meta":{"g":""},"op":120,"v":"5.7.4","w":185}
;
const animation = bodymovin.loadAnimation({
container: document.getElementById('logo'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: logoSvgData
})body {
background:black;
}
#logo {
width: 100px;
height: auto;
margin: 0 auto;
}<script src=".5.3/lottie.js"></script>
<body>
<div id="logo"></div>
</body>