Tween

The Tween class represents a single animation applied to one or more elements.
It is the core concept of Animatry for property transitions over time.

You can create tweens using animatry.to(), from(), fromTo() or set().

Simple Example

This example animates horizontal movement and rotation.

animatry.to('.box', {
  x: '250px',
  rotate: 90
})

Advanced Example

In this example you can see how tweens handle various types of values, colors, repeats and easing.

animatry.to('.box', {
  x: 250,
  rotate: '0.5turn',
  borderColor: 'cyan',
  scale: 0.75,
  repeat: -1,
  alternate: true,
  duration: 2,
})

from / fromTo / set

Tweens can also define a start state using from() or both with fromTo().
The set() method changes values instantly without animation.

animatry.from('.box', {
  scale: 0,
  opacity: 0,
  duration: 1
});

animatry.fromTo('.box', {
  x: 200
}, {
  x: 0,
  duration: 1
});

animatry.set('.box', {
  rotate: 0
});