CodePen Embed - tween-animate example

<div class="zone"></div>
<script src="https://unpkg.com/tween-animate@3.1.0/dist/tween-animate.umd.js"></script>

.zone {
  position: absolute;
  left: 0px;
  top: 0px;
  width:100px;
  height:100px;
  background-color: black;
}

const [zone] = document.getElementsByClassName('zone');

Animate.play();
const { Easing } = Animate;
const animate = Animate({
  x: 100,
  y: (v) => v + 100,
}, {
  time: 2000,
  easing:Easing.Quadratic.In,
  isAssign: false,
}).transform('yoyo').transform('loop',Infinity).on('update', e => console.log(e));
setTimeout(()=> {
  animate.apply({
  x: 0,
  y: 0
}).on('update', ({x, y})=> {
  zone.style.left = `${x}px`;
  zone.style.top = `${x}px`;
});
});

This Pen is owned by voderl on CodePen.

See more by @voderl on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.