Skip to content

Instantly share code, notes, and snippets.

@positlabs
Last active August 10, 2018 00:17
Show Gist options
  • Save positlabs/cfb57cdee3df119cae59 to your computer and use it in GitHub Desktop.
Save positlabs/cfb57cdee3df119cae59 to your computer and use it in GitHub Desktop.
Super simple replacement for GSAP's SplitText. Not as robust, but it's editable.
/**
* splitText - function to split words into html elements based on words and characters
* @param html text to split
* @param options optional parameters
* @example splitText('some text', {
* wordClass: 'word',
* charClass: 'char',
* chars: true,
* })
*/
const splitText = (html, options=null) => {
options = options || {}
options.wordClass = options.wordClass || 'ts-word'
options.charClass = options.charClass || 'ts-char'
let words = html.split(' ')
words = words.map(word => {
let letters = word
if(options.chars){
letters = word.split('').map(letter =>
`<span class="${options.charClass}">${letter}</span>`
).join('')
}
return `<span class="${options.wordClass}">${letters}</span>`
})
return words.join(' ')
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment