Google Web Designer Dynamically Adjust Opacity In Source Code

Right now I currently have a slider and two images on my Google ad input class='gwd-input-13xh' type='range' min='0' max='50' value='25' id='slider' oninput='getInput(this.value, t

Solution 1:

Not familiar with GWD either, but I assume the problem is you are re-assigning the whole style attribute, so later alteration overrides the former. Replacing ele.setAttribute("style", "...") with

ele.style["-webkit-filter"] = "blur(" + value + "px)";

should fix your issue.

Solution 2:

I'm not familiar with GWD but I tried it (with some minor changes):

 $("#slider").change(function(){
    var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = ($(this).val() / $(this).attr('max')).toFixed(2);
  img_1.style.opacity = 1 - sliderPercentage

setBlur(img_1, (10 * sliderPercentage).toFixed(2));
  img_2.style.opacity = sliderPercentage;
  setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));

});

function setBlur(ele, value) {
  if (ele.style.hasOwnProperty('filter')) {
    ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
  }
}

and I think it behaves as expected.

Please check full solution at:

https://jsfiddle.net/1eumfwoh/