Lottie-web: Unable to edit animation values

[kayson]

I am trying to create an animation where the user can choose different scenarios of the animation that should animate at the same time. And since everything is very dynamic (12 different choices that can be combined in any way), I figured maybe hiding the not activated ones and just looping through the animation part (playSegment) would work?

So I try to hide the base background layer. If I go into the .json file and change the value for ks.o.k the background is then less opacity at runtime. And then in the code I simply made a button and when clicked I run a line of javascript.

anim.layers[7].ks.o.k = 10;

But nothing happends. So after doing tests where I console.log that value before and after it actually get changed. But the animation isn't.

Is it something I am missing? And / or is there a better solution to what I want to do, (have thought of making them transparent and having 12 different animations on top of each others but feels like an extremely waste of performance).

EDIT:

This is my setup:

var animData = {
        container: document.getElementById('bodymovin'),
        renderer: 'svg',
        loop: true,
        prerender: false,
                autoplay: false,
                autoloadSegments: false,        
        path: './test6.json'
    };
var anim = bodymovin.loadAnimation(animData);

[bodymovin]

Hi, you can control layers of the animation using css. If you want to simply hide or show specific layers, you can name them in After Effects with a dot or a hash in the beginning and then reference them with classes.
The reason why after loading an animation, it doesn't change when modifying the value, is because static non keyframed values are never revisited once the animation is created.
If you want more control over values, you can set two keyframes one at the beginning and one at the end of the animation.
That way, if you modify them during playback, they will update the animation.
Not all properties will work exactly the same, but it should work for most of them.
Let me know if you need more clarification on this.

[kayson]

Thanks for the answer. But I already made it with creating multiple divs with multiple animation layers to them like this:

$.each(funcs, function(index, func) {
        $('#right').append('<div id="bodymovin'+index+'" style="position: absolute;bottom: 0;height: 95%;"></div>');

        var animData = {
            container: document.getElementById('bodymovin'+index+''),
            renderer: 'svg',
            loop: false,
            autoplay: false,
            path: './anims/'+func[0]+'-'+func[1]+'.json'
        };

        anims.push(bodymovin.loadAnimation(animData));
    });

Then I simply bind a button to play all the animations in the array.