gclass-anims 1.0.0-beta.13 → 1.0.0-beta.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AnimToggle.js +1 -1
- package/Animations.js +14 -14
- package/CHANGELOG.md +9 -9
- package/Config.js +6 -6
- package/LICENSE +182 -20
- package/Listeners.js +14 -14
- package/README.md +3 -3
- package/index.d.ts +1 -1
- package/package.json +3 -3
package/AnimToggle.js
CHANGED
|
@@ -44,7 +44,7 @@ function readReducedOverride() {
|
|
|
44
44
|
// - Otherwise, if the user HAS an explicit stored choice, respect it
|
|
45
45
|
// (override wins), even under reduced motion.
|
|
46
46
|
// - Otherwise (no stored value) fall back to the default, which is ON unless
|
|
47
|
-
// reduced motion is detected
|
|
47
|
+
// reduced motion is detected - in which case animations are off.
|
|
48
48
|
function getEnabled() {
|
|
49
49
|
if (forcedReduced) return false
|
|
50
50
|
return stored === null ? !reduced : stored
|
package/Animations.js
CHANGED
|
@@ -35,7 +35,7 @@ export const finalOpacity = (target) => {
|
|
|
35
35
|
// TextPlugin tweens take their endpoints from the LIVE DOM: the `.typewriter`
|
|
36
36
|
// play callbacks pass `el.innerHTML` as the text to type. The tween's from
|
|
37
37
|
// state ("") is applied the instant the tween is created, and a teardown that
|
|
38
|
-
// kills the tween mid-flight leaves that wiped state behind
|
|
38
|
+
// kills the tween mid-flight leaves that wiped state behind - so a later
|
|
39
39
|
// engine re-init reading `el.innerHTML` again would type an empty (or
|
|
40
40
|
// partially-typed) string forever. Stash the full HTML on first sight and
|
|
41
41
|
// reuse it. The stash only refreshes from SETTLED content: never while a
|
|
@@ -111,7 +111,7 @@ export function spawnBlur (target , delay , dur , ease){
|
|
|
111
111
|
// right - hidden on the left, wipes open rightward (left -> right)
|
|
112
112
|
// The `from` inset is mirrored in the Config entry so
|
|
113
113
|
// `.scroll`/`.scroll-progress`/`.leave` reversal and `.appear` all know the
|
|
114
|
-
// hidden state. No opacity is involved
|
|
114
|
+
// hidden state. No opacity is involved - pure clip wipe.
|
|
115
115
|
const CLIP_FROM = {
|
|
116
116
|
up: "inset(0% 0% 100% 0%)",
|
|
117
117
|
down: "inset(100% 0% 0% 0%)",
|
|
@@ -123,13 +123,13 @@ export function spawnClipReveal (target , delay , dur , ease , dir = "up"){
|
|
|
123
123
|
return gsap.fromTo(target , {clipPath: from} , {clipPath:"inset(0% 0% 0% 0%)" , ease:easeOf(ease) , duration:dur , delay:delay})
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
// Curtain reveal: opens outward from the horizontal centre
|
|
126
|
+
// Curtain reveal: opens outward from the horizontal centre - a vertical slit in
|
|
127
127
|
// the middle widens left and right until the whole box is shown.
|
|
128
128
|
export function curtainHorizontal (target , delay , dur , ease){
|
|
129
129
|
return gsap.fromTo(target , {clipPath:"inset(0% 50% 0% 50%)"} , {clipPath:"inset(0% 0% 0% 0%)" , ease:easeOf(ease) , duration:dur , delay:delay})
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
// Curtain reveal: opens outward from the vertical centre
|
|
132
|
+
// Curtain reveal: opens outward from the vertical centre - a horizontal slit in
|
|
133
133
|
// the middle widens up and down until the whole box is shown.
|
|
134
134
|
export function curtainVertical (target , delay , dur , ease){
|
|
135
135
|
return gsap.fromTo(target , {clipPath:"inset(50% 0% 50% 0%)"} , {clipPath:"inset(0% 0% 0% 0%)" , ease:easeOf(ease) , duration:dur , delay:delay})
|
|
@@ -235,7 +235,7 @@ const fillEaseOf = (el , fallbackEase) => {
|
|
|
235
235
|
return m ? m.slice("fill-ease-".length) : fallbackEase
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
-
// Stroke-draw reveal (strokes only
|
|
238
|
+
// Stroke-draw reveal (strokes only - filled SVGs are deliberately out of
|
|
239
239
|
// scope for now). Explicit fromTo endpoints so the animation's hidden state
|
|
240
240
|
// matches this class's Config `from` metadata exactly: `.scroll-progress`
|
|
241
241
|
// scrubs between those two values and `.leave`/`.scroll` reversal tweens back
|
|
@@ -267,7 +267,7 @@ export function drawsvg (target , delay , dur , ease){
|
|
|
267
267
|
// separate paths draw correctly. Adapted from the official DrawSVGPlugin
|
|
268
268
|
// helper, with one addition: splitting REPLACES the source path in the DOM,
|
|
269
269
|
// so the result is cached on that element and reused while the segments are
|
|
270
|
-
// still live
|
|
270
|
+
// still live - an engine re-init (StrictMode remount, route change) must not
|
|
271
271
|
// churn the DOM a second time. Attributes are copied verbatim; filled SVGs
|
|
272
272
|
// are simply untouched territory for now.
|
|
273
273
|
export function splitPaths (paths){
|
|
@@ -288,7 +288,7 @@ export function splitPaths (paths){
|
|
|
288
288
|
let i = attributes.length
|
|
289
289
|
while (i--) {
|
|
290
290
|
const attr = attributes[i]
|
|
291
|
-
// Don't copy GSAP wiring or appear/scroll triggers
|
|
291
|
+
// Don't copy GSAP wiring or appear/scroll triggers - children are
|
|
292
292
|
// animated via the returned timeline, not as independent spawns.
|
|
293
293
|
// Copying "appear" caused appearObserver → split → appear loop.
|
|
294
294
|
if (attr.nodeName === "class") {
|
|
@@ -352,7 +352,7 @@ export function drawsvgSplit (target , delay , dur , ease){
|
|
|
352
352
|
|
|
353
353
|
// Scramble plumbing. Only the element's TOP-LEVEL TEXT runs are scrambled:
|
|
354
354
|
// each run is wrapped in its own span and tweened separately, while real child
|
|
355
|
-
// elements (links, icons, ...) are left completely untouched
|
|
355
|
+
// elements (links, icons, ...) are left completely untouched - their markup
|
|
356
356
|
// survives the animation intact. Wraps are cached on the element so replays
|
|
357
357
|
// (engine re-inits, .appear re-triggers) reuse the same spans instead of
|
|
358
358
|
// churning the DOM.
|
|
@@ -412,7 +412,7 @@ export function scrambleVars (target){
|
|
|
412
412
|
}
|
|
413
413
|
|
|
414
414
|
// Scramble spawn: the text starts empty and resolves into the real content
|
|
415
|
-
// through garbage characters
|
|
415
|
+
// through garbage characters - no opacity involved, the scramble IS the
|
|
416
416
|
// reveal. Unlike typewriter there is no opacity fade to hide behind, so the
|
|
417
417
|
// package default "back" ease would visually finish at ~36% of `dur` (back.out
|
|
418
418
|
// crosses ~99% early and the reveal index clamps): unless an explicit ease-*
|
|
@@ -537,7 +537,7 @@ export function shake (delay , target , amount , dur , ease){
|
|
|
537
537
|
export function bell (delay , target , amount , dur , ease){
|
|
538
538
|
const tl = gsap.timeline()
|
|
539
539
|
tl.set(target , {transformOrigin : "50% 0%"})
|
|
540
|
-
// A quick toll that overshoots and damps down
|
|
540
|
+
// A quick toll that overshoots and damps down - reads as a physical strike
|
|
541
541
|
// instead of a symmetrical wiggle.
|
|
542
542
|
.to(target , {rotate:amount , duration:dur * 0.12 , ease:"power2.out"})
|
|
543
543
|
.to(target , {rotate:-amount * 0.7, duration:dur * 0.18 , ease:"power2.inOut"})
|
|
@@ -592,7 +592,7 @@ export function radiate (delay , target , amount , dur , ease , zIndex){
|
|
|
592
592
|
window.addEventListener("scroll", schedule, { passive: true })
|
|
593
593
|
window.addEventListener("resize", schedule, { passive: true })
|
|
594
594
|
// Killing the tween (teardown, hover/click rebuilds) must clean up exactly
|
|
595
|
-
// like natural completion
|
|
595
|
+
// like natural completion - otherwise clones + listeners leak.
|
|
596
596
|
const cleanup = () => {
|
|
597
597
|
clone.remove()
|
|
598
598
|
window.removeEventListener("scroll", schedule)
|
|
@@ -627,7 +627,7 @@ export function marquee (target , dir , duration , xOffset = 0 , yOffset = 0 , n
|
|
|
627
627
|
const horizontal = dir === "left" || dir === "right"
|
|
628
628
|
// Anchor the track to the top-left corner so its two identical copies tile
|
|
629
629
|
// the container exactly. The track is positioned absolutely, out of the
|
|
630
|
-
// container's flex layout
|
|
630
|
+
// container's flex layout - otherwise a `justify-center` (or any alignment)
|
|
631
631
|
// on the container centers the overflowing track and shifts the tile seam,
|
|
632
632
|
// which opens a gap on the trailing edge at some point in the loop.
|
|
633
633
|
target.style.position = "relative"
|
|
@@ -635,7 +635,7 @@ export function marquee (target , dir , duration , xOffset = 0 , yOffset = 0 , n
|
|
|
635
635
|
|
|
636
636
|
// Rebuilds over the SAME element (engine restarts, StrictMode remounts)
|
|
637
637
|
// must reuse the existing track. Re-creating it would swallow the old
|
|
638
|
-
// absolute track as the first "child", repeat THAT as the tiling unit
|
|
638
|
+
// absolute track as the first "child", repeat THAT as the tiling unit -
|
|
639
639
|
// every copy stacks at the same offset and scrollWidth collapses.
|
|
640
640
|
let track = target._gcTrack
|
|
641
641
|
if (!track || !track.isConnected) {
|
|
@@ -668,7 +668,7 @@ export function marquee (target , dir , duration , xOffset = 0 , yOffset = 0 , n
|
|
|
668
668
|
const unitSize = horizontal ? measurer.scrollWidth : measurer.scrollHeight
|
|
669
669
|
measurer.remove()
|
|
670
670
|
|
|
671
|
-
// Nothing to tile (empty content)
|
|
671
|
+
// Nothing to tile (empty content) - return an inert tween rather than one
|
|
672
672
|
// dividing by a zero-width unit.
|
|
673
673
|
if (!unitSize) return gsap.fromTo(track, {}, { duration: 0 })
|
|
674
674
|
|
package/CHANGELOG.md
CHANGED
|
@@ -7,21 +7,21 @@ All notable changes to `gclass-anims` will be documented in this file.
|
|
|
7
7
|
|
|
8
8
|
## [1.0.0-beta.12] - 2026-08-26
|
|
9
9
|
|
|
10
|
-
- Fixed `scramble` with `scroll-progress` throwing `can't convert undefined to object`
|
|
10
|
+
- Fixed `scramble` with `scroll-progress` throwing `can't convert undefined to object` - `computeTo` (`Listeners.js:424`) and scrub `to` builder (`Listeners.js:867`) now guard `from` (`scramble` has no `from`).
|
|
11
11
|
|
|
12
12
|
## [1.0.0-beta.11] - 2026-08-26
|
|
13
13
|
|
|
14
|
-
- Fixed `.draw-split` infinite loop when paired with `.appear`
|
|
14
|
+
- Fixed `.draw-split` infinite loop when paired with `.appear` - `splitPaths` (`Animations.js:244`) now strips `appear`/`scroll`/`scroll-progress`/`draw`/`draw-split`/`data-gsap-*` from cloned segments, marks children with `data-gsap-split` + `contain:paint`/`will-change:transform` isolation, and prevents `appearObserver` (`Listeners.js:1559`) re-triggering. Also isolated `draw-split` demos in docs.
|
|
15
15
|
|
|
16
16
|
## [1.0.0-beta.10] - 2026-08-26
|
|
17
17
|
|
|
18
|
-
- Added `.randomize-<prop>-[min]-[max]`
|
|
19
|
-
- Added `.draw`
|
|
20
|
-
- Added `.draw-split`
|
|
21
|
-
- Added `.scramble`
|
|
22
|
-
- Added `.scramble-all`
|
|
23
|
-
- Added `.scroll-frame`
|
|
24
|
-
- Fixed `spawn-text-*` (SplitText) not working correctly on flex containers
|
|
18
|
+
- Added `.randomize-<prop>-[min]-[max]` - randomize spawn start values per element (e.g. `randomize-rotation-[-90]-[90]`, `randomize-x-[-40]-[40]`). Re-rolls on every replay (`.scroll` re-enter, `.appear`).
|
|
19
|
+
- Added `.draw` - stroke-draw reveal for SVG paths using DrawSVGPlugin (`drawSVG: 0% → 100%`).
|
|
20
|
+
- Added `.draw-split` - draws multi-segment SVG paths sequentially at constant pen speed (splits paths with multiple `M` commands into individual strokes).
|
|
21
|
+
- Added `.scramble` - text resolves from empty through scrambled characters into real content (ScrambleTextPlugin). Supports `.reveal-delay-N`, `.chars-[...]`, `.amount-N`, `.scramble-rtl`.
|
|
22
|
+
- Added `.scramble-all` - variant of scramble with no empty start; the finished string flips to garbage as a whole then sweeps back.
|
|
23
|
+
- Added `.scroll-frame` - use a scrollable container as the ScrollTrigger scroller for nested `.scroll` / `.scroll-progress` elements (innermost `.scroll-frame` ancestor wins).
|
|
24
|
+
- Fixed `spawn-text-*` (SplitText) not working correctly on flex containers - text runs are now wrapped in block containers before splitting to preserve flex layout, spacing, and line grouping.
|
|
25
25
|
|
|
26
26
|
## [1.0.0-beta.9] - Previous release
|
|
27
27
|
|
package/Config.js
CHANGED
|
@@ -8,11 +8,11 @@ import {
|
|
|
8
8
|
} from './Animations.js'
|
|
9
9
|
|
|
10
10
|
// ---------------------------------------------------------------------------
|
|
11
|
-
// GClass configuration
|
|
11
|
+
// GClass configuration - THE single place to add / remove / tweak animations.
|
|
12
12
|
//
|
|
13
13
|
// `animations` is an array of entries. Each entry is a plain object; the engine
|
|
14
14
|
// inspects which fields are present and wires up the matching behaviour
|
|
15
|
-
// automatically
|
|
15
|
+
// automatically - no engine edits needed:
|
|
16
16
|
//
|
|
17
17
|
// sel - the className you put on elements (e.g. ".spawn-up")
|
|
18
18
|
//
|
|
@@ -98,10 +98,10 @@ export const animations = [
|
|
|
98
98
|
{ sel: ".typewriter-split", typewriter: true, typewriterSplit: true, from: { opacity: 0 }, play: (el, delay, dur, ease) => null },
|
|
99
99
|
|
|
100
100
|
// Scramble reveal: the text resolves out of garbage characters (ScrambleText).
|
|
101
|
-
// No opacity change
|
|
101
|
+
// No opacity change - the scramble IS the spawn. Only the element's own text
|
|
102
102
|
// runs animate; nested elements (links, icons) are preserved untouched.
|
|
103
103
|
// Deliberately NO `from`: the scramble manages its own DOM (segment spans),
|
|
104
|
-
// so the generic TextPlugin-based reversal would destroy it
|
|
104
|
+
// so the generic TextPlugin-based reversal would destroy it - `.scroll`
|
|
105
105
|
// exit simply freezes the revealed state and re-entry replays fresh.
|
|
106
106
|
// `scramble: true` gives `.scroll-progress` a true scrub branch (like
|
|
107
107
|
// `.count`), since the generic from/to scrub can't express a text tween.
|
|
@@ -119,7 +119,7 @@ export const animations = [
|
|
|
119
119
|
// Custom-function animation: counts from the `.spawn-num-N` value (N = the
|
|
120
120
|
// starting number) up to whatever number is in the element (falling back to 0
|
|
121
121
|
// when no `.spawn-num-N` class is present). `play` just wraps a helper from
|
|
122
|
-
// Animations.js
|
|
122
|
+
// Animations.js - nothing else is special, so it still gets
|
|
123
123
|
// order/scroll/leave/appear automatically.
|
|
124
124
|
{ sel: ".count", count: true, text: false, from: { opacity: 0 }, play: (el, delay, dur, ease) => countUp(el, delay, dur, ease) },
|
|
125
125
|
|
|
@@ -136,7 +136,7 @@ export const animations = [
|
|
|
136
136
|
{ sel: ".curtain-horizontal", text: false, from: { clipPath: "inset(0% 50% 0% 50%)" }, play: (el, delay, dur, ease) => curtainHorizontal(el, delay, dur, ease) },
|
|
137
137
|
{ sel: ".curtain-vertical", text: false, from: { clipPath: "inset(50% 0% 50% 0%)" }, play: (el, delay, dur, ease) => curtainVertical(el, delay, dur, ease) },
|
|
138
138
|
|
|
139
|
-
// Stroke-draw reveals (strokes only
|
|
139
|
+
// Stroke-draw reveals (strokes only - filled SVGs are a separate plan).
|
|
140
140
|
// The hidden state is a fully undrawn stroke (`drawSVG: "0%"`): that's what
|
|
141
141
|
// `.scroll-progress` scrubs up from and what leave/scroll reversal returns
|
|
142
142
|
// to. `.draw` animates its target(s) as one stroke; `.draw-split` first
|
package/LICENSE
CHANGED
|
@@ -1,35 +1,197 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
gclass-anims - A Tailwind-style utility layer on top of GSAP
|
|
3
2
|
Copyright (c) 2026 Saturn-sepehr
|
|
3
|
+
SPDX-License-Identifier: LGPL-3.0-only
|
|
4
|
+
|
|
5
|
+
This program is free software: you can redistribute it and/or modify
|
|
6
|
+
it under the terms of the GNU Lesser General Public License as published by
|
|
7
|
+
the Free Software Foundation, version 3 of the License.
|
|
8
|
+
|
|
9
|
+
This program is distributed in the hope that it will be useful,
|
|
10
|
+
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
11
|
+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
12
|
+
GNU Lesser General Public License for more details.
|
|
13
|
+
|
|
14
|
+
You should have received a copy of the GNU Lesser General Public License
|
|
15
|
+
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
GNU LESSER GENERAL PUBLIC LICENSE
|
|
20
|
+
Version 3, 29 June 2007
|
|
21
|
+
|
|
22
|
+
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
|
23
|
+
Everyone is permitted to copy and distribute verbatim copies
|
|
24
|
+
of this license document, but changing it is not allowed.
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
This version of the GNU Lesser General Public License incorporates
|
|
28
|
+
the terms and conditions of version 3 of the GNU General Public
|
|
29
|
+
License, supplemented by the additional permissions listed below.
|
|
30
|
+
|
|
31
|
+
0. Additional Definitions.
|
|
32
|
+
|
|
33
|
+
As used herein, "this License" refers to version 3 of the GNU Lesser
|
|
34
|
+
General Public License, and the "GNU GPL" refers to version 3 of the GNU
|
|
35
|
+
General Public License.
|
|
36
|
+
|
|
37
|
+
"The Library" refers to a covered work governed by this License,
|
|
38
|
+
other than an Application or a Combined Work as defined below.
|
|
39
|
+
|
|
40
|
+
An "Application" is any work that makes use of an interface provided
|
|
41
|
+
by the Library, but which is not otherwise based on the Library.
|
|
42
|
+
Defining a subclass of a class defined by the Library is deemed a mode
|
|
43
|
+
of using an interface provided by the Library.
|
|
44
|
+
|
|
45
|
+
A "Combined Work" is a work produced by combining or linking an
|
|
46
|
+
Application with the Library. The particular version of the Library
|
|
47
|
+
with which the Combined Work was made is also called the "Linked
|
|
48
|
+
Version".
|
|
49
|
+
|
|
50
|
+
The "Minimal Corresponding Source" for a Combined Work means the
|
|
51
|
+
Corresponding Source for the Combined Work, excluding any source code
|
|
52
|
+
for portions of the Combined Work that, considered in isolation, are
|
|
53
|
+
based on the Application, and not on the Linked Version.
|
|
54
|
+
|
|
55
|
+
The "Corresponding Application Code" for a Combined Work means the
|
|
56
|
+
object code and/or source code for the Application, including any data
|
|
57
|
+
and utility programs needed for reproducing the Combined Work from the
|
|
58
|
+
Application, but excluding the System Libraries of the Combined Work.
|
|
59
|
+
|
|
60
|
+
1. Exception to Section 3 of the GNU GPL.
|
|
61
|
+
|
|
62
|
+
You may convey a covered work under sections 3 and 4 of this License
|
|
63
|
+
without being bound by section 3 of the GNU GPL.
|
|
64
|
+
|
|
65
|
+
2. Conveying Modified Versions.
|
|
66
|
+
|
|
67
|
+
If you modify a copy of the Library, and, in your modifications, a
|
|
68
|
+
facility refers to a function or data to be supplied by an Application
|
|
69
|
+
that uses the facility (other than as an argument passed when the
|
|
70
|
+
facility is invoked), then you may convey a copy of the modified
|
|
71
|
+
version:
|
|
72
|
+
|
|
73
|
+
a) under this License, provided that you make a good faith effort to
|
|
74
|
+
ensure that, in the event an Application does not supply the
|
|
75
|
+
function or data, the facility still operates, and performs
|
|
76
|
+
whatever part of its purpose remains meaningful, or
|
|
77
|
+
|
|
78
|
+
b) under the GNU GPL, with none of the additional permissions of
|
|
79
|
+
this License applicable to that copy.
|
|
80
|
+
|
|
81
|
+
3. Object Code Incorporating Material from Library Header Files.
|
|
82
|
+
|
|
83
|
+
The object code form of an Application may incorporate material from
|
|
84
|
+
a header file that is part of the Library. You may convey such object
|
|
85
|
+
code under terms of your choice, provided that, if the incorporated
|
|
86
|
+
material is not limited to numerical parameters, data structure
|
|
87
|
+
layouts and accessors, or small macros, inline functions and templates
|
|
88
|
+
(ten or fewer lines in length), you do both of the following:
|
|
89
|
+
|
|
90
|
+
a) Give prominent notice with each copy of the object code that the
|
|
91
|
+
Library is used in it and that the Library and its use are
|
|
92
|
+
covered by this License.
|
|
93
|
+
|
|
94
|
+
b) Accompany the object code with a copy of the GNU GPL and this license
|
|
95
|
+
document.
|
|
96
|
+
|
|
97
|
+
4. Combined Works.
|
|
98
|
+
|
|
99
|
+
You may convey a Combined Work under terms of your choice that,
|
|
100
|
+
taken together, effectively do not restrict modification of the
|
|
101
|
+
portions of the Library contained in the Combined Work and reverse
|
|
102
|
+
engineering for debugging such modifications, if you also do each of
|
|
103
|
+
the following:
|
|
104
|
+
|
|
105
|
+
a) Give prominent notice with each copy of the Combined Work that
|
|
106
|
+
the Library is used in it and that the Library and its use are
|
|
107
|
+
covered by this License.
|
|
108
|
+
|
|
109
|
+
b) Accompany the Combined Work with a copy of the GNU GPL and this license
|
|
110
|
+
document.
|
|
111
|
+
|
|
112
|
+
c) For a Combined Work that displays copyright notices during
|
|
113
|
+
execution, include the copyright notice for the Library among
|
|
114
|
+
these notices, as well as a reference directing the user to the
|
|
115
|
+
copies of the GNU GPL and this license document.
|
|
116
|
+
|
|
117
|
+
d) Do one of the following:
|
|
118
|
+
|
|
119
|
+
0) Convey the Minimal Corresponding Source under the terms of this
|
|
120
|
+
License, and the Corresponding Application Code in a form
|
|
121
|
+
suitable for, and under terms that permit, the user to
|
|
122
|
+
recombine or relink the Application with a modified version of
|
|
123
|
+
the Linked Version to produce a modified Combined Work, in the
|
|
124
|
+
manner specified by section 6 of the GNU GPL for conveying
|
|
125
|
+
Corresponding Source.
|
|
126
|
+
|
|
127
|
+
1) Use a suitable shared library mechanism for linking with the
|
|
128
|
+
Library. A suitable mechanism is one that (a) uses at run time
|
|
129
|
+
a copy of the Library already present on the user's computer
|
|
130
|
+
system, and (b) will operate properly with a modified version
|
|
131
|
+
of the Library that is interface-compatible with the Linked
|
|
132
|
+
Version.
|
|
133
|
+
|
|
134
|
+
e) Provide Installation Information, but only if you would otherwise
|
|
135
|
+
be required to provide such information under section 6 of the
|
|
136
|
+
GNU GPL, and only to the extent that such information is
|
|
137
|
+
necessary to install and execute a modified version of the
|
|
138
|
+
Combined Work produced by recombining or relinking the
|
|
139
|
+
Application with a modified version of the Linked Version. (If
|
|
140
|
+
you use option 4d0, the Installation Information must accompany
|
|
141
|
+
the Minimal Corresponding Source and Corresponding Application
|
|
142
|
+
Code. If you use option 4d1, you must provide the Installation
|
|
143
|
+
Information in the manner specified by section 6 of the GNU GPL
|
|
144
|
+
for conveying Corresponding Source.)
|
|
145
|
+
|
|
146
|
+
5. Combined Libraries.
|
|
147
|
+
|
|
148
|
+
You may place library facilities that are a work based on the
|
|
149
|
+
Library side by side in a single library together with other library
|
|
150
|
+
facilities that are not Applications and are not covered by this
|
|
151
|
+
License, and convey such a combined library under terms of your
|
|
152
|
+
choice, if you do both of the following:
|
|
153
|
+
|
|
154
|
+
a) Accompany the combined library with a copy of the same work based
|
|
155
|
+
on the Library, uncombined with any other library facilities,
|
|
156
|
+
conveyed under the terms of this License.
|
|
157
|
+
|
|
158
|
+
b) Give prominent notice with the combined library that part of it
|
|
159
|
+
is a work based on the Library, and explaining where to find the
|
|
160
|
+
accompanying uncombined form of the same work.
|
|
161
|
+
|
|
162
|
+
6. Revised Versions of the GNU Lesser General Public License.
|
|
4
163
|
|
|
5
|
-
|
|
6
|
-
of
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
164
|
+
The Free Software Foundation may publish revised and/or new versions
|
|
165
|
+
of the GNU Lesser General Public License from time to time. Such new
|
|
166
|
+
versions will be similar in spirit to the present version, but may
|
|
167
|
+
differ in detail to address new problems or concerns.
|
|
11
168
|
|
|
12
|
-
|
|
13
|
-
|
|
169
|
+
Each version is given a distinguishing version number. If the
|
|
170
|
+
Library as you received it specifies that a certain numbered version
|
|
171
|
+
of the GNU Lesser General Public License "or any later version"
|
|
172
|
+
applies to it, you have the option of following the terms and
|
|
173
|
+
conditions either of that published version or of any later version
|
|
174
|
+
published by the Free Software Foundation. If the Library as you
|
|
175
|
+
received it does not specify a version number of the GNU Lesser
|
|
176
|
+
General Public License, you may choose any version of the GNU Lesser
|
|
177
|
+
General Public License ever published by the Free Software Foundation.
|
|
14
178
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
179
|
+
If the Library as you received it specifies that a proxy can decide
|
|
180
|
+
whether future versions of the GNU Lesser General Public License shall
|
|
181
|
+
apply, that proxy's public statement of acceptance of any version is
|
|
182
|
+
permanent authorization for you to choose that version for the
|
|
183
|
+
Library.
|
|
22
184
|
|
|
23
185
|
---
|
|
24
186
|
|
|
25
187
|
Third-party notice
|
|
26
188
|
|
|
27
189
|
This project depends on GSAP (GreenSock Animation Platform), which is NOT
|
|
28
|
-
covered by the
|
|
190
|
+
covered by the LGPL-3.0 above and is distributed separately.
|
|
29
191
|
|
|
30
192
|
GSAP is used under the Webflow Standard No-Charge GSAP License and is installed
|
|
31
193
|
as a dependency from npm. GSAP remains the property of Webflow, Inc. / GreenSock
|
|
32
|
-
and is subject to its own license terms, which take precedence over this
|
|
194
|
+
and is subject to its own license terms, which take precedence over this LGPL-3.0
|
|
33
195
|
license with respect to GSAP itself.
|
|
34
196
|
|
|
35
|
-
See https://gsap.com/standard-license/ for the applicable GSAP terms.
|
|
197
|
+
See https://gsap.com/standard-license/ for the applicable GSAP terms.
|
package/Listeners.js
CHANGED
|
@@ -35,7 +35,7 @@ export function resolveHandler(name) {
|
|
|
35
35
|
// to the FROM state of spawn tweens, so each element enters from its own pose.
|
|
36
36
|
// GSAP evaluates function values on tween BUILD, and the engine always kills +
|
|
37
37
|
// rebuilds tweens on replay (.scroll re-enter, .appear re-insert), so every
|
|
38
|
-
// replay re-rolls automatically
|
|
38
|
+
// replay re-rolls automatically - no invalidate/repeatRefresh bookkeeping.
|
|
39
39
|
//
|
|
40
40
|
// The class is the guard: hasRandom() is a cheap className probe and nothing
|
|
41
41
|
// below allocates or patches anything unless it passes, so elements without
|
|
@@ -50,7 +50,7 @@ export function resolveHandler(name) {
|
|
|
50
50
|
// tweens back to rest instead of sticking at the rolled value.
|
|
51
51
|
// • Timeline-mediated builders (count/scramble/draw-split) construct via
|
|
52
52
|
// Timeline methods, not the exported gsap.fromTo, so they sit outside the
|
|
53
|
-
// injection
|
|
53
|
+
// injection - irrelevant in practice, since their props aren't randomize
|
|
54
54
|
// targets.
|
|
55
55
|
const RANDOMIZE_RE = /^randomize-(\w+)-\[(-?[\d.]+)\]-\[(-?[\d.]+)\]$/
|
|
56
56
|
const hasRandom = (el) => typeof el.className === "string" && /\brandomize-/.test(el.className)
|
|
@@ -76,7 +76,7 @@ const randomEnds = (keys) => Object.fromEntries(keys.map((k) => [
|
|
|
76
76
|
// values into every from-state the config builds. Config helpers hardcode
|
|
77
77
|
// their from literals inside Animations.js, so the injection hooks the only
|
|
78
78
|
// interception point available: play() builds its tweens SYNCHRONOUSLY, which
|
|
79
|
-
// makes a scoped gsap.fromTo swap safe
|
|
79
|
+
// makes a scoped gsap.fromTo swap safe - patch, let the config construct,
|
|
80
80
|
// restore in finally{}. Without .randomize-* this is a bare passthrough.
|
|
81
81
|
const invokePlay = (config, el, delay, dur, ease) => {
|
|
82
82
|
if (!hasRandom(el)) return config.play(el, delay, dur, ease)
|
|
@@ -128,7 +128,7 @@ export default function initListeners() {
|
|
|
128
128
|
// say) still gets tagged when one of its children animates.
|
|
129
129
|
// • Suppression requires the element ITSELF to carry data-gsap-wired
|
|
130
130
|
// (set when a previous run animated it). Freshly mounted content
|
|
131
|
-
// under a preserved root therefore still plays its entrance
|
|
131
|
+
// under a preserved root therefore still plays its entrance - only
|
|
132
132
|
// DOM that survived from an earlier run stays frozen.
|
|
133
133
|
const isPreserved = (el) => {
|
|
134
134
|
if (!el.dataset.gsapWired) return false
|
|
@@ -207,7 +207,7 @@ export default function initListeners() {
|
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
// Capture the element's first (resting) bounds. A later layout change
|
|
210
|
-
// morphs from this snapshot to the live position
|
|
210
|
+
// morphs from this snapshot to the live position - a vanilla FLIP.
|
|
211
211
|
const captureFlip = (node) => {
|
|
212
212
|
if (!node.classList?.contains("flip")) return
|
|
213
213
|
const config = findSpawn(node)
|
|
@@ -466,8 +466,8 @@ export default function initListeners() {
|
|
|
466
466
|
// whitespace) must not become tween targets; they are kept as inert text
|
|
467
467
|
// nodes so the natural gap is preserved and never animated.
|
|
468
468
|
const RTL_JOIN_BREAK = /[\u200C\u200D\s]/
|
|
469
|
-
// A real Arabic/Persian joining letter. Any other visible character
|
|
470
|
-
// Latin, digits, punctuation (، ؟ ؛ . ! …)
|
|
469
|
+
// A real Arabic/Persian joining letter. Any other visible character -
|
|
470
|
+
// Latin, digits, punctuation (، ؟ ؛ . ! …) - is NOT a joining letter: it
|
|
471
471
|
// must not give the preceding letter a trailing Zero-Width-Joiner (which
|
|
472
472
|
// would render it in its connecting form instead of its correct END form),
|
|
473
473
|
// but it should still be split into its own span so it animates too.
|
|
@@ -560,7 +560,7 @@ export default function initListeners() {
|
|
|
560
560
|
// flex ITEMS, so justify-content/gap would apply per letter, whitespace-
|
|
561
561
|
// only text nodes stop rendering (spaces vanish) and line grouping reads
|
|
562
562
|
// garbage. Loose text runs are therefore pre-wrapped in plain block
|
|
563
|
-
// divs
|
|
563
|
+
// divs - real boxes with normal inline flow inside - and the wrappers
|
|
564
564
|
// are undone whenever the split reverts. Non-text children (icons etc.)
|
|
565
565
|
// stay put, keeping their own flex-item status and the gaps around them.
|
|
566
566
|
const wrapFlexTarget = (el) => {
|
|
@@ -644,7 +644,7 @@ export default function initListeners() {
|
|
|
644
644
|
// FULL reveal (first part starting to last part finishing) takes X
|
|
645
645
|
// seconds, no matter how many chars/words/lines it got split into.
|
|
646
646
|
// GSAP staggered tweens actually finish at `duration + stagger * (n-1)`,
|
|
647
|
-
// so `dur` can't be handed straight to `duration` as before
|
|
647
|
+
// so `dur` can't be handed straight to `duration` as before - instead we
|
|
648
648
|
// solve for `duration`/`stagger` together so they always sum to `dur`.
|
|
649
649
|
// An explicit `.stagger-N` class is honored as-is; only `duration` is
|
|
650
650
|
// back-solved in that case so the last part still lands on `dur`.
|
|
@@ -741,7 +741,7 @@ export default function initListeners() {
|
|
|
741
741
|
// and lets the single ScrollTrigger.refresh() at the end reconcile layout.
|
|
742
742
|
gsap.utils.toArray(".pin").forEach(setupPin)
|
|
743
743
|
|
|
744
|
-
// Scroll-driven extras
|
|
744
|
+
// Scroll-driven extras - class-driven ScrollTrigger behaviours that don't
|
|
745
745
|
// fit the spawn/loop machinery (no `play`/`build`), handled like `.pin`:
|
|
746
746
|
// .parallax-N - element drifts relative to scroll. N is a
|
|
747
747
|
// speed factor: 1 = static, <1 = slower,
|
|
@@ -1322,7 +1322,7 @@ export default function initListeners() {
|
|
|
1322
1322
|
|
|
1323
1323
|
// `hover-<name>` and `click-<name>` trigger one of the loop animations on
|
|
1324
1324
|
// mouseenter/mousedown. The element is wrapped in a parent div that acts as
|
|
1325
|
-
// the stable hover/click hit area, while the element itself animates
|
|
1325
|
+
// the stable hover/click hit area, while the element itself animates - so
|
|
1326
1326
|
// the WHOLE box moves/scales instead of just its text, and the area never
|
|
1327
1327
|
// shifts under the cursor. Marquee is skipped (its build restructures the
|
|
1328
1328
|
// DOM).
|
|
@@ -1469,7 +1469,7 @@ export default function initListeners() {
|
|
|
1469
1469
|
|
|
1470
1470
|
// Per-entry `setup` hook: a "special abilities" extension point. Any
|
|
1471
1471
|
// config entry with a `setup(el, ctx)` function runs it once for every
|
|
1472
|
-
// matching element at wiring time
|
|
1472
|
+
// matching element at wiring time - for behaviour that doesn't fit the
|
|
1473
1473
|
// scroll/order/loop machinery. If it RETURNS a function, that's treated
|
|
1474
1474
|
// as a teardown and invoked when the whole engine is torn down, so
|
|
1475
1475
|
// side-effects (listeners, observers, timers) can be cleaned up.
|
|
@@ -1520,7 +1520,7 @@ export default function initListeners() {
|
|
|
1520
1520
|
// to <body>, which adds `body` as a second scope alongside the
|
|
1521
1521
|
// node's former parent. Running animateFlip per scope re-enters
|
|
1522
1522
|
// playFlip on the same element, killing the in-flight tween and
|
|
1523
|
-
// clearing its transform
|
|
1523
|
+
// clearing its transform - snapping the element into place.
|
|
1524
1524
|
// Dedupe across scopes so each element flips exactly once.
|
|
1525
1525
|
const toFlip = new Set()
|
|
1526
1526
|
flipRoots.forEach((scope) => {
|
|
@@ -1692,7 +1692,7 @@ export default function initListeners() {
|
|
|
1692
1692
|
tw?.kill()
|
|
1693
1693
|
})
|
|
1694
1694
|
textSplits.forEach((s) => {
|
|
1695
|
-
// Splits inside a tagged preserve region keep their spans
|
|
1695
|
+
// Splits inside a tagged preserve region keep their spans - the
|
|
1696
1696
|
// next run will skip those elements, and reverting here would
|
|
1697
1697
|
// visibly strip their finished animation. Everything else reverts
|
|
1698
1698
|
// cleanly (and drops out of splitCache so a reused element can be
|
package/README.md
CHANGED
|
@@ -62,7 +62,7 @@ export default {
|
|
|
62
62
|
|
|
63
63
|
## Usage
|
|
64
64
|
|
|
65
|
-
Add utility classes to your markup. Everything is class-driven
|
|
65
|
+
Add utility classes to your markup. Everything is class-driven - no config.
|
|
66
66
|
|
|
67
67
|
```html
|
|
68
68
|
<div class="spawn-up">reveals sliding up on scroll</div>
|
|
@@ -98,5 +98,5 @@ customAnims.push({
|
|
|
98
98
|
|
|
99
99
|
## License
|
|
100
100
|
|
|
101
|
-
|
|
102
|
-
License and is not bundled or redistributed.
|
|
101
|
+
LGPL-3.0-only - except GSAP, which is used under the Webflow Standard No-Charge GSAP
|
|
102
|
+
License and is not bundled or redistributed. See `LICENSE`.
|
package/index.d.ts
CHANGED
|
@@ -189,7 +189,7 @@ export function scrambleVars(target: TweenTarget): {
|
|
|
189
189
|
* Scramble spawn: the text starts empty and resolves into its real content
|
|
190
190
|
* through garbage characters (ScrambleTextPlugin). No opacity change; nested
|
|
191
191
|
* elements are preserved. Defaults to a linear ease so `.time-N` is the true
|
|
192
|
-
* total reveal time
|
|
192
|
+
* total reveal time - an explicit `.ease-*` class overrides. Modifiers read
|
|
193
193
|
* from the element: .reveal-delay-N, .chars-[...], .amount-N, .scramble-all
|
|
194
194
|
* (whole-string scramble-and-sweep, no empty-start typing), .scramble-rtl.
|
|
195
195
|
*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gclass-anims",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
4
|
-
"description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic
|
|
3
|
+
"version": "1.0.0-beta.14",
|
|
4
|
+
"description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic - works in vanilla JS, React, Vue, Svelte, or any bundler.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"module": "index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"framework-agnostic",
|
|
35
35
|
"css-classes"
|
|
36
36
|
],
|
|
37
|
-
"license": "
|
|
37
|
+
"license": "LGPL-3.0-only",
|
|
38
38
|
"repository": {
|
|
39
39
|
"type": "git",
|
|
40
40
|
"url": "git+https://github.com/Saturn-sepehr/GClass.git",
|