Define length of the animating line via javascript

Question

Here is a simple code to animate and draw a simple line.

The length or width of the line is defined here:

 @-webkit-keyframes navShow {
    from { opacity: 1; width: 0vw; }
    to   { opacity: 0.5; width: 29vw;} /* Final length would be 29vw */
 }

The problem is I'm wondering what if we want to define the line's length via javascript!

How to pass javascript length variable to CSS and change width: 29vw;

Note: The CSS animation should be intact and I need the viewport units like vw...

let navBar = document.getElementById("navBar");


navBar.classList.add("navBarShow");

// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule)
    {
        // gather all stylesheets into an array
        var ss = document.styleSheets;
        
        // loop through the stylesheets
        for (var i = 0; i < ss.length; ++i) {
            
            // loop through all the rules
            for (var j = 0; j < ss[i].cssRules.length; ++j) {
                
                // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
                if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
                    return ss[i].cssRules[j];
            }
        }
        
        // rule not found
        return null;
    }

// remove old keyframes and add new ones
function change(anim)
    {
        // find our -webkit-keyframe rule
        var keyframes = findKeyframesRule(anim);
        
        // remove the existing 0% and 100% rules
        keyframes.deleteRule("0%");
        keyframes.deleteRule("100%");
        
        // create new 0% and 100% rules 
        keyframes.appendRule("0% { opacity: 1; width: 0vw;  }");
        keyframes.appendRule("100% {opacity: 0.5; width: 60vw; }");
        
        // assign the animation to our element (which will cause the animation to run)
        navBar.style.webkitAnimationName = anim;
    }

// begin the new animation process
function startChange()
    {
        // remove the old animation from our object
        navBar.style.webkitAnimationName = "none";
        
        // call the change method, which will update the keyframe animation
        setTimeout(function(){change("navShow");}, 0);
    }

startChange();

#navBar {
  position: absolute;
  width: 0vw;
  border-bottom:  1vh solid rgba(204,193,218);
  left: 10.2vw;
  top: 77vh;
  opacity: 0;
}

.navBarShow {
    animation: navShow 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes navShow {
  0%{ opacity: 1; width: 0vw; }
  100%{ opacity: 0.5; width: 29vw;}
}

<div id="navBar"></div>

Or use a CSS Custom Property (CSS Variables) - https://codepen.io/Paulie-D/pen/wvBaXvo — Paulie_D, Dec 05 '19 at 17:26
The codes in that answer you've provided doesn't work too... — Sara Ree, Dec 05 '19 at 17:55
Just reading the error message, it looks like you need to check if the 0% and 100% rules exist before trying to remove them. - first time through they don't exist. — TCooper, Dec 05 '19 at 17:56

score 0 · Answer 1 · answered Dec 05 '19 at 18:24

let navBar = document.getElementById("navBar");

navBar.classList.add("navBarShow");

setTimeout(function(){
navBar.animate([
  // keyframes
  { width: '29vw' }, 
  { width: '60vw' }
], { 
  // timing options
  duration: 500,
  iterations: 1,
  easing: 'cubic-bezier(.75,-0.5,0,1.75)',
  fill: "forwards"
});
  
  }, 3000)

#navBar {
  position: absolute;
  width: 0vw;
  border-bottom:  1vh solid rgba(204,193,218);
  left: 10.2vw;
  top: 77vh;
  opacity: 0;
}

.navBarShow {
    animation: navShow 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);  
    animation-fill-mode: forwards ;
}

@-webkit-keyframes navShow {
  0%{ opacity: 1; width: 0vw; }
  100%{ opacity: 0.5; width: 29vw;}
}

<div id="navBar"></div>

Define length of the animating line via javascript

1 Answers1