> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Plugins
ScrollSmoother
ScrollSmoother provides physically continuous, buttery inertia-based scrolling and native page-level parallax support. In the Squeditor framework, you do**not** need to manually define the wrapper/content divs in your template, nor do you write JavaScript.
Simply attribute the `` 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 `` element. In the standard PHP template, you can control this by defining a `$body_attr` variable before `base.php` is included.
**Basic Example**
```php theme={null}
// 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:**
```html theme={null}
```
**Parallax Attributes**
With `effects: true` active, simply drop these attributes onto any element within the smoothed container:
```html theme={null}
Fast Layer
Slow Layer
Trailing Object
```
**Options**
Pass standard ScrollSmoother parameters dynamically through the string configuration.
| Option | Type | Default | Description |
| ------------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| `smooth` | `number` | `1.5` | The delay time (in seconds) it takes the container to catch up to the native scroll position. |
| `effects` | `boolean` | `true` | Scans the DOM for `data-speed` and `data-lag` attributes to enable instant automatic parallax. |
| `smoothTouch` | `number` \| `boolean` | `0.1` | Allows smoothing on touch devices (keep this extremely low if enabled). |
## ScrollTrigger
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.
```html theme={null}
Content fades up when it enters the viewport.
```
If you need a specific starting offset, provide `start`. The default is `top 85%`.
```html theme={null}
Triggers when the top of the element hits 70% down the screen.
```
**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.
```html theme={null}
Scrubbing box
```
**Pinning Sections**
Great for locking a section in place while interior items transition.
```html theme={null}
Zooming hero title
```
**Options Reference**
*Child `data-gsap="scroll: true"` options*
| Option | Type | Default | Description |
| --------------- | ------- | ----------------------- | -------------------------------------------------------------- |
| `scroll` | boolean | `false` | Instructs the element to wait until it is in viewport to fire. |
| `start` | string | `'top 85%'` | ScrollTrigger start position. |
| `toggleActions` | string | `'play none none none'` | Playback logic (`onEnter`, `onLeave`, etc.) |
*Parent `data-gsap-scroll` options*
| Option | Type | Default | Description |
| ------------ | ----------------- | ----------------- | ------------------------------------------------------------------------------------------ |
| `scrub` | boolean \| number | `false` | Ties the animation timeline natively to the scrollbar. Numbers add inertia-lag (e.g. `1`). |
| `pin` | boolean | `false` | Locks the element block in space vertically. |
| `start` | string | `'top center'` | Custom trigger start position. |
| `end` | string | `'bottom center'` | Custom trigger ending position. Crucial for determining how long a pin lasts. |
| `pinSpacing` | boolean | `true` | Usually pads the DOM to respect the pinned distance. |
## ScrollTo
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**
```html theme={null}
Skip to About
...
```
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 Variable | Type | Default | Reason |
| ---------------- | ------- | ---------------- | ---------------------------------------------------------------------------- |
| `duration` | numeric | `1.5` | How quickly the window scrolls to the target. |
| `ease` | string | `'power4.inOut'` | The easing curve applied to the scroll transition. |
| `offsetY` | integer | `0` | Automatically offset the final scroll position to account for fixed headers. |
## SplitText
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 `` or ``). Plain text headings or semantic `
**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 `
`
**Split by Character**
```html theme={null}
Motion Scroll
```
**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.
```html theme={null}
A declarative powerhouse capable of converting complex nested string logic into unified DOM components without JavaScript manipulation hooks.
```
**Internal Options Overrides**
| Option | Type | Default | Description |
| ------------- | ------------- | --------------- | --------------------------------------------------------------------------- |
| `type` | string | `'words,lines'` | Which elements SplitText targets syntactically (`chars`, `words`, `lines`). |
| `from` / `to` | nested string | `undefined` | Maps transition targets directly dynamically. |
| `stagger` | number | `0.05` | Dictates sequential delay logic natively. |
## Typewriter
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.
```html theme={null}
```
**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 Option | Type | Example | Description |
| ------------- | ------- | ----------------- | ------------------------------------------------------------------------------------------ |
| `value` | string | `'System Online'` | The full target string meant to append internally cleanly gracefully natively. |
| `delimiter` | string | `''` | Controls substring segmentation spacing natively cleanly natively natively. |
| `padSpace` | boolean | `true` | Prevents rapid layout shifts mechanically over block-rendering layout structures natively. |
## DrawSVG
Squeditor natively bundles GSAP's robust `DrawSVGPlugin` to animate vector outline strokes smoothly. Use the targeted\*\*`data-gsap-draw`\*\* attribute on any generic ``, ``, ``, ``, or `` 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**
```html theme={null}
```
\*\*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.
```html theme={null}
```
**Options Configuration**
| Option | Type | Default | Description |
| --------- | -------------- | -------- | -------------------------------------------------------------- |
| `drawSVG` | numeric string | `'100%'` | Define precise path logic ranges (`'0% 50%'`, `'20 80'`). |
| `scroll` | boolean | `false` | Instructs the path to wait out viewport proximity organically. |
## MorphSVG
Squeditor natively bundles the `MorphSVG` framework. Utilizing the custom string parser, any standard `` 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**
```html theme={null}
```
MorphSVG natively only functions on raw `` components. To morph basic geometry logic (``, ``, etc.), utilize the `convertToPath` utility or explicitly code the vectors manually as `` curves beforehand.
**Options**
Standard GSAP vars are seamlessly inherited. Only target raw paths on raw paths.
| Option | Type | Default | Description |
| ------------ | ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
| `morphSVG` | string | `undefined` | Must target an existing DOM node that contains the intended destination ``. |
| `shapeIndex` | string \| number | `'auto'` | Shifts starting point mappings natively to prevent chaotic vector twisting. Set mathematically, or utilize `'auto'`. |
| `type` | string | `'linear'` | If vectors must twist cleanly naturally instead of direct morphing, set this string explicitly to `'rotational'`. |