javascripthtmlcssgoogle-web-designer

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, this.max)">

.img_1 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

.img_2 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

This slider, if moved right of slider value(higher 25) should remove blur and set opacity to 1. If moved left of slider value(lower 25) then vice versa occurs. Here is the current code I have to do this:

function getInput(value, max) {
  var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = (value / 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)")
  }
}

This code works flawlessly. However, for whatever reason, the opacity will not change. IDK if it is because the opacity is set in stone when working within GWD. If you console.log(img_1.style.opacity = 1 - sliderPercentage) you will see the math on the code works.. it just isn't adjusting the opacity.

Any suggestions and ideas would greatly be appreciated. It also should be noted, when I do NOT run the setBlur function then the setOpacity function works. It just does not work when I am running setBlur.


Solution

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