Menu

Timeline

Timelines are the perfect sequencing tool for all your animations.
You can group multiple tweens together and control them as a single unit.

You can write .add() or directly .from() .to() .fromTo() and .set()

Simple example

Timelines can animate multiple elements one after the other, or at the same time.


const tl = animatry.timeline();


tl.to('.red', {
  x: '250px',
  rotate: 90
});


tl.to('.blue', {
  y: '-100px',
});


tl.to('.red', {
  y: '100px',
}, '<'); // start with previous


tl.to('.blue', {
  x: '100%',
  rotate: 90
});

Same element example

You can also use the same element and change different properties step by step.


animatry.timeline({
  repeat: -1,
  alternate: true,
})


.to('.red', {
  x: '100%',
  rotate: '1turn',
})


.to('.red', {
  y: 100,
  duration: 0.5,
}, '<')

Complex sequencing example

In this example you can see what's possible: sequencing, labels, easing, overlapping motion.


animatry.timeline({
  repeat: -1
})


.to('.red', {
  x: 250,
  rotate: 360,
  duration: 2,
  ease: 'powerInOut(2)',
}, 0)


.label('midpoint', '<.5')


.to('.blue', {
  scale: 1.5,
  y: -100,
  duration: 1.2,
  ease: 'bounceOut',
}, 'midpoint')


.to('.green', {
  x: 125,
  y: -50,
  rotate: -180,
  duration: 1.5,
  ease: 'backInOut',
}, 'midpoint+=.25')


.label('reset', '+=0.5')


.to('.red', {
  x: 0,
  rotate: 0,
  duration: 1,
}, 'reset')


.to('.blue', {
  y: 0,
  scale: 1,
  duration: 1,
}, '<')


.to('.green', {
  x: 0,
  y: 0,
  rotate: 0,
  duration: 1,
}, '<')