vue-keyframes Create frame-based animations in VueJS

Developed by Prev Wong

~ arrow forwardmaster

refresh

01 Installation

  • Grab the package via npm

    npm install --save vue-keyframes
  • Require the plugin in your project file

    import {Keyframes} from 'vue-keyframes';
  • Install the plugin

    Vue.use(Keyframes);

02 Usage

  • Create a <keyframes> component. In it, every child element will act as a frame. [Every child element must be wrapped in a component/HTML tag]

    <keyframes loop="true">
    	<p duration="500">Hi World</p>
    	<p duration="1000">How's it going ?</p>
    	<p duration="500">See ya.</p>
    </keyframes>
    
    

    Hi World

  • Of course, you can customize a little

    <keyframes> component
    Attribute Value
    loop If set to true, the keyframes will repeat itself infinitely. See more on Manual looping
    Default: false
    delay Defines a delay time(ms) before animating keyframes.
    Default: 0
    component Specifies the component <keyframes> will render as. Both standard HTML elements, and Vue components are accepted.
    Default: div
    auto-run Defines whether to automatically play keyframes See more on Custom Trigger
    Default: true
    on-animate Callback function for whenever a frame is being animated. See more on Callbacks
    Default: false
    on-end Callback function once all frames have been animated. See more on Callbacks
    Default: false
    ... Every other attribute will be rendered along with the component as usual
    Child elements
    Attribute Value
    duration Defines the length of time(ms) the frame/element should show.
    Default: 200
    freeze If set to true, once the frame has animated, it will not be removed. See more on Freezing Frames
    Default: false

03 Freezing frames

There are times when the next frame also contains the contents of the current frame, so instead of copy-pasting the current frame, it's much more convenient to just freeze it.
Think of it as "appending" the current frame, whereby it wont be removed by the next frame.

  • <keyframes loop="true">
    	<p duration="500">Hi World</p>
    	<p freeze="true" duration="1000">How's it going ?</p>
    	<p duration="500">See ya.</p>
    </keyframes>
    
    

    Hello World

04 Custom triggers

By default, the keyframes will animate when they are rendered onto the page. But of course, this shouldnt always be the case. For example, sometimes you only want to animate the keyframes when the user clicks on a button or perhaps when the user scrolls to a particular section.
To do so, you will need to set auto-run to false. Every keyframes component contains a stop data. stop is set to true when auto-run is set to false. Hence in order to start/resume the keyframes, you will need to modify the component's stop data.

In VueJS, manipulating a component's data externally can be done using refs.

  • <keyframes auto-run="false" ref="myKeyframes">
    	<p duration="500">Hi World</p>
    	<p freeze="true" duration="1000">How's it going ?</p>
    	<p duration="500">See ya.</p>
    </keyframes>
    <a ref="custom_trigger">Click me to animate keyframes</a>
    
    
  • // Your JS project file
    ...
    var app = new Vue({...});
    
    app.$refs.custom_trigger.addEventListener("click", (e) => {
    	app.$refs.myKeyframes.stop = false;
    	e.target.parentNode.removeChild(e.target); // remove button
    })
    
    

05 Manual Looping

In additon to the automatic looping that is simply activated by adding the loop="true", you can also manually call resetFrames() method to loop the sequence.

  • <keyframes delay="100" ref="myKeyframes">
    	<p freeze="true" duration="500">Goodmorning</p>
    	<p freeze="true" duration="1000">I am eating</p>
    	<p freeze="true" duration="500">I am still eating</p>
    </keyframes>
    <a ref="repeat">Restart animation</a>
    
    
  • // Your JS project file
    ...
    var app = new Vue({...});
    
    app.$refs.repeat.addEventListener("click", (e) => {
    	app.$refs.myKeyframes.resetFrames();
    })
    
    

    Goodmorning

    Restart animation

06 Callback Functions

    On Animate - Runs whenever a frame is animated.
    • Your function should accept these 2 parameters

      • elKeyframes' DOM element
      • frameNumint
      function animateFn(el, frameNum){
      	/**
      		If it's the 3rd frame that is being animated,
      		add the "animate" class to the keyframes' component
      	**/
      	if ( frameNum == 2 ) { 
      		el.classList.add("animate");
      	} else {
      		el.classList.remove("animate");
      	}
      }
      
      
    • <keyframes on-animate="animateFn" loop="true">
      	<p duration="1000">0</p>
      	<p duration="1000">1</p>
      	<p duration="1000">2</p>
      	<p duration="1000">3</p>
      	<p duration="1000">4</p>
      </keyframes>
      
      

      0

    On End - Runs after all frames are animated.
    • Your function should accept one parameter

      • elKeyframes' DOM element
      function endFn(el){
      	// Increment after every frames are animated
      	var b = document.getElementById("text").querySelector("b");
      	var num = parseInt(b.innerHTML) + 1;
      	b.innerHTML = num;
      }
      
      
    • <keyframes on-end="endFn" loop="true">
      	<p duration="1000">0</p>
      	<p duration="1000">1</p>
      	<p duration="1000">2</p>
      	<p duration="1000">3</p>
      	<p duration="1000">4</p>
      </keyframes>
      <p id="text">Keyframes ran: <b>0</b> times</p>
      
      

      0

      Keyframes ran: 0 times