https://github.com/shshaw/splitting

JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!
https://github.com/shshaw/splitting

animation character css css-vars split splitting text transition

Last synced: about 1 month ago
JSON representation

JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

• Host: GitHub
• URL: https://github.com/shshaw/splitting
• Owner: shshaw
• License: mit
• Created: 2018-01-05T17:45:54.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-06-19T03:08:08.000Z (about 1 year ago)
• Last Synced: 2024-10-29T15:29:23.437Z (8 months ago)
• Topics: animation, character, css, css-vars, split, splitting, text, transition
• Language: JavaScript
• Homepage: https://splitting.js.org
• Size: 1.34 MB
• Stars: 1,685
• Watchers: 12
• Forks: 68
• Open Issues: 41
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# [](https://splitting.js.org)

### _CSS Vars for split words, chars & more!_

![The current build status based on whether tests are passing](https://api.travis-ci.org/shshaw/Splitting.svg?branch=1.0.0)

![The Uncompressed size of Splitting](https://img.shields.io/bundlephobia/min/splitting.svg?label=Minified%20Size)

![The GZIP size of Splitting](https://img.shields.io/bundlephobia/minzip/splitting.svg?label=GZIP%20Size)

![License: MIT](https://img.shields.io/npm/l/splitting.svg?label=License)

Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

Most Splitting methods utilize a series of ``s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

Install with `npm i splitting -s` or [Download](https://github.com/shshaw/Splitting/archive/master.zip).

Consult the [guide & documentation](https://splitting.js.org/guide.html) for more details and installation instructions.

- [**Guide & Documentation**](https://splitting.js.org/guide.html)

- [**Demos**](https://codepen.io/collection/43588e4b7beaaf25ede7e38e61441e54/)

---

## Maintainers

| Maintainer | GitHub | Twitter |

| :- | :- | :- |

| Stephen Shaw | [@shshaw](https://github.com/shshaw) | [@shshaw](https://twitter.com/shshaw) |

| Christopher Wallis | [@notoriousb1t](https://github.com/notoriousb1t) | [@notoriousb1t](https://twitter.com/notoriousb1t) |