Update property with JS

[Gusfavoreto]

Hey all!

I have an animation in AE 2024 with a bunch of graph bars and charts (made with Shape Layer and using Trim Path to animate them). 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 (0% to 100%).
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 (#eagle75), but I can't change it on the HTML side. I am no developer; I am trying to give a client an easy-to-work file.

This is what I have 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.

The animation loads, but when I try to change the value via JS, it doesn't change anything.

Thank you so much,
Gus

`

<title>Lottie Animation Test</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>

Update Animation

<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>

`

[lxrcan]

The question is, how can I update the End value without going deep into the JSON file and finding all the values?

honeslty hard to say why its not working. some samples would be nice, a lottie file or the html file i can inspect...

would it be easier just to have a single bar animation going from 0 to 100 and then you drive the animation to the desired playback point for your percent. then you just have mulitple lottie assts...

Calculate the Target Frame: Determine the frame number that corresponds to the desired percentage of the animation's total frames. Lottie animations are frame-based, and you can get the total number of frames from the animation data.

Seek to the Target Frame: Use Lottie's goToAndStop method to move the animation to the target frame without playing the animation. This method allows you to specify the frame number and whether the animation should be stopped at that frame.

Here's an example function that implements these steps:

function goToPercentage(anim, percentage) {
    // set percentage is between 0 and 100
    const clampedPercentage = Math.max(0, Math.min(100, percentage));
    
    // find the target frame based on the desired percentage
    const totalFrames = anim.totalFrames;
    const targetFrame = (totalFrames * clampedPercentage) / 100;
    
    // go to the target frame and stop
    anim.goToAndStop(targetFrame, true);
}

Ive spent the last weeks building myself a set of tools to be able to find and replace specific properties related to a project we are using lotties on, i didnt know i could access the lottie this way from inside the anim.renderer! aweomse, i was just modifying a copy of the json data and then restarting the animation with the new data... looking into this will definately be useful to me.