import { animate } from 'unanime';

const animate = require('unanime');

import { animate } from 'unanime';

const myAnimation = animate(
  '.targets', 
  [
    {transform: 'translateX(100px)'}
  ],
  {
    duration: 1500,
    direction: 'alternate',
    iterations: 3, 
    autoplay: true
  }
)

cont var = animate(
  // Targets,
  [
    // Keyframes
  ],
  { 
    // Options
  }
)

// Targets
'.myTargets' // Under the hood, document.querySelectorAll is used

// Keyframes
[
  {transform: 'translate3d(0, 0, 0)', backgroundColor: 'red'},
  {transform: 'translate3d(0, 100px, 0)', backgroundColor: 'green'},
]

// Options
{
  duration: () => Math.floor(Math.random() * 10000); // 5683
}

const anotherTarget = document.querySelector('#anotherTarget');

// Inject in var for timeline usage
const myAnimation = animate( 

  // Targets (string, object or array)
  ['.targets', anotherTarget], 

  // Keyframes (array)
  [
    {transform: 'translate3d(0, 0, 0)', backgroundColor: 'red'},
    {transform: 'translate3d(0, 100px, 0)', backgroundColor: 'green'},
  ],

  // Options (object)
  {
    duration: 1000, 
    // animation's duration in ms (number, object) | default: 1000
    direction: 'normal', 
    // 'normal', 'reverse', 'alternate' (string) | default: 'normal'
    easing: 'easeOutBack', 
    // easings.net accepted, basic css or cubic-bezier (string) | default: 'linear'
    delay: 200, 
    // delay before animation start (number, object) | default: 0
    endDelay: 0, 
    // delay after animation finished (number, object) | default: 0
    iterations: 3, 
    // times the animation is executed (positive number or Infinity) | default: 1
    iterationStart: 1.2, 
    // select at which iteration animation start (number) | default: 0
    fill: 'both', 
    // apply the style to your targets 'none', 'auto', 'backwards', 'forwards', 'both' (string) | default: 'both'
    composite: 'replace', 
    // choose how each keyframe impact the style, 'replace', 'add', 'accumulate' | default: 'replace'
    playbackRate: 1, 
    // choose the speed of your animation without changing duration (+ / - number) | default: 1
    autoplay: false, 
    // start animation when ready (boolean) | default: false
    initStyles: true,
    // option that apply css style (first keyframes) to the target | default: false
    commitStyles: false, 
    // option that apply css style to targets after animation finished | default: false
    autocancel: false, 
    // remove animation from browser at the end | default: false
    willChange: false, 
    // add and remove automatically a 'will-change: transform' to your target during animation | default: false
  }
)

myAnimation.play();

// Options
{ autoplay: true }

// Method
myAnimation.play();

// Timeline
const tl = timeline(
  [
    {animate: myAnimation}
  ] 
)
tl.play();

myAnimation.play();

setTimeout(() => {
  myAnimation.pause();
}, 2500);

myAnimation.getPlayState();
// 'running'

myAnimation.setDirection('alternate');

myAnimation.onready(() => {
  console.log('Ready to play !');
});

// Options
{delay: {stagger: 100, from: 'center', direction: 'normal'}}

// Options
{ yourOption: {
    default: 0, // initial value of your option added to stagger | default: option's default
    stagger: 100, // amount that will be multiplied by array index (number) | default: 0
    from: 3, // choose the starting point of your stagger propagation (string, number, array) | default: 'start'
    direction: 'reverse' // select the way stagger in computed (string) | default: 'normal'
  }
}

'start', 'center', 'end' // select one mode
or
10 // select array index(+1)
or
[2, 7, 13] // select multiple starting points

'normal' // default
or
'reverse'

// Options
{
  delay: {stagger: 200},
  duration: {default: 2500, stagger: 100},
  iterations: {default: 4, stagger: 0.05},
  iterationStart: {default: 1, stagger: 0.02},
  playbackRate: {default: 1, stagger: 0.05},
  ...
}

// Options
{
  easing: ['easeInCirc', null, 'ease-out', 'cubic-bezier(.17,.67,.83,.67)'] 
  // if null, get previous easing
}

import { animate, timeline } from 'unanime';

const tl = timeline(
  // Animations list
  [
    { animate: myAnimation1},
    { animate: myAnimation2, start: '<+800'},
  ],
  // Timeline options
  {autoplay: false, iterations: Infinity, direction: 'alternate'}
)

tl.play();

{animate: myAnimation1, start: '+200'}, // +200ms from the relative start
{animate: myAnimation2, start: '-600'},
{animate: myAnimation3, start: '<'}, // start with the previous animation
{animate: myAnimation4, start: '<<<'}, // previous * 3 (myAnimation1)
{animate: myAnimation5, start: '<<+800'},
{animate: myAnimation6, start: '<-1200'}

{animate: myAnimation2, start: 6500} // start at 6500ms after the timeline started