use-scroll-animate 3.9.0 → 4.0.1
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/CHANGELOG.md +40 -0
- package/README.md +16 -14
- package/README_ja.md +10 -11
- package/README_zh.md +11 -12
- package/dist/chunks/{base-Dm6ee5ug.cjs → base-CXx7jZ-o.cjs} +1 -11
- package/dist/chunks/{base-Dm6ee5ug.cjs.map → base-CXx7jZ-o.cjs.map} +1 -1
- package/dist/chunks/{base-BRIPyPtX.js → base-ZARFccur.js} +2 -11
- package/dist/chunks/{base-BRIPyPtX.js.map → base-ZARFccur.js.map} +1 -1
- package/dist/chunks/core-Co-6AL0h.js +218 -0
- package/dist/chunks/core-Co-6AL0h.js.map +1 -0
- package/dist/chunks/{core-CYozf_E-.js → core-DKY-fVzR.js} +2 -2
- package/dist/chunks/{core-CYozf_E-.js.map → core-DKY-fVzR.js.map} +1 -1
- package/dist/chunks/core-DXqZm5Il.cjs +222 -0
- package/dist/chunks/core-DXqZm5Il.cjs.map +1 -0
- package/dist/chunks/{core-CHAtivHV.cjs → core-IaorbTdu.cjs} +2 -2
- package/dist/chunks/{core-CHAtivHV.cjs.map → core-IaorbTdu.cjs.map} +1 -1
- package/dist/chunks/{index-tags-BmQR17Sb.js → index-tags-43Xtd01A.js} +2 -2
- package/dist/chunks/index-tags-43Xtd01A.js.map +1 -0
- package/dist/chunks/{index-tags-DYYsgbba.cjs → index-tags-BQh_uGqH.cjs} +2 -2
- package/dist/chunks/index-tags-BQh_uGqH.cjs.map +1 -0
- package/dist/chunks/{spring-Dp5BllPB.cjs → spring-2OTnYCzm.cjs} +2 -2
- package/dist/chunks/{spring-Dp5BllPB.cjs.map → spring-2OTnYCzm.cjs.map} +1 -1
- package/dist/chunks/{spring-UBPhrh1X.js → spring-E2ickYNI.js} +2 -2
- package/dist/chunks/{spring-UBPhrh1X.js.map → spring-E2ickYNI.js.map} +1 -1
- package/dist/chunks/{variants-_dC-ey6R.cjs → variants-BNIrn4ch.cjs} +2 -2
- package/dist/chunks/{variants-_dC-ey6R.cjs.map → variants-BNIrn4ch.cjs.map} +1 -1
- package/dist/chunks/{variants-DTypaOH3.js → variants-DvnxvRCM.js} +2 -2
- package/dist/chunks/{variants-DTypaOH3.js.map → variants-DvnxvRCM.js.map} +1 -1
- package/dist/components/angular.cjs +6 -5
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +4 -17
- package/dist/components/angular.d.ts +4 -17
- package/dist/components/angular.js +6 -5
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.cjs +2 -2
- package/dist/components/background.js +3 -3
- package/dist/components/cards.cjs +2 -2
- package/dist/components/cards.js +3 -3
- package/dist/components/click.cjs +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.cjs +3 -3
- package/dist/components/depth.js +4 -4
- package/dist/components/feedback.cjs +1 -1
- package/dist/components/feedback.js +2 -2
- package/dist/components/gesture.cjs +3 -3
- package/dist/components/gesture.js +5 -5
- package/dist/components/interaction.cjs +1 -1
- package/dist/components/interaction.js +2 -2
- package/dist/components/jsx.d.cts +1 -1
- package/dist/components/jsx.d.ts +1 -1
- package/dist/components/layout.cjs +1 -1
- package/dist/components/layout.js +2 -2
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +1 -1
- package/dist/components/lazy.d.ts +1 -1
- package/dist/components/lazy.js +1 -1
- package/dist/components/packs.cjs +1 -1
- package/dist/components/packs.js +2 -2
- package/dist/components/page.cjs +2 -2
- package/dist/components/page.js +3 -3
- package/dist/components/physics.cjs +2 -2
- package/dist/components/physics.js +4 -4
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.d.cts +1 -1
- package/dist/components/react.d.ts +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.cjs +1 -1
- package/dist/components/reveal.js +2 -2
- package/dist/components/solid.cjs +25 -9
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +8 -35
- package/dist/components/solid.d.ts +8 -35
- package/dist/components/solid.js +25 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +6 -5
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +4 -17
- package/dist/components/svelte.d.ts +4 -17
- package/dist/components/svelte.js +6 -5
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.cjs +17 -11
- package/dist/components/svg.cjs.map +1 -1
- package/dist/components/svg.css +1 -1
- package/dist/components/svg.js +18 -12
- package/dist/components/svg.js.map +1 -1
- package/dist/components/text.cjs +2 -2
- package/dist/components/text.css +1 -1
- package/dist/components/text.js +3 -3
- package/dist/components/timeline.cjs +23 -223
- package/dist/components/timeline.cjs.map +1 -1
- package/dist/components/timeline.js +21 -220
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/transitions.cjs +8 -125
- package/dist/components/transitions.cjs.map +1 -1
- package/dist/components/transitions.css +0 -1
- package/dist/components/transitions.d.cts +5 -34
- package/dist/components/transitions.d.ts +5 -34
- package/dist/components/transitions.js +10 -125
- package/dist/components/transitions.js.map +1 -1
- package/dist/components/ui.cjs +3 -3
- package/dist/components/ui.js +5 -5
- package/dist/components/vue.cjs +6 -5
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +4 -17
- package/dist/components/vue.d.ts +4 -17
- package/dist/components/vue.js +6 -5
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.cjs +11 -1
- package/dist/components/webgl.cjs.map +1 -1
- package/dist/components/webgl.js +12 -2
- package/dist/components/webgl.js.map +1 -1
- package/dist/components.cjs +12 -13
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +2 -3
- package/dist/components.d.cts +6 -35
- package/dist/components.d.ts +6 -35
- package/dist/components.js +10 -9
- package/dist/components.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.cjs +5 -109
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +72 -32
- package/dist/index.d.ts +72 -32
- package/dist/index.js +4 -110
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/solid.cjs +38 -8
- package/dist/solid.cjs.map +1 -1
- package/dist/solid.d.cts +6 -1
- package/dist/solid.d.ts +6 -1
- package/dist/solid.js +39 -9
- package/dist/solid.js.map +1 -1
- package/docs/API.md +6 -6
- package/docs/ROADMAP.md +14 -0
- package/docs/components.md +3 -5
- package/docs/migration-from-aos.md +1 -1
- package/docs/migration-from-gsap-scrolltrigger.md +6 -6
- package/package.json +1 -1
- package/dist/chunks/index-tags-BmQR17Sb.js.map +0 -1
- package/dist/chunks/index-tags-DYYsgbba.cjs.map +0 -1
package/dist/components.d.cts
CHANGED
|
@@ -745,20 +745,6 @@ interface UsaAccordionElement extends UsaElement {
|
|
|
745
745
|
}
|
|
746
746
|
declare function defineAccordion(tag?: string): CustomElementConstructor | undefined;
|
|
747
747
|
|
|
748
|
-
/**
|
|
749
|
-
* `<usa-flip-list>` — animates its children to their new places whenever
|
|
750
|
-
* they are added, removed or reordered (FLIP: transforms only). Works with
|
|
751
|
-
* any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
|
|
752
|
-
*
|
|
753
|
-
* Attributes: `duration` (ms, 420), `easing`, `disabled`.
|
|
754
|
-
* Method: `flip(mutate)` for explicit changes (also measures resizes).
|
|
755
|
-
* Reduced motion: no animation.
|
|
756
|
-
*/
|
|
757
|
-
interface UsaFlipListElement extends UsaElement {
|
|
758
|
-
flip(mutate: () => void | Promise<void>): Promise<void>;
|
|
759
|
-
}
|
|
760
|
-
declare function defineFlipList(tag?: string): CustomElementConstructor | undefined;
|
|
761
|
-
|
|
762
748
|
/**
|
|
763
749
|
* `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
|
|
764
750
|
* steps, app pages) and animates between them. Children are views; name
|
|
@@ -815,26 +801,12 @@ type Targets = Element | Iterable<Element> | ArrayLike<Element>;
|
|
|
815
801
|
* ```
|
|
816
802
|
*/
|
|
817
803
|
declare function flip(targets: Targets, mutate: () => void | Promise<void>, options?: FlipOptions): Promise<void>;
|
|
818
|
-
interface ConnectedOptions {
|
|
819
|
-
duration?: number;
|
|
820
|
-
easing?: string;
|
|
821
|
-
/** Hide `from` while the animation runs (default true). */
|
|
822
|
-
hideSource?: boolean;
|
|
823
|
-
}
|
|
824
|
-
/**
|
|
825
|
-
* Connected (shared-element) animation, like WinUI's
|
|
826
|
-
* `ConnectedAnimationService`: `to` flies from the position and size of
|
|
827
|
-
* `from` into its own place (e.g. a thumbnail opening into a detail view).
|
|
828
|
-
* Call it right after `to` is shown. Transforms only.
|
|
829
|
-
*
|
|
830
|
-
* @deprecated since 3.9, removed in 4.0 — use `sharedTransition()` (components/layout).
|
|
831
|
-
*/
|
|
832
|
-
declare function connectedAnimation(from: Element, to: HTMLElement, options?: ConnectedOptions): Promise<void>;
|
|
833
804
|
|
|
834
805
|
/**
|
|
835
806
|
* use-scroll-animate/components/transitions — view & layout transitions.
|
|
836
|
-
* `<usa-dialog>`, `<usa-accordion>`, `<usa-
|
|
837
|
-
* and the `viewTransition()
|
|
807
|
+
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
808
|
+
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
809
|
+
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
838
810
|
*/
|
|
839
811
|
|
|
840
812
|
/** Register every component of this category under its default tag. */
|
|
@@ -843,7 +815,6 @@ declare global {
|
|
|
843
815
|
interface HTMLElementTagNameMap {
|
|
844
816
|
'usa-dialog': UsaDialogElement;
|
|
845
817
|
'usa-accordion': UsaAccordionElement;
|
|
846
|
-
'usa-flip-list': UsaFlipListElement;
|
|
847
818
|
'usa-view-switch': UsaViewSwitchElement;
|
|
848
819
|
}
|
|
849
820
|
}
|
|
@@ -2411,7 +2382,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2411
2382
|
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
2412
2383
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
2413
2384
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
2414
|
-
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-
|
|
2385
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
2415
2386
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
2416
2387
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
2417
2388
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
@@ -2433,5 +2404,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2433
2404
|
*/
|
|
2434
2405
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2435
2406
|
|
|
2436
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents,
|
|
2437
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions,
|
|
2407
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.d.ts
CHANGED
|
@@ -745,20 +745,6 @@ interface UsaAccordionElement extends UsaElement {
|
|
|
745
745
|
}
|
|
746
746
|
declare function defineAccordion(tag?: string): CustomElementConstructor | undefined;
|
|
747
747
|
|
|
748
|
-
/**
|
|
749
|
-
* `<usa-flip-list>` — animates its children to their new places whenever
|
|
750
|
-
* they are added, removed or reordered (FLIP: transforms only). Works with
|
|
751
|
-
* any rendering: plain DOM, React keyed lists, Vue `v-for`, Svelte `{#each}`.
|
|
752
|
-
*
|
|
753
|
-
* Attributes: `duration` (ms, 420), `easing`, `disabled`.
|
|
754
|
-
* Method: `flip(mutate)` for explicit changes (also measures resizes).
|
|
755
|
-
* Reduced motion: no animation.
|
|
756
|
-
*/
|
|
757
|
-
interface UsaFlipListElement extends UsaElement {
|
|
758
|
-
flip(mutate: () => void | Promise<void>): Promise<void>;
|
|
759
|
-
}
|
|
760
|
-
declare function defineFlipList(tag?: string): CustomElementConstructor | undefined;
|
|
761
|
-
|
|
762
748
|
/**
|
|
763
749
|
* `<usa-view-switch>` — shows one of its children at a time (tabs, wizard
|
|
764
750
|
* steps, app pages) and animates between them. Children are views; name
|
|
@@ -815,26 +801,12 @@ type Targets = Element | Iterable<Element> | ArrayLike<Element>;
|
|
|
815
801
|
* ```
|
|
816
802
|
*/
|
|
817
803
|
declare function flip(targets: Targets, mutate: () => void | Promise<void>, options?: FlipOptions): Promise<void>;
|
|
818
|
-
interface ConnectedOptions {
|
|
819
|
-
duration?: number;
|
|
820
|
-
easing?: string;
|
|
821
|
-
/** Hide `from` while the animation runs (default true). */
|
|
822
|
-
hideSource?: boolean;
|
|
823
|
-
}
|
|
824
|
-
/**
|
|
825
|
-
* Connected (shared-element) animation, like WinUI's
|
|
826
|
-
* `ConnectedAnimationService`: `to` flies from the position and size of
|
|
827
|
-
* `from` into its own place (e.g. a thumbnail opening into a detail view).
|
|
828
|
-
* Call it right after `to` is shown. Transforms only.
|
|
829
|
-
*
|
|
830
|
-
* @deprecated since 3.9, removed in 4.0 — use `sharedTransition()` (components/layout).
|
|
831
|
-
*/
|
|
832
|
-
declare function connectedAnimation(from: Element, to: HTMLElement, options?: ConnectedOptions): Promise<void>;
|
|
833
804
|
|
|
834
805
|
/**
|
|
835
806
|
* use-scroll-animate/components/transitions — view & layout transitions.
|
|
836
|
-
* `<usa-dialog>`, `<usa-accordion>`, `<usa-
|
|
837
|
-
* and the `viewTransition()
|
|
807
|
+
* `<usa-dialog>`, `<usa-accordion>`, `<usa-view-switch>`
|
|
808
|
+
* and the `viewTransition()` and `flip()` helpers (4.0: `<usa-flip-list>` → `<usa-auto-animate>`,
|
|
809
|
+
* `connectedAnimation()` → `sharedTransition()`, both in `components/layout`).
|
|
838
810
|
*/
|
|
839
811
|
|
|
840
812
|
/** Register every component of this category under its default tag. */
|
|
@@ -843,7 +815,6 @@ declare global {
|
|
|
843
815
|
interface HTMLElementTagNameMap {
|
|
844
816
|
'usa-dialog': UsaDialogElement;
|
|
845
817
|
'usa-accordion': UsaAccordionElement;
|
|
846
|
-
'usa-flip-list': UsaFlipListElement;
|
|
847
818
|
'usa-view-switch': UsaViewSwitchElement;
|
|
848
819
|
}
|
|
849
820
|
}
|
|
@@ -2411,7 +2382,7 @@ declare const COMPONENT_CATEGORIES: {
|
|
|
2411
2382
|
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
2412
2383
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
2413
2384
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
2414
|
-
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-
|
|
2385
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
2415
2386
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
2416
2387
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
2417
2388
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
@@ -2433,5 +2404,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
|
2433
2404
|
*/
|
|
2434
2405
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2435
2406
|
|
|
2436
|
-
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents,
|
|
2437
|
-
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions,
|
|
2407
|
+
export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, applyPack, autoAnimate, burst, confetti, configureComponents, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
|
|
2408
|
+
export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|
package/dist/components.js
CHANGED
|
@@ -9,7 +9,7 @@ export { SPINNER_VARIANTS, defineCheck, defineProgress, defineSkeleton, defineSp
|
|
|
9
9
|
import { defineBackgroundComponents } from './components/background.js';
|
|
10
10
|
export { defineAcrylic, defineAurora, defineBlobs, defineDotNetwork, defineGrain, defineGridGlow, defineMarquee, defineParticles, defineWaterRipple, fluentPreset } from './components/background.js';
|
|
11
11
|
import { defineTransitionComponents } from './components/transitions.js';
|
|
12
|
-
export {
|
|
12
|
+
export { defineAccordion, defineDialog, defineViewSwitch, flip, viewTransition } from './components/transitions.js';
|
|
13
13
|
import { definePhysicsComponents } from './components/physics.js';
|
|
14
14
|
export { SPRING_EFFECTS, defineDraggable, defineOverscroll, defineSpring, springEffectKeyframes } from './components/physics.js';
|
|
15
15
|
import { defineCardComponents } from './components/cards.js';
|
|
@@ -21,7 +21,7 @@ export { defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, define
|
|
|
21
21
|
import { definePageComponents } from './components/page.js';
|
|
22
22
|
export { AMBIENT_EFFECTS, CURSOR_MODES, PAGE_EFFECTS, defineAmbient, defineAutoSkeleton, defineBackToTop, defineCursor, defineFullpage, defineLoadingBar, defineMotionSwitch, defineSplash, enableMpaTransitions, loadingBar, pageTransition, restoreMotionIntensity, scrollToTarget, setMotionIntensity, smoothScroll, supportsViewTransitions, themeTransition } from './components/page.js';
|
|
23
23
|
import { defineTimelineComponents } from './components/timeline.js';
|
|
24
|
-
export {
|
|
24
|
+
export { defineTimeline } from './components/timeline.js';
|
|
25
25
|
import { defineGestureComponents } from './components/gesture.js';
|
|
26
26
|
export { definePinchZoom, defineSwipeable } from './components/gesture.js';
|
|
27
27
|
import { defineSvgComponents } from './components/svg.js';
|
|
@@ -34,13 +34,14 @@ import { defineLayoutComponents } from './components/layout.js';
|
|
|
34
34
|
export { autoAnimate, defineAutoAnimate, defineMasonry, flipFrames, masonryLayout, sharedTransition } from './components/layout.js';
|
|
35
35
|
import { definePacksComponents } from './components/packs.js';
|
|
36
36
|
export { PACKS, PACK_PRIMITIVES, applyPack, countUp, definePack, flyToCart } from './components/packs.js';
|
|
37
|
-
import { a as adoptVariants } from './chunks/variants-
|
|
38
|
-
export { V as VARIANTS, s as setVariant } from './chunks/variants-
|
|
39
|
-
import { c as canDefine } from './chunks/base-
|
|
40
|
-
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-
|
|
41
|
-
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-
|
|
42
|
-
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-
|
|
43
|
-
export {
|
|
37
|
+
import { a as adoptVariants } from './chunks/variants-DvnxvRCM.js';
|
|
38
|
+
export { V as VARIANTS, s as setVariant } from './chunks/variants-DvnxvRCM.js';
|
|
39
|
+
import { c as canDefine } from './chunks/base-ZARFccur.js';
|
|
40
|
+
export { M as MOTION_SCALE, a as configureComponents, g as getMotionIntensity, p as prefersReducedMotion } from './chunks/base-ZARFccur.js';
|
|
41
|
+
export { C as COMPONENT_CATEGORIES } from './chunks/index-tags-43Xtd01A.js';
|
|
42
|
+
export { S as SPRING_PRESETS, c as createSpring, l as linearEasing, p as projectInertia, r as resolveSpring, a as rubberBand, s as snapTo, b as spring, d as springEasing, e as springSamples, f as stepSpring, g as supportsLinearEasing } from './chunks/spring-E2ickYNI.js';
|
|
43
|
+
export { T as TIMELINE_PRESETS, r as resolvePosition, t as timeline } from './chunks/core-Co-6AL0h.js';
|
|
44
|
+
export { g as gesture, p as pinchScale, s as swipeDirection } from './chunks/core-DKY-fVzR.js';
|
|
44
45
|
|
|
45
46
|
/**
|
|
46
47
|
* use-scroll-animate/components
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA6CH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,UAAU,EAAE,0BAA0B;AACtC,IAAA,WAAW,EAAE,0BAA0B;AACvC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,OAAO,EAAE,uBAAuB;AAChC,IAAA,GAAG,EAAE,mBAAmB;AACxB,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,KAAK,EAAE,qBAAqB;AAC5B,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,KAAK,EAAE,qBAAqB;CAC7B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAI,SAAS,EAAE;AAAE,QAAA,aAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;"}
|