Skip to main content
View Demo The Squeditor framework uses declarative data attributes for GSAP animations. A single gsap-init.js file scans the DOM and fires all animations automatically—no per-element JavaScript needed. Here are the three main attributes for general animations:

data-gsap

Standard animations: fade, slide, stagger, scroll reveal

data-gsap-split

Text reveal: split by chars, words, or lines via SplitText

data-gsap-scroll

Advanced scroll: pin sections, scrub, parallax

​
data-gsap

Used for standard from/to animations, scroll reveals, and staggering children. 
<div data-gsap="from: {y: 40, opacity: 0}; duration: 0.75; ease: power2.out; scroll: true">
  Content here
</div>

​
Options

OptionTypeDefaultDescription
fromstring (JSON)RequiredGSAP vars: {y, x, opacity, scale, rotate}
durationnumber0.75Animation duration in seconds
easestring'power2.out'GSAP easing string
delaynumber0Delay before animation starts in seconds
staggernumber0Stagger delay between children in seconds
scrollbooleanfalseEnable ScrollTrigger on this element
startstring'top 85%'ScrollTrigger start position
timelinebooleanfalseAnimate children sequentially

​
data-gsap-split

Used to reveal text by chars, words, or lines. Powered by the GSAP SplitText plugin.
Never use on elements with child HTML tags. Plain text headings or paragraphs only.
<h2 data-gsap-split="type: words; from: {y: 60, opacity: 0}; stagger: 0.06; scroll: true">
  Heading text
</h2>

​
Options

OptionTypeDefaultDescription
typestring'words'Split type: 'chars', 'words', or 'lines'
fromstring (JSON)RequiredGSAP from vars, same as data-gsap
staggernumber0.05Delay between each split unit
durationnumber0.75Duration per split unit
easestring'power2.out'Easing string
scrollbooleanfalseEnable ScrollTrigger
startstring'top 85%'ScrollTrigger start position

​
data-gsap-scroll

Advanced ScrollTrigger features: pinning, scrubbing, and parallax.
Always pair with a data-gsap child. The scroll attribute controls the trigger point, while the child’s data-gsap controls the animation tween.
<section data-gsap-scroll="pin: true; start: top top; end: +=600">
  <div data-gsap="from: {opacity: 0}; scroll: true">...</div>
</section>

​
Options

OptionTypeDefaultDescription
scrubboolean or numberfalseTie to scroll position — true or number
pinbooleanfalsePin element during scroll through
startstring'top center'ScrollTrigger start position
endstring'bottom center'ScrollTrigger end position

​
Easing Quick Reference

  • power2.out — Smooth deceleration (default, works for most elements)
  • power3.out — Stronger deceleration (good for large movements)
  • expo.out — Very sharp then slow (dramatic hero animations)
  • back.out — Slight overshoot (good for chars and icon animations)
  • none — Linear (use only for scrub-based scroll animations)