I have this SVG header that, on screen scroll, its parts move differently. For this, I am using a script like the following:

let menu = document.getElementById('main-menu');
let lua = document.getElementById('lua');
            
    window.addEventListener('scroll', function(){
        let value = window.scrollY;
        menu.style.marginTop = value * 0.45 + 'px'; // working just fine
        lua.style.transform = "translateY(" + value * 0.25 + ")"; // don't know how to make this work

OBS: I need to use the transform: translate because this SVG element, for some reason, can't be moved with margin or top/left, only translate.

The menu.style work just fine, but on the lua.style case I'm struggling cause I don't know how to write on the JS a CSS such as transform: translateY that merges a child property (translate) inside another property (transform).

I've tried to write the lua.style.transform = "translateY(" + value * 0.25 + ")"; in many different ways, like:

lua.style.transform = value + "translateY(" * 0.25 + ")";
// or
lua.style.translate = value * 0.45 + 'px';
// or
lua.style.translate = value * 0.45;
// or
lua.style.translate = (0,value * 0.45);

but still can't make it work. How can I write it correctly?