Repository: still-life-studio/txt.wav
Branch: master
Commit: 7cc8ea4d0002
Files: 15
Total size: 26.2 KB

Directory structure:
gitextract_3ejrjv9x/

├── .gitignore
├── .jshintrc
├── .scss-lint.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── dist/
│   ├── css/
│   │   └── txt.wav.css
│   └── js/
│       └── txt.wav.js
├── package.json
└── src/
    ├── js/
    │   └── txt.wav.js
    └── scss/
        ├── _bounce.scss
        ├── _flip.scss
        ├── _slow.scss
        ├── _vibe.scss
        └── txt.wav.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules


================================================
FILE: .jshintrc
================================================
{
  "predef": [
    "document",
    "window",
    "-Promise",
    "visit",
    "fillIn",
    "click",
    "find",
    "findWithAssert"
  ],
  "browser": true,
  "boss": true,
  "curly": true,
  "debug": false,
  "devel": true,
  "eqeqeq": true,
  "evil": true,
  "forin": false,
  "immed": false,
  "laxbreak": false,
  "newcap": true,
  "noarg": true,
  "noempty": false,
  "nonew": false,
  "nomen": false,
  "onevar": false,
  "plusplus": false,
  "regexp": false,
  "undef": true,
  "sub": true,
  "strict": false,
  "white": false,
  "eqnull": true,
  "esnext": true,
  "unused": true
}


================================================
FILE: .scss-lint.yml
================================================
# Default application configuration that all configurations inherit from.

scss_files: "src/scss"
plugin_directories: ['.scss-linters']

# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []

# Default severity of all linters.
severity: warning

linters:
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BemDepth:
    enabled: false
    max_elements: 1

  BorderZero:
    enabled: true
    convention: zero # or `none`

  ChainedClasses:
    enabled: false

  ColorKeyword:
    enabled: true

  ColorVariable:
    enabled: true

  Comment:
    enabled: true
    style: silent

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DisableLinterReason:
    enabled: false

  DuplicateProperty:
    enabled: true

  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  EmptyRule:
    enabled: true

  ExtendDirective:
    enabled: false

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: false
    style: short # or 'long'

  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportantRule:
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    allow_non_nested_indentation: false
    character: space # or 'tab'
    width: 2

  LeadingZero:
    enabled: true
    style: include_zero # or 'exclude_zero'

  MergeableSelector:
    enabled: true
    force_nesting: true

  NameFormat:
    enabled: true
    allow_leading_underscore: true
    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern

  NestingDepth:
    enabled: true
    max_depth: 4
    ignore_parent_selectors: false

  PlaceholderInExtend:
    enabled: false

  PrivateNamingConvention:
    enabled: false
    prefix: _

  PropertyCount:
    enabled: true
    include_nested: false
    max_properties: 10

  PropertySortOrder:
    enabled: true
    ignore_unspecified: false
    min_properties: 2
    separate_groups: false

  PropertySpelling:
    enabled: true
    extra_properties: []
    disabled_properties: []

  PropertyUnits:
    enabled: true
    global: [
      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
      'deg', 'grad', 'rad', 'turn',            # Angle
      'ms', 's',                               # Duration
      'Hz', 'kHz',                             # Frequency
      'dpi', 'dpcm', 'dppx',                   # Resolution
      '%']                                     # Other
    properties: {}

  PseudoElement:
    enabled: true

  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    enabled: true
    max_depth: 2

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern

  Shorthand:
    enabled: true
    allowed_shorthands: [1, 2, 3]

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: true

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space'

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'

  SpaceAfterPropertyName:
    enabled: true

  SpaceAfterVariableColon:
    enabled: false
    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'

  SpaceAfterVariableName:
    enabled: true

  SpaceAroundOperator:
    enabled: true
    style: one_space # or 'at_least_one_space', or 'no_space'

  SpaceBeforeBrace:
    enabled: true
    style: space # or 'new_line'
    allow_single_line_padding: false

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: double_quotes # or single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingWhitespace:
    enabled: true

  TrailingZero:
    enabled: false

  TransitionAll:
    enabled: false

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: true

  UrlQuotes:
    enabled: true

  VariableForProperty:
    enabled: false
    properties: []

  VendorPrefix:
    enabled: true
    identifier_list: base
    additional_identifiers: []
    excluded_identifiers: []

  ZeroUnit:
    enabled: true

  Compass::*:
    enabled: false


================================================
FILE: CONTRIBUTING.md
================================================
# contributing to txtwav

We love pull requests from everyone. By participating in this project, you
agree to abide by the still life [code of conduct].

[code of conduct]: https://www.stilllife.studio/conduct

Here are some ways *you* can contribute:

* by using alpha, beta, and prerelease versions
* by reporting bugs
* by suggesting new features
* by writing or editing documentation
* by writing specifications
* by writing code ( **no patch is too small** : fix typos, add comments, clean up inconsistent whitespace )
* by refactoring code
* by closing [issues][]
* by reviewing patches

[issues]: https://github.com/still-life-studio/txtwav/issues

## Submitting an Issue
We use the [GitHub issue tracker][issues] to track bugs and features. Before
submitting a bug report or feature request, check to make sure it hasn't
already been submitted. When submitting a bug report, please include a [Gist][]
that includes a stack trace and any details that may be necessary to reproduce
the bug, including your gem version, Ruby version, and operating system.
Ideally, a bug report should include a pull request with failing specs.

[gist]: https://gist.github.com/

## Submitting a Pull Request
1. [Fork][fork] the [official repository][repo].
2. [Create a topic branch.][branch]
3. Implement your feature or bug fix.
4. Add, commit, and push your changes.
5. [Submit a pull request.][pr]

[repo]: https://github.com/still-life-studio/txtwav/tree/master
[fork]: https://help.github.com/articles/fork-a-repo/
[branch]: https://help.github.com/articles/creating-and-deleting-branches-within-your-repository/
[pr]: https://help.github.com/articles/using-pull-requests/
[middleman]: https://github.com/middleman/middleman-heroku/blob/master/CONTRIBUTING.md
[thoughtbot]: https://github.com/thoughtbot/factory_girl/blob/master/CONTRIBUTING.md

Thanks to thoughtbot[thoughtbot], and Middleman[middleman] for inspiration and
ideas.


================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)

Copyright (c) 2015 Lionel T

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
# txt.wav

[![npm version](https://badge.fury.io/js/txt.wav.svg)](https://npmjs.com/package/txt.wav)
![Code Climate](https://codeclimate.com/github/still-life-studio/txt.wav/badges/gpa.svg)
[![CDNJS](https://img.shields.io/cdnjs/v/txt.wav.svg)](https://cdnjs.com/libraries/txt.wav)

some weird text animations the internet deserves.

check out the [demos](http://www.stilllife.studio/txtwav?utm_source=github)

#### NPM

```
npm install --save txt.wav
```

#### CDN

See [https://cdnjs.com/libraries/txt.wav](https://cdnjs.com/libraries/txt.wav)

## basic usage

1. include the `css` and `js` files from the `dist` folder.

2. add the class `txtwav` to an element you want to animate.

3. add the class for the specific animation you want to include from the
following:

* `slow`
* `vibe`
* `bounce`
* `flip`

full example:
```html
<h1 class="txtwav slow">true freaks only</h1>
```

## about Still Life

<img src="http://www.stilllife.studio/images/still-life-logo.svg" width="150">

txt.wav is maintained by Still Life.

we love open source software. see our other
[projects](http://www.stilllife.studio/?utm_source=github#work) or [hire
us](http://www.stilllife.studio/?utm_source=github#contact) to design and develop your product.


## license
txt.wav is licensed under the MIT license. (http://opensource.org/licenses/MIT)



================================================
FILE: dist/css/txt.wav.css
================================================
@keyframes slow-wave {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-10px); } }

.txtwav.slow span {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slow-wave;
  display: inline-block; }

.txtwav.slow :nth-child(25n + 0) {
  animation-delay: -6s; }

.txtwav.slow :nth-child(25n + 1) {
  animation-delay: -5.76s; }

.txtwav.slow :nth-child(25n + 2) {
  animation-delay: -5.52s; }

.txtwav.slow :nth-child(25n + 3) {
  animation-delay: -5.28s; }

.txtwav.slow :nth-child(25n + 4) {
  animation-delay: -5.04s; }

.txtwav.slow :nth-child(25n + 5) {
  animation-delay: -4.8s; }

.txtwav.slow :nth-child(25n + 6) {
  animation-delay: -4.56s; }

.txtwav.slow :nth-child(25n + 7) {
  animation-delay: -4.32s; }

.txtwav.slow :nth-child(25n + 8) {
  animation-delay: -4.08s; }

.txtwav.slow :nth-child(25n + 9) {
  animation-delay: -3.84s; }

.txtwav.slow :nth-child(25n + 10) {
  animation-delay: -3.6s; }

.txtwav.slow :nth-child(25n + 11) {
  animation-delay: -3.36s; }

.txtwav.slow :nth-child(25n + 12) {
  animation-delay: -3.12s; }

.txtwav.slow :nth-child(25n + 13) {
  animation-delay: -2.88s; }

.txtwav.slow :nth-child(25n + 14) {
  animation-delay: -2.64s; }

.txtwav.slow :nth-child(25n + 15) {
  animation-delay: -2.4s; }

.txtwav.slow :nth-child(25n + 16) {
  animation-delay: -2.16s; }

.txtwav.slow :nth-child(25n + 17) {
  animation-delay: -1.92s; }

.txtwav.slow :nth-child(25n + 18) {
  animation-delay: -1.68s; }

.txtwav.slow :nth-child(25n + 19) {
  animation-delay: -1.44s; }

.txtwav.slow :nth-child(25n + 20) {
  animation-delay: -1.2s; }

.txtwav.slow :nth-child(25n + 21) {
  animation-delay: -0.96s; }

.txtwav.slow :nth-child(25n + 22) {
  animation-delay: -0.72s; }

.txtwav.slow :nth-child(25n + 23) {
  animation-delay: -0.48s; }

.txtwav.slow :nth-child(25n + 24) {
  animation-delay: -0.24s; }

@keyframes bounce-wave {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-10px); } }

.txtwav.bounce span {
  animation-direction: alternate;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
  animation-name: bounce-wave;
  display: inline-block; }

.txtwav.bounce :nth-child(25n + 0) {
  animation-delay: -0.6s; }

.txtwav.bounce :nth-child(25n + 1) {
  animation-delay: -0.576s; }

.txtwav.bounce :nth-child(25n + 2) {
  animation-delay: -0.552s; }

.txtwav.bounce :nth-child(25n + 3) {
  animation-delay: -0.528s; }

.txtwav.bounce :nth-child(25n + 4) {
  animation-delay: -0.504s; }

.txtwav.bounce :nth-child(25n + 5) {
  animation-delay: -0.48s; }

.txtwav.bounce :nth-child(25n + 6) {
  animation-delay: -0.456s; }

.txtwav.bounce :nth-child(25n + 7) {
  animation-delay: -0.432s; }

.txtwav.bounce :nth-child(25n + 8) {
  animation-delay: -0.408s; }

.txtwav.bounce :nth-child(25n + 9) {
  animation-delay: -0.384s; }

.txtwav.bounce :nth-child(25n + 10) {
  animation-delay: -0.36s; }

.txtwav.bounce :nth-child(25n + 11) {
  animation-delay: -0.336s; }

.txtwav.bounce :nth-child(25n + 12) {
  animation-delay: -0.312s; }

.txtwav.bounce :nth-child(25n + 13) {
  animation-delay: -0.288s; }

.txtwav.bounce :nth-child(25n + 14) {
  animation-delay: -0.264s; }

.txtwav.bounce :nth-child(25n + 15) {
  animation-delay: -0.24s; }

.txtwav.bounce :nth-child(25n + 16) {
  animation-delay: -0.216s; }

.txtwav.bounce :nth-child(25n + 17) {
  animation-delay: -0.192s; }

.txtwav.bounce :nth-child(25n + 18) {
  animation-delay: -0.168s; }

.txtwav.bounce :nth-child(25n + 19) {
  animation-delay: -0.144s; }

.txtwav.bounce :nth-child(25n + 20) {
  animation-delay: -0.12s; }

.txtwav.bounce :nth-child(25n + 21) {
  animation-delay: -0.096s; }

.txtwav.bounce :nth-child(25n + 22) {
  animation-delay: -0.072s; }

.txtwav.bounce :nth-child(25n + 23) {
  animation-delay: -0.048s; }

.txtwav.bounce :nth-child(25n + 24) {
  animation-delay: -0.024s; }

@keyframes vibe-wave {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(4px); } }

.txtwav.vibe span {
  animation-direction: alternate;
  animation-duration: 0.08s;
  animation-iteration-count: infinite;
  animation-name: vibe-wave;
  display: inline-block; }

.txtwav.vibe :nth-child(10n + 0) {
  animation-delay: -0.16s; }

.txtwav.vibe :nth-child(10n + 1) {
  animation-delay: -0.144s; }

.txtwav.vibe :nth-child(10n + 2) {
  animation-delay: -0.128s; }

.txtwav.vibe :nth-child(10n + 3) {
  animation-delay: -0.112s; }

.txtwav.vibe :nth-child(10n + 4) {
  animation-delay: -0.096s; }

.txtwav.vibe :nth-child(10n + 5) {
  animation-delay: -0.08s; }

.txtwav.vibe :nth-child(10n + 6) {
  animation-delay: -0.064s; }

.txtwav.vibe :nth-child(10n + 7) {
  animation-delay: -0.048s; }

.txtwav.vibe :nth-child(10n + 8) {
  animation-delay: -0.032s; }

.txtwav.vibe :nth-child(10n + 9) {
  animation-delay: -0.016s; }

@keyframes flip-wave-0 {
  5% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  10% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 0) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-0;
  display: inline-block; }

@keyframes flip-wave-1 {
  10% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  15% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 1) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-1;
  display: inline-block; }

@keyframes flip-wave-2 {
  15% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  20% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 2) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-2;
  display: inline-block; }

@keyframes flip-wave-3 {
  20% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  25% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 3) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-3;
  display: inline-block; }

@keyframes flip-wave-4 {
  25% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  30% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 4) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-4;
  display: inline-block; }

@keyframes flip-wave-5 {
  30% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  35% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 5) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-5;
  display: inline-block; }

@keyframes flip-wave-6 {
  35% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  40% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 6) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-6;
  display: inline-block; }

@keyframes flip-wave-7 {
  40% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  45% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 7) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-7;
  display: inline-block; }

@keyframes flip-wave-8 {
  45% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  50% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 8) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-8;
  display: inline-block; }

@keyframes flip-wave-9 {
  50% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  55% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 9) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-9;
  display: inline-block; }

@keyframes flip-wave-10 {
  55% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  60% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 10) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-10;
  display: inline-block; }

@keyframes flip-wave-11 {
  60% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  65% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 11) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-11;
  display: inline-block; }

@keyframes flip-wave-12 {
  65% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  70% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 12) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-12;
  display: inline-block; }

@keyframes flip-wave-13 {
  70% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  75% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 13) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-13;
  display: inline-block; }

@keyframes flip-wave-14 {
  75% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  80% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 14) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-14;
  display: inline-block; }

@keyframes flip-wave-15 {
  80% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  85% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 15) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-15;
  display: inline-block; }

@keyframes flip-wave-16 {
  85% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  90% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 16) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-16;
  display: inline-block; }

@keyframes flip-wave-17 {
  90% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  95% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 17) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-17;
  display: inline-block; }

@keyframes flip-wave-18 {
  95% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 18) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-18;
  display: inline-block; }

@keyframes flip-wave-19 {
  100% {
    transform: translate3d(0, -16px, 0) rotate(720deg); }
  105% {
    transform: translate3d(0, 0, 0) rotate(720deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(720deg); } }

.txtwav.flip :nth-child(20n + 19) {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: flip-wave-19;
  display: inline-block; }


================================================
FILE: dist/js/txt.wav.js
================================================
(function() {
  'use strict';

  var textWaveElements = document.getElementsByClassName('txtwav');

  function spanWrapHelper(el, text) {
    for(var i = 0; i < text.length; i++) {
      var span = document.createElement('span');
      span.innerHTML = text[i] === ' ' ? '&nbsp;' : text[i];
      el.appendChild(span);
    }
  }

  for (var i = 0, length = textWaveElements.length; i < length; i++) {
    var el = textWaveElements[i],
      text = el.textContent.trim();

    el.innerHTML = '';
    spanWrapHelper(el, text);
  }
}());


================================================
FILE: package.json
================================================
{
  "name": "txt.wav",
  "version": "1.0.5",
  "description": "Text animation library",
  "main": "dist/js/txt.wav.js",
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "echo \"Compiling SCSS to CSS\" && node-sass --include-path scss src/scss/txt.wav.scss dist/css/txt.wav.css && echo \"Minifying CSS\" && cleancss -o dist/css/txt.wav.min.css dist/css/txt.wav.css && echo \"Minifying and Uglifying JS\" && uglifyjs --compress --mangle --output dist/js/txt.wav.min.js src/js/txt.wav.js && cp src/js/txt.wav.js dist/js/txt.wav.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/still-life-studios/txt.wav.git"
  },
  "keywords": [
    "text",
    "animation",
    "css",
    "weirdos"
  ],
  "author": "Still Life Studios <hello@stilllife.studio> (https://www.stilllife.studio)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/still-life-studios/txt.wav/issues"
  },
  "homepage": "https://www.stilllife.studio/txtwav",
  "devDependencies": {
    "clean-css": "^3.4.19",
    "node-sass": "^3.9.0",
    "uglify-js": "^2.7.3"
  }
}


================================================
FILE: src/js/txt.wav.js
================================================
(function() {
  'use strict';

  var textWaveElements = document.getElementsByClassName('txtwav');

  function spanWrapHelper(el, text) {
    for(var i = 0; i < text.length; i++) {
      var span = document.createElement('span');
      span.innerHTML = text[i] === ' ' ? '&nbsp;' : text[i];
      el.appendChild(span);
    }
  }

  for (var i = 0, length = textWaveElements.length; i < length; i++) {
    var el = textWaveElements[i],
      text = el.textContent.trim();

    el.innerHTML = '';
    spanWrapHelper(el, text);
  }
}());


================================================
FILE: src/scss/_bounce.scss
================================================
// Bounce-Wave
$bounce-offset: -10px;
$bounce-count: 25;
$bounce-duration: 0.3;

@keyframes bounce-wave {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY($bounce-offset);
  }
}

.txtwav.bounce span {
  animation-direction: alternate;
  animation-duration: #{$bounce-duration}s;
  animation-iteration-count: infinite;
  animation-name: bounce-wave;
  display: inline-block;
}

@for $i from 0 to $bounce-count {
  .txtwav.bounce :nth-child( #{$bounce-count}n + #{$i} ) {
    animation-delay: -#{($bounce-count - $i) * 2 * $bounce-duration / $bounce-count }s;
  }
}


================================================
FILE: src/scss/_flip.scss
================================================
// Flip-Wave
$flip-offset: -16px;
$flip-count: 20;
$flip-duration: 4;

@for $i from 0 to $flip-count {
  @keyframes flip-wave-#{$i} {
    #{($i * 5) + 5}% {
      transform: translate3d(0, -16px, 0) rotate(720deg);
    }

    #{($i * 5) + 10}% {
      transform: translate3d(0, 0, 0) rotate(720deg);
    }

    100% {
      transform: translate3d(0, 0, 0) rotate(720deg);
    }
  }

  .txtwav.flip :nth-child( #{$flip-count}n + #{$i} ) {
    animation-duration: #{$flip-duration}s;
    animation-iteration-count: infinite;
    animation-name: flip-wave-#{$i};
    display: inline-block;
  }

}


================================================
FILE: src/scss/_slow.scss
================================================
// Slow-Wave
$slow-offset: -10px;
$slow-count: 25;
$slow-duration: 3;

@keyframes slow-wave {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY($slow-offset);
  }
}

.txtwav.slow span {
  animation-direction: alternate;
  animation-duration: #{$slow-duration}s;
  animation-iteration-count: infinite;
  animation-name: slow-wave;
  display: inline-block;
}

@for $i from 0 to $slow-count {
  .txtwav.slow :nth-child( #{$slow-count}n + #{$i} ) {
    animation-delay: -#{($slow-count - $i) * 2 * $slow-duration / $slow-count }s;
  }
}


================================================
FILE: src/scss/_vibe.scss
================================================
// Vibe-Wave
$vibe-offset: 4px;
$vibe-count: 10;
$vibe-duration: 0.08;

@keyframes vibe-wave {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY($vibe-offset);
  }
}

.txtwav.vibe span {
  animation-direction: alternate;
  animation-duration: #{$vibe-duration}s;
  animation-iteration-count: infinite;
  animation-name: vibe-wave;
  display: inline-block;
}

@for $i from 0 to $vibe-count {
  .txtwav.vibe :nth-child( #{$vibe-count}n + #{$i} ) {
    animation-delay: -#{($vibe-count - $i) * 2 * $vibe-duration / $vibe-count }s;
  }
}


================================================
FILE: src/scss/txt.wav.scss
================================================
@import "slow";
@import "bounce";
@import "vibe";
@import "flip";