Hey all!
I have an animation in AE with a bunch of graph bars and charts. The percentage of the bars and charts need me to update later or update based on the situation. I did the animation with Shape Layer and Trim Path animating the End position.
The question is, how can I update the End value without going deep into the JSON file and finding all the values?
I id the layer with #id, but I can change it on the HTML side. I am no developer; I am trying to solve a client problem, so I tried AI help, and it didn’t work.
This is what I got so far; I can go to the .json file and change manually, but with 12 bars to update, it will be a lot of work for each animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottie Animation Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
</head>
<body>
<div id="lottie-animation" style="width: 400px; height: 400px; background-color: #ddd;"></div>
<button onclick="updateAnimation()">Update Animation</button>
<script>
let anim;
document.addEventListener("DOMContentLoaded", function() {
anim = lottie.loadAnimation({
container: document.getElementById('lottie-animation'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'comp1-test.json' // Path to Lottie file
});
});
function updateTrimPathEnd(barId, newEndValue) {
let elements = anim.renderer.elements;
for (let i = 0; i < elements.length; i++) {
if (elements[i].data.nm === barId) {
let barElement = elements[i];
let trimPaths = barElement.shapes[0].it.find(item => item.ty === "tm");
if (trimPaths && trimPaths.e.a === 1) {
trimPaths.e.k.forEach(keyframe => {
keyframe.s = [newEndValue];
});
anim.goToAndPlay(0);
break;
}
}
}
}
function updateAnimation() {
updateTrimPathEnd("eagle75", 10); // Update layer to %
}
</script>
</body>
</html>
Thank you so much in advance,
Gus