lukePeavey / SplitType

Javascript utility that splits text into lines, words, characters for animation
https://lukepeavey.github.io/SplitType/
545 stars 39 forks source link

How do we return type back to original html content after animation is finished?? #63

Closed shanewmurphy closed 10 months ago

shanewmurphy commented 11 months ago

How do we Implement the Reverting Split Text after animated is finished?

If use your gsap example of

`const text = new SplitType('#target', { types: 'words, chars' })

// Animate characters into view with a stagger effect gsap.from(text.chars, { opacity: 0, y: 20, duration: 0.5, stagger: { amount: 0.1 }, })`

How do we use SplitType.revert('#target') to return text to original html

shanewmurphy commented 11 months ago

I figured it out by

`gsap.from(text.chars, { opacity: 0, y: 20, duration: 0.5, stagger: { amount: 0.1 }, onComplete: function () { SplitType.revert(".animate_text"); },

})`

lukePeavey commented 10 months ago

@shanewmurphy going to close this since you found a solution.