Skip to main content
ScrollSmoother

See it in action

ScrollSmoother provides physically continuous, buttery inertia-based scrolling and native page-level parallax support. In the Squeditor framework, you donot need to manually define the wrapper/content divs in your template, nor do you write JavaScript. Simply attribute the <body> tag, and the engine automatically injects the fixed scroll viewports and protects external structural elements appropriately. Usage Enable ScrollSmoother by passing the configuration via the data-gsap-smooth attribute on the <body> element. In the standard PHP template, you can control this by defining a $body_attr variable before base.php is included. Basic Example 
// In any page template, before including base.php
$body_attr = 'data-gsap-smooth="smooth: 1.5; effects: true"';
When rendered, the HTML behaves like this: 
<body data-gsap-smooth="smooth: 1.5; effects: true">
  <!-- The GSAP engine automatically wraps the main content and footer for you. -->
</body>
Parallax Attributes With effects: true active, simply drop these attributes onto any element within the smoothed container: 
<!-- Moves 1.2x as fast as normal scroll (foreground) -->
<div data-speed="1.2">Fast Layer</div>

<!-- Moves 0.6x as fast (deep background) -->
<div data-speed="0.6">Slow Layer</div>

<!-- Follows scrolling instantly, but takes 0.5s to snap fully into position -->
<div data-lag="0.5">Trailing Object</div>
Options Pass standard ScrollSmoother parameters dynamically through the string configuration.
OptionTypeDefaultDescription
smoothnumber1.5The delay time (in seconds) it takes the container to catch up to the native scroll position.
effectsbooleantrueScans the DOM for data-speed and data-lag attributes to enable instant automatic parallax.
smoothTouchnumber | boolean0.1Allows smoothing on touch devices (keep this extremely low if enabled).

​
ScrollTrigger

See it in action

ScrollTrigger natively bridges GSAP animations with viewport scroll position. Squeditor fully integrates ScrollTrigger directly into the primary data-gsap attributes, allowing you to trigger, pin, sequence, and scrub timelines purely via HTML. Basic Scroll Reveals To trigger a standard animation when an element enters the viewport, simply add scroll: true to the standard data-gsap payload. 
<div data-gsap="from: {y: 40, opacity: 0}; scroll: true; duration: 1; ease: expo.out">
    Content fades up when it enters the viewport.
</div>
If you need a specific starting offset, provide start. The default is top 85%. 
<div data-gsap="from: {opacity: 0}; scroll: true; start: top 70%">
    Triggers when the top of the element hits 70% down the screen.
</div>
Advanced Scrubbing and Pinning For advanced functionality—like pinning massive structural sections or scrubbing timelines backwards and forwards synced frame-for-frame with the scrollbar—use the wrapper attribute data-gsap-scroll. The data-gsap-scroll parent manages the scroll viewport timeline, and the GSAP engines scans the data-gsap children inside it to animate them concurrently. Scrubbing Timelines Links the animation exact duration to the physical scrollbar. 
<div data-gsap-scroll="start: top 80%; end: bottom 20%; scrub: 1">
    <!-- This child's animation will smoothly reverse if you scroll back up -->
    <div data-gsap="to: {x: 500, rotate: 360}; ease: none">
        Scrubbing box
    </div>
</div>
Pinning Sections Great for locking a section in place while interior items transition. 
<section data-gsap-scroll="pin: true; start: top top; end: +=1500; scrub: true">
    <h2 data-gsap="to: { scale: 50, opacity: 0 }">Zooming hero title</h2>
</section>
Options Reference Child data-gsap="scroll: true" options
OptionTypeDefaultDescription
scrollbooleanfalseInstructs the element to wait until it is in viewport to fire.
startstring'top 85%'ScrollTrigger start position.
toggleActionsstring'play none none none'Playback logic (onEnter, onLeave, etc.)
Parent data-gsap-scroll options
OptionTypeDefaultDescription
scrubboolean | numberfalseTies the animation timeline natively to the scrollbar. Numbers add inertia-lag (e.g. 1).
pinbooleanfalseLocks the element block in space vertically.
startstring'top center'Custom trigger start position.
endstring'bottom center'Custom trigger ending position. Crucial for determining how long a pin lasts.
pinSpacingbooleantrueUsually pads the DOM to respect the pinned distance.

​
ScrollTo

See it in action

Squeditor introduces automated DOM hooks routing straight through the ScrollTo plugin purely via the**data-sq-scrollto** global interaction. Usage Assign semantic IDs across HTML elements cleanly over your DOM tree. Immediately target those links without any custom JavaScript event listeners. Explicit Section Anchors 
<!-- Native targeting strictly off standard valid DOM logic correctly natively -->
<a href="#about" data-sq-scrollto="duration: 1.5; ease: expo.out">
    Skip to About
</a>

<section id="about">
    ...
</section>
If data-sq-scrollto is missing, you may need to explicitly import ./gsap-modules/scroll-to.js through gsap-advanced.js.
Data Config Properties
Payload VariableTypeDefaultReason
durationnumeric1.5How quickly the window scrolls to the target.
easestring'power4.inOut'The easing curve applied to the scroll transition.
offsetYinteger0Automatically offset the final scroll position to account for fixed headers.

​
SplitText

See it in action

Instead of utilizing native JavaScript iterations natively, Squeditor wraps GSAP’s entire SplitText framework in a single**data-gsap-split** property designed exclusively for semantic text hierarchies.
Never apply data-gsap-split to elements with child HTML tags (like <strong> or <a>). Plain text headings or semantic <p> tags only.
Usage Simply pass the type of split you desire, the transition animation coordinates, and define standard stagger offsets to create intricate, complex typographical sequences globally on scroll simply by declaring <div data-gsap-split="type: chars..."> Split by Character 
<!-- Animate each character bounding across the timeline on scroll automatically -->
<h1 class="hero-title"
    data-gsap-split="type: chars; from: {x: 100, opacity: 0, rotationY: 180}; stagger: 0.075; duration: 1.25; ease: expo.out; scroll: true">
    Motion Scroll
</h1>
Split by Word or Line Using type: lines inherently converts structural semantic paragraphs cleanly, adjusting line heights intrinsically to wrap on breakpoints sequentially across the parent container natively. 
<p class="text-xl"
   data-gsap-split="type: lines; from: {y: 40, opacity: 0}; stagger: 0.1; duration: 1.2; ease: power2.out; scroll: true">
    A declarative powerhouse capable of converting complex nested string logic into unified DOM components without JavaScript manipulation hooks.
</p>
Internal Options Overrides
OptionTypeDefaultDescription
typestring'words,lines'Which elements SplitText targets syntactically (chars, words, lines).
from / tonested stringundefinedMaps transition targets directly dynamically.
staggernumber0.05Dictates sequential delay logic natively.

​
Typewriter

See it in action

Squeditor securely binds the GSAP TextPlugin specifically through the**data-gsap-text** payload natively. Use this dynamically for typing sequences explicitly over nested structural loops without writing custom callbacks mechanically natively. Usage Simply attach data-gsap-text="to: {text: {value: '...'}}" natively to any empty or prepopulated span layout natively in your DOM. 
<div class="relative p-12 rounded-3xl min-h-[460px]">
    <!-- Squeditor dynamically injects the nested value string progressively over duration implicitly -->
    <span data-gsap-text="to: {text: {value: 'Initializing terminal injection gracefully natively...', delimiter: ''}}; duration: 1.5; scroll: true"></span>
    
    <!-- Optional: Sync a blinking GSAP cursor natively directly alongside the data payload -->
    <span class="absolute w-1 h-8 bg-indigo-400" data-gsap="to: {opacity: 0, repeat: -1, yoyo: true}; duration: 0.5"></span>
</div>
Parameter Parsing Reference Squeditor’s deep JS payload string parses nested objects organically cleanly internally explicitly. Ensure your 'value' is perfectly single-quoted cleanly inherently safely across HTML nodes natively.
Target OptionTypeExampleDescription
valuestring'System Online'The full target string meant to append internally cleanly gracefully natively.
delimiterstring''Controls substring segmentation spacing natively cleanly natively natively.
padSpacebooleantruePrevents rapid layout shifts mechanically over block-rendering layout structures natively.

​
DrawSVG

See it in action

Squeditor natively bundles GSAP’s robust DrawSVGPlugin to animate vector outline strokes smoothly. Use the targeted**data-gsap-draw** attribute on any generic <path>, <circle>, <line>, <polyline>, or <polygon> layer natively. Usage Attach the exact mapping coordinates you want DrawSVG to natively follow directly into the strings. Squeditor parses this via data-gsap-draw flawlessly. Basic Draw 
<svg viewBox="0 0 1200 1200"
    data-gsap-draw="from: {drawSVG: '0% 0%'}; to: {drawSVG: '0% 100%'}; duration: 3; ease: power3.inOut" 
    stroke="currentColor">
    <circle cx="600" cy="600" r="300" stroke-width="1" />
</svg>
**Native Scroll Scrubbing ** Combining this with the parent data-gsap-scroll="scrub: 1" logic dynamically generates precise UI tracing that seamlessly integrates physically with scrollbar movement explicitly natively. 
<div class="flex-1 w-full" data-gsap-scroll="start: top 80%; end: bottom 20%; scrub: 1">
    <svg viewBox="0 0 400 400" class="stroke-amber-400 fill-none" stroke-width="2">
        <!-- Scrub timeline strictly over this path directly via HTML properties -->
        <path d="M50 350 C 50 200, 350 200, 350 50" 
            data-gsap-draw="from: {drawSVG: '0% 0%'}; to: {drawSVG: '0% 100%'}; ease: none" />
    </svg>
</div>
Options Configuration
OptionTypeDefaultDescription
drawSVGnumeric string'100%'Define precise path logic ranges ('0% 50%', '20 80').
scrollbooleanfalseInstructs the path to wait out viewport proximity organically.

​
MorphSVG

See it in action

Squeditor natively bundles the MorphSVG framework. Utilizing the custom string parser, any standard <path> edge can cleanly convert into another existing structure simply by targeting its CSS ID. Usage Pass a valid SVG $id or standard CSS string selector into the morphSVG property on the custom**data-gsap-morph** attribute. Basic Trigger 
<svg viewBox="0 0 400 400" class="stroke-fuchsia-300">
    <!-- The target shape to morph into (hidden) -->
    <path id="morph-target" d="M200 50 L350 350 L50 350 Z" class="hidden" />
    
    <!-- The starting shape that animates -->
    <path d="M50 50 L350 50 L350 350 L50 350 Z" 
        data-gsap-morph="to: {morphSVG: '#morph-target'}; duration: 2; ease: power2.inOut; scroll: true" />
</svg>
MorphSVG natively only functions on raw <path> components. To morph basic geometry logic (<rect>, <circle>, etc.), utilize the convertToPath utility or explicitly code the vectors manually as <path> curves beforehand.
Options Standard GSAP vars are seamlessly inherited. Only target raw paths on raw paths.
OptionTypeDefaultDescription
morphSVGstringundefinedMust target an existing DOM node that contains the intended destination <path>.
shapeIndexstring | number'auto'Shifts starting point mappings natively to prevent chaotic vector twisting. Set mathematically, or utilize 'auto'.
typestring'linear'If vectors must twist cleanly naturally instead of direct morphing, set this string explicitly to 'rotational'.