Animated-Container

Animated-Container

Animated container is a HTML custom element built using Stencil JS. It helps create a smooth transition/animation of items moving around to communicate change. It animates the positon and size both on itself and its' children when changes are made to the DOM.

PS: Animated container is layout agnostic. You can style it which ever way you see fit.

Installation

npm install animated-container

Or

<script src="https://unpkg.com/animated-container@0.2.1/dist/animated-container.js</script>

Usage

A data-key attribute is added to every item, including the parent container itself. 

            <animated-container>
              <div class="item">item 1</div>
              <div class="item">item 2</div>
              <div class="item">item 3</div>
            </animated-container>

Attributes

  • easing
  • stagger
  • duration

Examples

Grid

item 1
item 2
item 3
item 4
item 5
item 6

Animated button