• Stars
    star
    143
  • Rank 257,007 (Top 6 %)
  • Language
    JavaScript
  • Created over 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Polymer + Web Animations

⚠️ neon-animation is deprecated ⚠️

Please use the Web Animations API or CSS animations instead. See An Update on Neon Animation for more information.

Published on NPM Build status Published on webcomponents.org

neon-animation

neon-animation is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using Web Animations. Please note that these elements do not include the web-animations polyfill.

See: Documentation, Demo.

See the guide for detailed usage.

Usage

Installation

Element:

npm install --save @polymer/neon-animation

Polyfill:

npm install --save web-animations-js

In an HTML file

NeonAnimatableBehavior

Elements that can be animated by NeonAnimationRunnerBehavior should implement the NeonAnimatableBehavior behavior, or NeonAnimationRunnerBehavior if they're also responsible for running an animation.

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimatableBehavior} from '@polymer/neon-animation/neon-animatable-behavior.js';

class SampleElement extends mixinBehaviors([NeonAnimatableBehavior], PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>

      <slot></slot>
    `;
  }
}
customElements.define('sample-element', SampleElement);

NeonAnimationRunnerBehavior

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';

class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
  static get template() {
    return html`
      <div>this entire element will be animated after one second</div>
    `;
  }

  connectedCallback() {
    super.connectedCallback();

    // must be set here because properties is static and cannot reference "this"
    this.animationConfig = {
      // provided by neon-animation/animations/scale-down-animation.js
      name: 'scale-down-animation',
      node: this,
    };

    setTimeout(() => this.playAnimation(), 1000);
  }
}
customElements.define('sample-element', SampleElement);

<neon-animatable>

A simple element that implements NeonAnimatableBehavior.

In an html file

<html>
  <head>
  </head>
  <body>
    <neon-animatable id="animatable">
      <div>this entire element and its parent will be animated after one second</div>
    </neon-animatable>
    <runner-element></runner-element>
    <script type="module">
      import {PolymerElement} from '@polymer/polymer';
      import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
      import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
      import '@polymer/neon-animation/neon-animatable.js';
      import '@polymer/neon-animation/animations/scale-down-animation.js';

      const animatable = document.getElementById('animatable');

      class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
        connectedCallback() {
          super.connectedCallback();

          this.animationConfig = {
            // provided by neon-animation/animations/scale-down-animation.js
            name: 'scale-down-animation',
            // node is node to animate
            node: animatable,
          }

          setTimeout(() => this.playAnimation(), 1000);
        }
      }
      customElements.define('runner-element', SampleElement);
    </script>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';

class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
  static get template() {
    return html`
      <div>this div will not be animated</div>
      <neon-animatable id="animatable">
        <div>this div and its parent will be animated after one second</div>
      </neon-animatable>
    `;
  }

  connectedCallback() {
    super.connectedCallback();

    // must be set here because properties is static and cannot reference "this"
    this.animationConfig = {
      // provided by neon-animation/animations/scale-down-animation.js
      name: 'scale-down-animation',
      node: this.$.animatable,
    };

    setTimeout(() => this.playAnimation(), 1000);
  }
}
customElements.define('sample-element', SampleElement);

<neon-animated-pages>

neon-animated-pages manages a set of pages and runs an animation when switching between them.

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/neon-animation/neon-animated-pages.js';
      import '@polymer/neon-animation/neon-animatable.js';
      import '@polymer/neon-animation/animations/slide-from-right-animation.js';
      import '@polymer/neon-animation/animations/slide-left-animation.js';
    </script>
  </head>
  <body>
    <neon-animated-pages
        id="pages"
        selected="0"
        entry-animation="slide-from-right-animation"
        exit-animation="slide-left-animation">
      <neon-animatable>1</neon-animatable>
      <neon-animatable>2</neon-animatable>
      <neon-animatable>3</neon-animatable>
      <neon-animatable>4</neon-animatable>
      <neon-animatable>5</neon-animatable>
    </neon-animated-pages>
    <button onclick="increase()">+</button>
    <button onclick="decrease()">-</button>
    <script>
      const pages = document.getElementById('pages');
      function increase() { pages.selected = pages.selected + 1 % 5; };
      function decrease() { pages.selected = (pages.selected - 1 + 5) % 5; };
    </script>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/neon-animation/neon-animated-pages.js';
import '@polymer/neon-animation/neon-animatable.js';
import '@polymer/neon-animation/animations/slide-from-right-animation.js';
import '@polymer/neon-animation/animations/slide-left-animation.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <neon-animated-pages
          id="pages"
          selected="0"
          entry-animation="slide-from-right-animation"
          exit-animation="slide-left-animation">
        <neon-animatable>1</neon-animatable>
        <neon-animatable>2</neon-animatable>
        <neon-animatable>3</neon-animatable>
        <neon-animatable>4</neon-animatable>
        <neon-animatable>5</neon-animatable>
      </neon-animated-pages>
      <button on-click="increase">+</button>
      <button on-click="decrease">-</button>
    `;
  }

  increase() {
    this.$.pages.selected = this.$.pages.selected + 1 % 5;
  }

  decrease() {
    this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5;
  }
}
customElements.define('sample-element', SampleElement);

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
import '@polymer/neon-animation/animations/neon-animatable.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';

class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
  static get template() {
    return html`
      <div>this div will not be animated</div>
      <neon-animatable id="animatable">
        <div>this div and its parent will be animated after one second</div>
      </neon-animatable>
    `;
  }

  connectedCallback() {
    super.connectedCallback();

    // must be set here because properties is static and cannot reference "this"
    this.animationConfig = {
      // provided by neon-animation/animations/scale-down-animation.js
      name: 'scale-down-animation',
      node: this.$.animatable,
    };

    setTimeout(() => this.playAnimation(), 1000);
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/neon-animation
cd neon-animation
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

More Repositories

1

app-layout

App layout elements
HTML
598
star
2

iron-list

Element for a virtual, "infinite" list
JavaScript
219
star
3

app-route

A modular client-side router
HTML
146
star
4

paper-button

A button Γ  la Material Design
JavaScript
138
star
5

paper-input

A Material Design text field
JavaScript
130
star
6

iron-ajax

Easily make ajax requests
HTML
127
star
7

paper-styles

Shared styles for Material Design elements
JavaScript
107
star
8

iron-icons

A set of icons for use with iron-icon
HTML
105
star
9

paper-card

A Material Design piece of paper with unique related data
JavaScript
98
star
10

paper-elements

Material design UI elements implemented using Polymer
HTML
87
star
11

iron-flex-layout

Style mixins for cross-platform flex-box layouts
HTML
85
star
12

marked-element

Element wrapper for the marked library
HTML
84
star
13

generator-polymer-init-custom-build

A Polymer CLI generator for creating custom build processes with polymer-build
JavaScript
69
star
14

platinum-sw

Service Worker Polymer element
HTML
67
star
15

paper-tabs

Material Design tabs
HTML
65
star
16

iron-form

Custom form element
HTML
63
star
17

paper-dialog

A Material Design dialog
HTML
63
star
18

app-storage

Data-pipes and specialized services
JavaScript
61
star
19

app-media

Elements for accessing data from media input devices and visualizing that data for users
JavaScript
61
star
20

paper-dropdown-menu

A Material Design browser select element
JavaScript
61
star
21

paper-checkbox

A Material Design checkbox
HTML
58
star
22

paper-ripple

Adds a Material Design ripple effect to UI elements
JavaScript
57
star
23

paper-toast

A Material Design popup toast
HTML
53
star
24

app-pouchdb

Custom Elements for working with PouchDB.
HTML
49
star
25

app-localize-behavior

Polymer behaviour to help internationalize your application
HTML
48
star
26

iron-pages

Simple content switcher
HTML
48
star
27

iron-elements

Core elements
HTML
47
star
28

paper-slider

A Material Design slider
JavaScript
47
star
29

paper-icon-button

A Material Design icon button
JavaScript
42
star
30

paper-spinner

Material Design circular activity indicator
JavaScript
41
star
31

iron-overlay-behavior

Makes an element an overlay with an optional backdrop
HTML
41
star
32

paper-tooltip

A Material Design tooltip
HTML
40
star
33

paper-toolbar

A Material Design toolbar/appbar
JavaScript
40
star
34

iron-icon

Element that displays a single icon
HTML
40
star
35

paper-swatch-picker

A color picker with all the Material Design colours
JavaScript
39
star
36

iron-image

Image element with sizing and preloading options
HTML
37
star
37

iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
HTML
37
star
38

iron-component-page

A reusable landing page for elements
JavaScript
36
star
39

iron-dropdown

An unstyled element that works similarly to a native browser select
HTML
34
star
40

paper-item

Material Design list items
JavaScript
33
star
41

iron-input

An input with data binding
HTML
33
star
42

paper-fab

A material design floating action button
HTML
33
star
43

iron-selector

Manages a list of elements that can be selected
HTML
32
star
44

paper-progress

A Material Design progress
JavaScript
32
star
45

paper-badge

Material Design status descriptors for elements
HTML
31
star
46

iron-collapse

Adds collapsible behavior to a target element
HTML
27
star
47

paper-toggle-button

A Material Design toggle button
JavaScript
27
star
48

iron-test-helpers

Utility classes to make testing easier
JavaScript
26
star
49

iron-a11y-announcer

An element that helps with announcing text through screen readers.
JavaScript
26
star
50

iron-meta

Element for creating and accessing self-organizing meta-databases
HTML
25
star
51

iron-media-query

Data binding for a CSS Media Query
HTML
25
star
52

paper-drawer-panel

A Material Design two-section responsive panel
JavaScript
25
star
53

iron-swipeable-container

A container that allows any of its nested children to be swiped away.
HTML
25
star
54

paper-scroll-header-panel

Fancy scrolling effects where the header animates between tall and condensed states
JavaScript
24
star
55

paper-menu-button

An element that allows composing a trigger and content as a dropdown menu.
JavaScript
24
star
56

iron-a11y-keys-behavior

A behavior that enables keybindings for greater a11y
HTML
24
star
57

paper-header-panel

A Material Design panel with top and bottom panes
JavaScript
23
star
58

iron-location

A Polymer element that manages binding to the page's URL.
HTML
22
star
59

iron-scroll-threshold

Polymer element for triggering an event when nearing the beginning or end of a scrollable element
HTML
21
star
60

test-fixture

JavaScript
21
star
61

paper-listbox

HTML
21
star
62

paper-behaviors

Common behaviors used across paper-* elements.
HTML
19
star
63

paper-radio-button

A Material Design radio button
HTML
19
star
64

iron-autogrow-textarea

Textarea that grows in height as more lines of input are entered
JavaScript
19
star
65

iron-a11y-keys

A basic element implementation of iron-a11y-keys-behavior
JavaScript
19
star
66

paper-material

A Material Design container that looks like a lifted piece of paper
HTML
19
star
67

paper-radio-group

A group of Material Design radio buttons
HTML
19
star
68

iron-menu-behavior

Accessible menu behavior
HTML
18
star
69

paper-dialog-behavior

Makes an element a Material Design dialog
HTML
18
star
70

prism-element

Prism-based syntax highlighting
JavaScript
17
star
71

iron-fit-behavior

Fits an element into another element
HTML
17
star
72

gold-email-input

An input element that only allows emails
HTML
17
star
73

iron-doc-viewer

Polymer documentation viewer elements
JavaScript
17
star
74

font-roboto-local

JavaScript
16
star
75

iron-demo-helpers

Utility classes to make building demo pages easier
JavaScript
16
star
76

paper-dialog-scrollable

A scrollable area used in a Material Design dialog
HTML
15
star
77

iron-resizable-behavior

HTML
14
star
78

iron-jsonp-library

Loads jsonp libraries.
JavaScript
14
star
79

iron-behaviors

Behaviors that manage control states like 'focused', 'disabled', and 'active'
HTML
14
star
80

iron-iconset

Represents a source of icons expressed as a raster sprite sheet
JavaScript
13
star
81

gold-phone-input

An input element that only allows phone numbers
HTML
13
star
82

gold-cc-input

An input element that only allows credit card numbers
JavaScript
13
star
83

iron-localstorage

Access to localStorage
HTML
11
star
84

iron-validator-behavior

Implements a custom input or form validator
HTML
11
star
85

gold-elements

Business elements
9
star
86

neon-elements

Elements that implement special effects
9
star
87

iron-form-element-behavior

Behavior that enables an element to be included in an iron-form
JavaScript
9
star
88

iron-scroll-target-behavior

Polymer behavior that allows to define a scroller target
HTML
8
star
89

iron-range-behavior

Managing a numeric value within a given range
HTML
8
star
90

gold-cc-cvc-input

An input element that only allows cvc codes
HTML
8
star
91

iron-validatable-behavior

Implements an element validated with Polymer.IronValidatorBehavior
JavaScript
7
star
92

iron-label

A version of the <label> element that works with Custom Elements as well as native elements.
HTML
7
star
93

gold-cc-expiration-input

An input element that only allows credit card expiration dates
JavaScript
6
star
94

iron-checked-element-behavior

Implements an element that has a checked attribute and can be added to a form
HTML
5
star
95

app-elements

Application level elements
HTML
5
star
96

font-roboto

Loads the Roboto family of fonts from Google Fonts.
JavaScript
5
star
97

gold-zip-input

An input element that only allows US zip codes
JavaScript
5
star
98

platinum-elements

push notifications, offline usage, bluetooth and more.
4
star
99

paper-ui-elements

A collection of Material Design UI components
2
star
100

ContributionGuide

Canonical repo for the Polymer Elements contribution guide.
1
star