Skip to content

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)