Dativejs animation

Animations in dativejs is awesome
And it uses the Web Animation Api

So it's easy to create custom animations

Let's Start Cooking

import Dative from 'dativejs';

export let Anime = Dative.extend({
   ...,
   animate: {
      rotate({ animate,delay,duration }){
         animate([ 
            { rotate: '0deg' },
            { rotate: '360deg' },
         ],{
            delay,
            duration,
            easing
         })
      } 
   },
   template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `
})

The animation directive animate:<animate-name>="duration, delay" also has the short way @<animate-name>="duration, delay"

This is how the animation is been used

  template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `

Thanks For Reading

Please me on Twitter