@drivexstudio/animations 1.0.2 → 1.0.3
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/dist/index.cjs +18 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -54,7 +54,7 @@ __export(packages_exports, {
|
|
|
54
54
|
easingDefinitionToFunction: () => easingDefinitionToFunction,
|
|
55
55
|
getCssScrollLocked: () => getCssScrollLocked,
|
|
56
56
|
getLenis: () => getLenis,
|
|
57
|
-
gsap: () => import_gsap.
|
|
57
|
+
gsap: () => import_gsap.gsap,
|
|
58
58
|
scrollToTop: () => scrollToTop,
|
|
59
59
|
setCssScrollLocked: () => setCssScrollLocked,
|
|
60
60
|
stagger: () => stagger,
|
|
@@ -76,7 +76,7 @@ module.exports = __toCommonJS(packages_exports);
|
|
|
76
76
|
var import_react9 = __toESM(require("react"), 1);
|
|
77
77
|
|
|
78
78
|
// libs/vendor.js
|
|
79
|
-
var import_gsap =
|
|
79
|
+
var import_gsap = require("gsap");
|
|
80
80
|
var import_react = require("@gsap/react");
|
|
81
81
|
var import_ScrollTrigger = require("gsap/ScrollTrigger");
|
|
82
82
|
var import_Flip = require("gsap/Flip");
|
|
@@ -86,7 +86,7 @@ var import_InertiaPlugin = require("gsap/InertiaPlugin");
|
|
|
86
86
|
var import_Draggable = require("gsap/Draggable");
|
|
87
87
|
var import_class_variance_authority = require("class-variance-authority");
|
|
88
88
|
var import_class_variance_authority2 = require("class-variance-authority");
|
|
89
|
-
import_gsap.
|
|
89
|
+
import_gsap.gsap.registerPlugin(
|
|
90
90
|
import_ScrollTrigger.ScrollTrigger,
|
|
91
91
|
import_ScrambleTextPlugin.ScrambleTextPlugin,
|
|
92
92
|
import_SplitText.SplitText,
|
|
@@ -361,7 +361,7 @@ function ScrambleGroup({
|
|
|
361
361
|
const callbacks = Array.from(childrenMapRef.current.values());
|
|
362
362
|
const staggerValue = customStagger ?? stagger2;
|
|
363
363
|
callbacks.forEach((callbackFn, index) => {
|
|
364
|
-
import_gsap.
|
|
364
|
+
import_gsap.gsap.delayedCall(index * staggerValue, () => {
|
|
365
365
|
callbackFn();
|
|
366
366
|
});
|
|
367
367
|
});
|
|
@@ -370,7 +370,7 @@ function ScrambleGroup({
|
|
|
370
370
|
const setupScrollTrigger = (0, import_react8.useCallback)(() => {
|
|
371
371
|
if (manual || !containerRef.current) return;
|
|
372
372
|
isTriggering.current = false;
|
|
373
|
-
const tween = import_gsap.
|
|
373
|
+
const tween = import_gsap.gsap.to(containerRef.current, {
|
|
374
374
|
scrollTrigger: {
|
|
375
375
|
trigger: containerRef.current,
|
|
376
376
|
start,
|
|
@@ -464,7 +464,7 @@ function ScrambleText({
|
|
|
464
464
|
return null;
|
|
465
465
|
}
|
|
466
466
|
killTimeline();
|
|
467
|
-
timelineRef.current = import_gsap.
|
|
467
|
+
timelineRef.current = import_gsap.gsap.timeline({
|
|
468
468
|
onComplete: () => {
|
|
469
469
|
timelineRef.current = null;
|
|
470
470
|
isCompleteRef.current = true;
|
|
@@ -651,8 +651,8 @@ var AnimatedHeadline = (0, import_react10.forwardRef)(({
|
|
|
651
651
|
(0, import_react.useGSAP)(() => {
|
|
652
652
|
if (shouldSkip || !containerRef.current || !lines) return;
|
|
653
653
|
const container = containerRef.current;
|
|
654
|
-
import_gsap.
|
|
655
|
-
import_gsap.
|
|
654
|
+
import_gsap.gsap.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
|
|
655
|
+
import_gsap.gsap.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
|
|
656
656
|
}, { dependencies: [shouldSkip, lines] });
|
|
657
657
|
useIdleGSAP(() => {
|
|
658
658
|
if (trigger !== "scroll" || shouldSkip || !lines) return;
|
|
@@ -679,7 +679,7 @@ var AnimatedHeadline = (0, import_react10.forwardRef)(({
|
|
|
679
679
|
const fgRect = lineNode.querySelector("[data-fg-rect]");
|
|
680
680
|
if (!lineInner || !brandRect || !fgRect) continue;
|
|
681
681
|
const rects = [brandRect, fgRect];
|
|
682
|
-
const tl = import_gsap.
|
|
682
|
+
const tl = import_gsap.gsap.timeline({ delay });
|
|
683
683
|
tl.to(brandRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0);
|
|
684
684
|
tl.to(fgRect, { scaleX: 1, duration: 0.45, ease: "power3.inOut" }, 0.1);
|
|
685
685
|
tl.set(lineInner, { opacity: 1 }, 0.5);
|
|
@@ -692,8 +692,8 @@ var AnimatedHeadline = (0, import_react10.forwardRef)(({
|
|
|
692
692
|
hasRevealedRef.current = false;
|
|
693
693
|
if (!containerRef.current) return;
|
|
694
694
|
const container = containerRef.current;
|
|
695
|
-
import_gsap.
|
|
696
|
-
import_gsap.
|
|
695
|
+
import_gsap.gsap.set(container.querySelectorAll("[data-line-inner]"), { opacity: 0 });
|
|
696
|
+
import_gsap.gsap.set(container.querySelectorAll("[data-brand-rect], [data-fg-rect]"), { scaleX: 0, transformOrigin: "left" });
|
|
697
697
|
}, []);
|
|
698
698
|
(0, import_react10.useImperativeHandle)(ref, () => ({ reveal, reset }), [reveal, reset]);
|
|
699
699
|
const resolvedClassName = cx(typographyClasses[displayAs ?? Component], className);
|
|
@@ -815,7 +815,7 @@ function useDualLayerScramble(options) {
|
|
|
815
815
|
const finalWidth = Math.max(((_a = dimensionsRef.current) == null ? void 0 : _a.width) ?? 0, maxWidth);
|
|
816
816
|
const finalHeight = Math.max(((_b = dimensionsRef.current) == null ? void 0 : _b.height) ?? 0, totalHeight);
|
|
817
817
|
isPreparedRef.current = true;
|
|
818
|
-
import_gsap.
|
|
818
|
+
import_gsap.gsap.set(el, { width: finalWidth, height: finalHeight, display: "inline-block", overflow: "hidden" });
|
|
819
819
|
el.innerHTML = "";
|
|
820
820
|
spansRef.current = [];
|
|
821
821
|
linesDataRef.current.forEach((lineData) => {
|
|
@@ -832,7 +832,7 @@ function useDualLayerScramble(options) {
|
|
|
832
832
|
el.appendChild(span);
|
|
833
833
|
spansRef.current.push(span);
|
|
834
834
|
});
|
|
835
|
-
import_gsap.
|
|
835
|
+
import_gsap.gsap.set(el, { opacity: 1 });
|
|
836
836
|
}, []);
|
|
837
837
|
const playScramble = (0, import_react11.useCallback)((overrides) => {
|
|
838
838
|
var _a;
|
|
@@ -863,7 +863,7 @@ function useDualLayerScramble(options) {
|
|
|
863
863
|
}
|
|
864
864
|
killTimeline();
|
|
865
865
|
isAnimatingRef.current = true;
|
|
866
|
-
timelineRef.current = import_gsap.
|
|
866
|
+
timelineRef.current = import_gsap.gsap.timeline({
|
|
867
867
|
onComplete: () => {
|
|
868
868
|
var _a2;
|
|
869
869
|
isAnimatingRef.current = false;
|
|
@@ -893,7 +893,7 @@ function useDualLayerScramble(options) {
|
|
|
893
893
|
const nonSpaceCount = originalText.replace(/\s/g, "").length;
|
|
894
894
|
const spacesOnly = originalText.replace(/[^\s]/g, " ");
|
|
895
895
|
(_a2 = timelineRef.current) == null ? void 0 : _a2.add(() => {
|
|
896
|
-
import_gsap.
|
|
896
|
+
import_gsap.gsap.set(span, { opacity: 1 });
|
|
897
897
|
span.innerText = spacesOnly;
|
|
898
898
|
}, delay);
|
|
899
899
|
(_b = timelineRef.current) == null ? void 0 : _b.to(span, {
|
|
@@ -927,7 +927,7 @@ function useDualLayerScramble(options) {
|
|
|
927
927
|
killTimeline();
|
|
928
928
|
if (elementRef.current && isPreparedRef.current) {
|
|
929
929
|
elementRef.current.innerHTML = originalHTMLRef.current || originalTextRef.current;
|
|
930
|
-
import_gsap.
|
|
930
|
+
import_gsap.gsap.set(elementRef.current, {
|
|
931
931
|
opacity: 0,
|
|
932
932
|
width: "auto",
|
|
933
933
|
height: "auto",
|
|
@@ -1431,7 +1431,7 @@ var AnimatedSubtext = (0, import_react15.forwardRef)(({
|
|
|
1431
1431
|
const lines = splitTextRef.current.lines ?? [];
|
|
1432
1432
|
if (lines.length !== 0) {
|
|
1433
1433
|
elementRef.current.style.visibility = "visible";
|
|
1434
|
-
import_gsap.
|
|
1434
|
+
import_gsap.gsap.fromTo(
|
|
1435
1435
|
lines,
|
|
1436
1436
|
{ y: "100%" },
|
|
1437
1437
|
{
|
|
@@ -1632,7 +1632,7 @@ function Preloader() {
|
|
|
1632
1632
|
requestAnimationFrame(runAnimation);
|
|
1633
1633
|
return;
|
|
1634
1634
|
}
|
|
1635
|
-
timelineRef.current = import_gsap.
|
|
1635
|
+
timelineRef.current = import_gsap.gsap.timeline();
|
|
1636
1636
|
onReadyRef.current();
|
|
1637
1637
|
squares.forEach((square, index) => {
|
|
1638
1638
|
var _a2;
|