Plutonium [vue.js stagger component]

About

An advanced Vue.js component that adds staggered CSS transition animations to child elements.

• Stagger animate child elements / components
• Define animations with pure CSS transitions
• Control transitions with a simple 'show' Boolean value
• Transitions auto reverse when changing the 'show' state while active
• Perfect for animating drop down menus and lists

Links

• Stagger Home
  • Documentation
  • API

Bookmarks

• Install
• Import
  • Module
  • CDN Script Tags
• Instantiate
• Animate
• License

Install

> npm install @plutonium-js/vue-stagger

:arrow_up_small:

Import

• Module

  Using ES6...

  import stagger from '@plutonium-js/vue-stagger';
  Vue.use(stagger);

  Using CommonJS...

  const stagger = require('@plutonium-js/vue-stagger').default;
  Vue.use(stagger);

• CDN Script Tag

  Add the component directly to a web page.

  <script src="https://cdn.jsdelivr.net/npm/@plutonium-js/vue-stagger@1/dist/bundle.umd.js"></script>
  <script>
     Vue.use(window.puStagger);
  </script>

:arrow_up_small:

Instantiate

Create new stagger instances by adding the <pu-stagger/> tag to your HTML. All child elements and components will be animated based on your transition styles and stagger properties.

<div id="app">
   <pu-stagger
      id = "myStagger"
      tag = "div"
      :show = "show"
      :interval = "0"
      :duration = ".5"
      :reverse = "true"
      ease-type = "linear"
   >
      <div>my child element 1</div>
      <div>my child element 2</div>
      <div>my child element 3</div>
   </pu-stagger>
</div>

Stagger tag property options...

• id - A custom attribute that is inherited, Stagger inherits all custom attributes.

• tag: [string] - The tag name to use for your root stagger component element (default is 'DIV').

• show: [bool] - when changed, staggered animation transitions start.

• interval: [float] - This is the stagger interval (time between starting staggered transition animations).

• duration: [float] - If defined, the interval is set to the duration divided by the child item count.

• reverse: [bool] - This reverses the stagger direction. (e.g... when true the show transitions start at the last child element vs. the first)

• ease-type: [string] - The stagger timing ease type ['linear', 'ease', 'quadratic', 'cubic', 'quartic', 'quintic', 'sinusoidal', 'exponential', 'circular']. Specify direction by appending '-in', '-out', or '-inout' to the name (e.g. 'ease-in').

:arrow_up_small:

Animate

Animating Stagger instances requires CSS transitions to exist on the components child elements. Transitions are then triggered by a change in the Boolean 'show' property value.

Add CSS transitions that target Stagger child elements as shown below...

<style>
   #myStagger>.item {
      transition: all 1s ease;
   }
   #myStagger>.item-from {
      transform:rotate(0deg);
      opacity: 0;
   }
   #myStagger>.item-to {
      transform:rotate(360deg);
      opacity: 1;
   }
</style>

Stagger conditionally adds the following class names...

• 'item' - Applied to all child elements.
• 'item-to' - Applied to all child elements when show is true (applied on a stagger).
• 'item-from' - Applied to all child elements when show is false (applied on a stagger).
• 'to-ended' - Applied to the root stagger element when all 'to' transitions have ended.
• 'from-ended' - Applied to the root stagger element when all 'from' transitions have ended.
• 'active' - Applied when animated and only removed when all 'from' transitions end.

Trigger Stagger transitions by changing the 'show' property...

<script>
	new Vue({
	   el: '#app',
	   data:{
		  show:false
	   },
	   mounted() {
		  //animate when mounted with a 1 second delay
		  this.show = !this.show;
	   }
	});
</script>

The following shows the code required to create a simple stagger transition...

<style>
   #myStagger>.item {
      transition: all 1s ease;
   }
   #myStagger>.item-from {
      transform:rotate(0deg);
      opacity: 0;
   }
   #myStagger>.item-to {
      transform:rotate(360deg);
      opacity: 1;
   }
</style>

<div id="app">
   <pu-stagger
      id = "myStagger"
      tag = "div"
      :show = "show"
      :interval = "0"
      :duration = ".5"
      :reverse = "true"
      ease-type = "linear"
   >
      <div>my child element 1</div>
      <div>my child element 2</div>
      <div>my child element 3</div>
   </pu-stagger>
</div>

<script>
	new Vue({
	   el: '#app',
	   data:{
		  show:false
	   },
	   mounted() {
		  //animate when mounted with a 1 second delay
		  this.show = !this.show;
	   }
	});
</script>

:arrow_up_small:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: