Marcisbee / radi

🌀Tiny (in size) front-end framework with no extra browser re-flows
https://radi.js.org
MIT License
948 stars 34 forks source link

Adds `animation` attribute #40

Closed Marcisbee closed 6 years ago

Marcisbee commented 6 years ago

Example usage

const fade = {
  in: (el) => el.animate({
    opacity: [0, 1],
    transform: ['scale(0.5)', 'scale(1)'],
  }, {
    duration: 200,
    iterations: 1
  }),

  out: (el, done) => el.animate({
    opacity: [1, 0],
    transform: ['scale(1)', 'scale(0.5)'],
  }, {
    duration: 200,
    iterations: 1
  }).onfinish = done,
};
<h1 animation={fade}>I will fade in and out slowly</h1>