rw-elements-tools 1.2.0

package/properties/BackgroundType.js

@@ -0,0 +1,18 @@
+const BackgroundType = {
+    items: [
+        {
+            icon: "paintbrush",
+            value: "color",
+        },
+        {
+            icon: "photo",
+            value: "image",
+        },
+        {
+            icon: "swatchpalette",
+            value: "gradient",
+        },
+    ],
+};
+
+export default BackgroundType;

package/properties/ButtonSize.js

@@ -0,0 +1,19 @@
+const ButtonSize = {
+    default: "md",
+    items: [
+        {
+            value: "sm",
+            title: "Small",
+        },
+        {
+            value: "md",
+            title: "Medium",
+        },
+        {
+            value: "lg",
+            title: "Large",
+        },
+    ],
+};
+
+export default ButtonSize;

package/properties/ContainerHeights.js

@@ -0,0 +1,23 @@
+const ContainerHeights = {
+  default: "full",
+  items: [
+    {
+      title: "Auto",
+      value: "auto"
+    },
+    {
+      title: "Full",
+      value: "full"
+    },
+    {
+      title: "Screen",
+      value: "screen"
+    },
+    {
+      title: "Custom",
+      value: "custom"
+    }
+  ]
+};
+
+export default ContainerHeights;

package/properties/ContainerWidths.js

@@ -0,0 +1,27 @@
+const ContainerWidths = {
+  default: "full",
+  items: [
+    {
+      title: "Auto",
+      value: "auto"
+    },
+    {
+      title: "Breakpoint",
+      value: "breakpoint"
+    },
+    {
+      title: "Full",
+      value: "full"
+    },
+    {
+      title: "Screen",
+      value: "screen"
+    },
+    {
+      title: "Custom",
+      value: "custom"
+    }
+  ]
+};
+
+export default ContainerWidths;

package/properties/FontWeight.js

@@ -0,0 +1,16 @@
+export const FontWeight = {
+    default: "400",
+    items: [
+        { value: "100", title: "Thin" },
+        { value: "200", title: "Extra Light" },
+        { value: "300", title: "Light" },
+        { value: "400", title: "Normal" },
+        { value: "500", title: "Medium" },
+        { value: "600", title: "Semi Bold" },
+        { value: "700", title: "Bold" },
+        { value: "800", title: "Extra Bold" },
+        { value: "900", title: "Black" },
+    ],
+};
+
+export default FontWeight;

package/properties/GradientDirection.js

@@ -0,0 +1,39 @@
+const GradientDirection = {
+    default: "bg-gradient-to-b",
+    items: [
+        {
+            value: "bg-gradient-to-t",
+            title: "To Top",
+        },
+        {
+            value: "bg-gradient-to-tr",
+            title: "To Top Right",
+        },
+        {
+            value: "bg-gradient-to-r",
+            title: "To Right",
+        },
+        {
+            value: "bg-gradient-to-br",
+            title: "To Bottom Right",
+        },
+        {
+            value: "bg-gradient-to-b",
+            title: "To Bottom",
+        },
+        {
+            value: "bg-gradient-to-bl",
+            title: "To Bottom Left",
+        },
+        {
+            value: "bg-gradient-to-l",
+            title: "To Left",
+        },
+        {
+            value: "bg-gradient-to-tl",
+            title: "To Top Left",
+        },
+    ],
+};
+
+export default GradientDirection;

package/properties/LetterSpacing.js

@@ -0,0 +1,13 @@
+export const LetterSpacing = {
+    default: "normal",
+    items: [
+        { value: "tighter", title: "Tighter" },
+        { value: "tight", title: "Tight" },
+        { value: "normal", title: "Normal" },
+        { value: "wide", title: "Wide" },
+        { value: "wider", title: "Wider" },
+        { value: "widest", title: "Widest" },
+    ],
+};
+
+export default LetterSpacing;

package/properties/LineHeight.js

@@ -0,0 +1,13 @@
+export const LineHeight = {
+    default: "normal",
+    items: [
+        { value: "none", title: "None" },
+        { value: "tight", title: "Tight" },
+        { value: "snug", title: "Snug" },
+        { value: "normal", title: "Normal" },
+        { value: "relaxed", title: "Relaxed" },
+        { value: "loose", title: "Loose" },
+    ],
+};
+
+export default LineHeight;

package/properties/RevealAnimations.js

@@ -0,0 +1,12 @@
+export const RevealAnimations = {
+    default: "fade",
+    items: [
+        { value: "fade", title: "Fade" },
+        { value: "slide", title: "Slide" },
+        { value: "zoom", title: "Zoom" },
+        { value: "lightSpeed", title: "Light Speed" },
+        { value: "rotate", title: "Rotate" },
+    ],
+};
+
+export default RevealAnimations;

package/properties/Slider.js

@@ -0,0 +1,10 @@
+const Slider = {
+    default: 0,
+    min: 0,
+    max: 100,
+    round: true,
+    snap: true,
+    units: "px",
+};
+
+export default Slider;

package/properties/TextAlign.js

@@ -0,0 +1,23 @@
+export const TextAlign = {
+    default: "text-left",
+    items: [
+        {
+            value: "text-left",
+            icon: "text.alignleft",
+        },
+        {
+            value: "text-center",
+            icon: "text.aligncenter",
+        },
+        {
+            value: "text-right",
+            icon: "text.alignright",
+        },
+        {
+            value: "text-justify",
+            icon: "text.justify",
+        },
+    ],
+};
+
+export default TextAlign;

package/properties/TransformOrigins.js

@@ -0,0 +1,43 @@
+export const TransformOrigins = {
+  default: "center",
+  items: [
+    {
+      value: "center",
+      title: "Center",
+    },
+    {
+      value: "top",
+      title: "Top",
+    },
+    {
+      value: "top-right",
+      title: "Top Right",
+    },
+    {
+      value: "right",
+      title: "Right",
+    },
+    {
+      value: "bottom-right",
+      title: "Bottom Right",
+    },
+    {
+      value: "bottom",
+      title: "Bottom",
+    },
+    {
+      value: "bottom-left",
+      title: "Bottom Left",
+    },
+    {
+      value: "left",
+      title: "Left",
+    },
+    {
+      value: "top-left",
+      title: "Top Left",
+    },
+  ],
+};
+
+export default TransformOrigins;

package/properties/TransitionNames.js

@@ -0,0 +1,20 @@
+export const TransitionNames = {
+    default: "dim",
+    items: [
+      {
+        value: "dim",
+        title: "Dim",
+      },
+      {
+        value: "zoomOut",
+        title: "Zoom Out",
+      },
+      {
+        value: "slide",
+        title: "Slide",
+      }
+    ],
+  };
+  
+  export default TransitionNames;
+  

package/properties/index.js

@@ -0,0 +1,13 @@
+export { default as BackgroundType } from "./BackgroundType.js";
+export { default as ButtonSize } from "./ButtonSize.js";
+export { default as ContainerWidths } from "./ContainerWidths.js";
+export { default as ContainerHeights } from "./ContainerHeights.js";
+export { default as FontWeight } from "./FontWeight.js";
+export { default as GradientDirection } from "./GradientDirection.js";
+export { default as LetterSpacing } from "./LetterSpacing.js";
+export { default as LineHeight } from "./LineHeight.js";
+export { default as RevealAnimations } from "./RevealAnimations.js";
+export { default as Slider } from "./Slider.js";
+export { default as TextAlign } from "./TextAlign.js";
+export { default as TransformOrigins } from "./TransformOrigins.js";
+export { default as TransitionNames } from "./TransitionNames.js";

package/shared-hooks/animations/globalAnimations.js

@@ -0,0 +1,141 @@
+const globalAnimations = (app) => {
+    const {
+        globalScrollAnimationPreviewInEditor: previewInEditor,
+        
+        globalScrollAnimationTrigger: triggerType, // none, instant, inView, scroll
+        
+        globalScrollAnimationEase: ease,
+        globalScrollAnimationEaseCustom: easeCustom,
+        globalScrollAnimationEaseSteps: easeSteps,
+        globalScrollAnimationOrigin: origin,
+        globalScrollAnimationDuration: duration,
+        globalScrollAnimationDelay: delay,
+
+        // inView
+        globalScrollAnimationAmount: amount,
+
+        // spring
+        globalScrollAnimationIsSpring: isSpring,
+        globalScrollAnimationSpringStrength: springStrength,
+        globalScrollAnimationSpringAmplitude: springAmplitude,
+
+        // trigger positions
+        globalScrollAnimationTriggerElementPositionEnter: triggerElementPositionEnter,
+        globalScrollAnimationTriggerViewportPositionEnter: triggerViewportPositionEnter,
+        globalScrollAnimationTriggerElementPositionExit: triggerElementPositionExit,
+        globalScrollAnimationTriggerViewportPositionExit: triggerViewportPositionExit,
+
+
+        // margin
+        globalScrollAnimationMarginTop: marginTop,
+        globalScrollAnimationMarginBottom: marginBottom,
+        
+        // repeat
+        globalScrollAnimationRepeat: repeat,
+        globalScrollAnimationRepeatTimes: repeatTimes,
+        globalScrollAnimationRepeatYoyo: repeatYoyo,
+        globalScrollAnimationRepeatDelay: repeatDelay,
+
+        // Effects
+        // - start
+        globalScrollAnimationEnterState: enterState,
+        globalScrollAnimationOpacityEnterStart: opacityEnterStart,
+        globalScrollAnimationRotateEnterStart: rotateEnterStart,
+        globalScrollAnimationScaleEnterStart: scaleEnterStart,
+        globalScrollAnimationTranslateXEnterStart: translateXEnterStart,
+        globalScrollAnimationTranslateYEnterStart: translateYEnterStart,
+        // - end
+        globalScrollAnimationOpacityEnterEnd: opacityEnterEnd,
+        globalScrollAnimationRotateEnterEnd: rotateEnterEnd,
+        globalScrollAnimationScaleEnterEnd: scaleEnterEnd,
+        globalScrollAnimationTranslateXEnterEnd: translateXEnterEnd,
+        globalScrollAnimationTranslateYEnterEnd: translateYEnterEnd,
+
+        // exit
+        globalScrollAnimationExitEnabled: exitEnabled,
+        globalScrollAnimationOpacityExitEnd: opacityExitEnd,
+        globalScrollAnimationRotateExitEnd: rotateExitEnd,
+        globalScrollAnimationScaleExitEnd: scaleExitEnd,
+        globalScrollAnimationTranslateXExitEnd: translateXExitEnd,
+        globalScrollAnimationTranslateYExitEnd: translateYExitEnd,
+    } = app.props;
+
+    const { mode } = app.project;
+    const gsapEase = isSpring ? `elastic.out(${springAmplitude}, ${springStrength})` : ease;
+    const gsapMargin = (value) => value < 0 ? `-=${Math.abs(value)}` : `+=${value}`;
+    const scrollTriggerStart = `${triggerElementPositionEnter}${gsapMargin(marginTop)} ${triggerViewportPositionEnter}${gsapMargin(marginBottom)}`;
+    const scrollTriggerEnd = `${triggerElementPositionExit}${gsapMargin(marginTop)} ${triggerViewportPositionExit}${gsapMargin(marginBottom)}`;
+
+    const wantsRepeat = triggerType == 'instant' && repeat != 'false';
+    const gsapRepeat = !wantsRepeat
+        ? false
+        : {
+            repeat: repeat == 'infinite' ? -1 : repeatTimes,
+            yoyo: repeatYoyo ? true : false,
+            repeatDelay: repeatDelay/1000,
+        }
+
+    const onEnterFrom = {
+        opacity: opacityEnterStart/100,
+        rotation: rotateEnterStart,
+        scale: scaleEnterStart/100,
+        x: `${translateXEnterStart}%`,
+        y: `${translateYEnterStart}%`,
+        autoAlpha: 0,
+        duration: duration/1000,
+        ease: gsapEase,
+        transformOrigin: origin.replace("-", " "),
+    }
+
+    const onEnterTo = {
+        opacity: opacityEnterEnd/100,
+        rotation: rotateEnterEnd,
+        scale: scaleEnterEnd/100,
+        x: `${translateXEnterEnd}%`,
+        y: `${translateYEnterEnd}%`,
+        autoAlpha: 1,
+        duration: duration/1000,
+        ease: gsapEase,
+        transformOrigin: origin.replace("-", " "),
+    }
+
+    const onLeaveTo = {
+        opacity: opacityExitEnd/100,
+        rotation: rotateExitEnd,
+        scale: scaleExitEnd/100,
+        x: `${translateXExitEnd}%`,
+        y: `${translateYExitEnd}%`,
+        autoAlpha: 0,
+        duration: duration/1000,
+        ease: gsapEase,
+        transformOrigin: origin.replace("-", " "),
+    }
+
+    const cssVarsFrom = Object.entries(onEnterFrom).map(([key, value]) => `[--scroll-animation-from-${key}:${value}]`).join(" ");
+    const cssVarsTo = Object.entries(onEnterTo).map(([key, value]) => `[--scroll-animation-to-${key}:${value}]`).join(" ");
+
+    return {
+        isEnabled: triggerType != "none",
+        isScroll: triggerType == "scroll",
+        isInView: triggerType == "inView",
+        isInstant: triggerType == "instant",
+        isExitEnabled: exitEnabled,
+        previewInEditor: previewInEditor && mode == "edit",
+        editorPreviewCSSVars: {
+            from: cssVarsFrom,
+            to: cssVarsTo,
+            duration: `${duration/1000}s`,
+            delay: `${delay/1000}s`,
+        },
+        data: {
+            "data-animation": "true",
+            "data-animation-trigger-type": triggerType,
+            "data-animation-enter-from": JSON.stringify(onEnterFrom).replace(/"/g, '&quot;'),
+            "data-animation-enter-to": JSON.stringify(onEnterTo).replace(/"/g, '&quot;'),
+            "data-animation-exit-to": JSON.stringify(onLeaveTo).replace(/"/g, '&quot;'),
+            "data-animation-trigger-start": scrollTriggerStart,
+            "data-animation-trigger-end": scrollTriggerEnd,
+            "data-animation-repeat": gsapRepeat ? JSON.stringify(gsapRepeat).replace(/"/g, '&quot;') : false
+        },
+    };
+};

package/shared-hooks/animations/globalReveal.js

@@ -0,0 +1,48 @@
+const globalReveal = (rw) => {
+    const {
+        revealAnimationName: name,
+        revealAnimationDirection: direction,
+        revealPlay: play,
+        revealStart: start,
+        revealEnd: end,
+        revealDuration: duration,
+        revealDelay: delay,
+        revealEasing: easing,
+        revealDistance: distance,
+        revealDegrees: degrees,
+        revealScrub: scrub,
+        revealDebug: debug,
+    } = rw.props;
+
+    const { title } = rw.node;
+    const revealID = `reveal-${title.replace(/\s+/g, '-').toLowerCase()}`;
+
+    const gsapTriggerPoints = {
+        "entering-screen": "top bottom",
+        "middle-of-screen": "top center",
+        "exiting-screen": "top top",
+    };
+
+    const animationName = `${name}${direction.charAt(0).toUpperCase() + direction.slice(1)}In`;
+    const exitAnimationName = animationName.replace("In", "Out");
+
+    const data = {
+        "data-reveal": "",
+        "data-reveal-id": revealID,
+        "data-reveal-duration": `${duration/1000}`,
+        "data-reveal-delay": `${delay/1000}`,
+        "data-reveal-easing": easing,
+        "data-reveal-animation": animationName,
+        "data-reveal-exit-animation": exitAnimationName,
+        "data-reveal-play": play,
+        "data-reveal-start": gsapTriggerPoints[start] || gsapTriggerPoints["entering-screen"],
+        "data-reveal-end": gsapTriggerPoints[end] || gsapTriggerPoints["exiting-screen"],
+        "data-reveal-distance": distance,
+        "data-reveal-degrees": degrees,
+        "data-reveal-scrub": scrub || false,
+        "data-reveal-debug": debug || false,
+    }
+
+    return data;
+
+};