/gsap-class-based-split-text-plugin

Its free splittext plugin for gsap3 animation library

Primary LanguageJavaScript

GSAP Split Text Tool

Basic Usage

	import { SplitText } from "./assets/splitText.js"

	const text = document.querySelector("h1.test")
	const splittedText = new SplitText(text) // or new SplitText("h1.test")

And Animating with GSAP

	import { gsap, TimelineLite } from "./assets/gsap/all.js"
	import { SplitText } from "./assets/splitText.js"

	const text = document.querySelector("h1.test")
	const splittedText = new SplitText(text) // or new SplitText("h1.test")

	const textTimeline = new TimelineLite()

	textTimeline.staggerFromTo(splittedText.chars, 0.5, 
	// From
	{
		rotateZ:360,
		opacity:0
	},
	// To
	{
		rotateZ:0,
		opacity:1
	},
	0.02)