CODEWITHSUNDEEP
javascripthtmlcssanimation
Xavier
Xavier

Reputation: 117

animated loads in wrong spot

I have a div that animates up and down which works fine. The issue I'm getting is that every time the page loads the div starts at the very top of the page and then jumps down to where it needs to be after the animation starts.

<body id="body">
  <div id="square"></div>
</body>


#body {
  background: #000;
}

#square {
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  width: 100px;
  height: 100px;
  }

var box = document.getElementById('square');
TOP = (window.innerHeight - box.offsetHeight)/2;
box.style.top = TOP;

var down = setInterval(animateDown, 15);
    var up;

    function animateDown()
    {
        TOP += 3;
        box.style.top = TOP + 'px';
        if(TOP > 900){
            clearInterval(down);
            up = setInterval(animateUp, 15);
        }

    }

    function animateUp()
    {
        TOP -= 3;
        box.style.top = TOP + 'px';
        if(TOP <= (window.innerHeight - box.offsetHeight)/2){
            clearInterval(up);
            down = setInterval(animateDown, 15);
        }

    }

Here is a link to the jsfiddle as well >> https://jsfiddle.net/xgilmore/pLbgvc3L/

thanks in advance

Upvotes: 0

Views: 50

Answers (1)

Observer
Observer

Reputation: 463

This is sort of a work around, but you can start the box off as hidden, and then once you start animating, set it visible. https://jsfiddle.net/pLbgvc3L/1/

function animateDown()
    {
    box.style.visibility = 'visible';

#square {
  background-color: #fff;
  //margin: 0 auto;
  position: relative;
  width: 100px;
  height: 100px;
  top: 20%;
  visibility: hidden;
  }

Oh sorry, I actually know what is going on, it just took a second look to figure it out. top: 20% doesn't do anything because percentages only work if the parent element (body) has an explicit height. Like so https://jsfiddle.net/pLbgvc3L/2/

Upvotes: 1

Related Questions