Css3/Js Get Position of Element During Animation

JS Get Current Position of Animated Element

You can use window.requestAnimationFrame:

  var moving = false,
      el = document.getElementById("mover");
  el.className = el.className + " move-right";
  el.addEventListener('transitionend', function () {
    moving = true;
  });

  function getPosition() {
    var rect = el.getBoundingClientRect()
    console.log(rect.top, rect.left);
    if (!moving) {
      window.requestAnimationFrame(getPosition);
    }
  }
  window.requestAnimationFrame(getPosition);

http://jsfiddle.net/ob7kgmbk/1/

CSS3/JS get position of element during animation

Edit

"I'm not using .animate for simple animations since css3. – Kluska000"

Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.

See also window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Try (see console at jsfiddle, linked below)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

See http://api.jquery.com/animate/ at start , step , progress

How to get the position of an element after css animation (vanilla js)

You should register an animationend event listener on your element:

svgEl.addEventListener('animationend', function (event) {
    const svgRect = this.getBoundingClientRect();
});

This fires whenever a CSS animation has finished on your element and is the surefire way to know that it has completed. Also note you make be able to make use of animationstart, animationiteration, and animationcancel events.

CSS3/JS get position of element during animation

Edit

"I'm not using .animate for simple animations since css3. – Kluska000"

Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.

See also window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Try (see console at jsfiddle, linked below)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

See http://api.jquery.com/animate/ at start , step , progress

How to catch current css translate() position in javascript

I think you need to call element.getBoundingClientRect()

let circle = document.querySelector(".animate");
let style = window.getComputedStyle(circle);

setInterval(() => {
  let rect = circle.getBoundingClientRect();
  console.log(rect.left)
}, 1000)

div {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background: blue;
}

.animate {
  animation: animate;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes animate {
  from {
    transform: translate(0)
  }
  to {
    transform: translate(calc(100vw - 120px))
  }
}

<div class="animate"> </div>

JS get element position after animation interrupt

this happens because css() actually uses javascript's getcomputedstyle() function and it always returns in pixels.

you can achieve what you want like this:

var left=(100 / $(window).width()) * parseInt(slide.css('left').split('px')[0]) + '%';

the above code returns a value in percentage DEMO

Animate element to its new position in DOM

Animate element to its new position

To animate an element to its new position follow this simple steps:

1. Calculate the current X, Y position of the element relative to the parent
2. Hide the other elements with display: none
3. Since the element has a new position now that the other elements are gone - snap (move) it immediately back where it was using CSS translate: transform(x, y) to the old X and Y.
4. Animate with CSS transition to 0, 0 translate: transform(0, 0), which is the position this element actually occupies after the other elements were hided from the view.

Here's an example of the above list with an extra step to first fade-out the other elements before hiding them, and only than - animate the element:

const animateCards = (card) => {
  const fxHide = `display: none;`;
  const fxFade = `transition: opacity 0.3s; opacity: 0;`;
  const fxMove = `transform: translate(${card.offsetLeft}px, ${card.offsetTop}px);`;
  const fxAnim = `transition: transform 0.5s; transform: translate(0, 0);`;
  let other; // Just to catch a sibling element as reference

  cards.forEach(el => {
    if (el === card) return;
    if (!other) other = el;
    el.addEventListener("transitionend", () => el.style.cssText += fxHide, {once: true});
    el.style.cssText += fxFade;
  });

  other.addEventListener("transitionend", () => {
    card.style.cssText += fxMove;
    setTimeout(() => card.style.cssText += fxAnim, 0);
  }, {once: true});
};

const cards = document.querySelectorAll(".card");
cards.forEach(el => el.addEventListener('click', () => animateCards(el)));

.cards {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 50px;
  position: relative;
}

.card {
  height: 100%;
  position: relative;
  cursor: pointer;
}

<div class="cards">
  <div class="card" style="background-color:#0bf;">1</div>
  <div class="card" style="background-color:#f0b;">2</div>
  <div class="card" style="background-color:#bf0;">3</div>
</div>

---

Related Topics