Skip to content

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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Important! Thanks to Webflow, Gsap is free to use now with it's plugins like SplitText

Its good to see and know how it works under the hood plugins like this but its better to use original SplitText plugin

see: https://gsap.com/pricing/

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)
    

About

Its free splittext plugin for gsap3 animation library

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published