rw-elements-tools 1.2.0

package/controls/Animations/AnimationSettings.js

@@ -0,0 +1,437 @@
+const AnimationSettings = [
+    {
+        title: "Type",
+        id: "globalScrollAnimationTrigger",
+        responsive: false,
+        select: {
+            default: "instant",
+            items: [
+                {
+                    title: "Instant",
+                    value: "instant",
+                },
+                {
+                    title: "Scroll",
+                    value: "inView",
+                },
+                {
+                    title: "Scrub",
+                    value: "scroll",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'instant'",
+        information: {},
+        title: "The animation is triggered immediately on page load.",
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'inView'",
+        information: {},
+        title: "The animation is triggered when the component enters the viewport.",
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll'",
+        information: {},
+        title: "The animation progress is linked to window scroll position.",
+    },
+    {
+        divider: {},
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'scroll'",
+        title: "Duration",
+        id: "globalScrollAnimationDuration",
+        responsive: false,
+        number: {
+            default: 2000,
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'scroll'",
+        title: "Delay",
+        id: "globalScrollAnimationDelay",
+        responsive: false,
+        number: {
+            default: 0,
+            subtitle: "In milliseconds",
+        }
+    },
+    {
+        title: "Origin",
+        id: "globalScrollAnimationOrigin",
+        responsive: false,
+        select: {
+          use: "TransformOrigins",
+        }
+    },
+    {
+        title: "Ease",
+        id: "globalScrollAnimationEase",
+        responsive: false,
+        select: {
+            default: "easeInOut",
+            items: [
+                { title: "None", value: "none" },
+                { title: "Linear", value: "linear" },
+                { title: "Power0", value: "power0" },
+                { title: "Power1", value: "power1" },
+                { title: "Power2", value: "power2" },
+                { title: "Power3", value: "power3" },
+                { title: "Power4", value: "power4" },
+                { title: "Sine easeIn", value: "sine.in" },
+                { title: "Sine easeOut", value: "sine.out" },
+                { title: "Sine easeInOut", value: "sine.inOut" },
+                { title: "Circ easeIn", value: "circ.in" },
+                { title: "Circ easeOut", value: "circ.out" },
+                { title: "Circ easeInOut", value: "circ.inOut" },
+                { title: "Expo easeIn", value: "expo.in" },
+                { title: "Expo easeOut", value: "expo.out" },
+                { title: "Expo easeInOut", value: "expo.inOut" },
+                { title: "Back easeIn", value: "back.in" },
+                { title: "Back easeOut", value: "back.out" },
+                { title: "Back easeInOut", value: "back.inOut" },
+                { title: "Elastic easeIn", value: "elastic.in" },
+                { title: "Elastic easeOut", value: "elastic.out" },
+                { title: "Elastic easeInOut", value: "elastic.inOut" },
+                { title: "Bounce easeIn", value: "bounce.in" },
+                { title: "Bounce easeOut", value: "bounce.out" },
+                { title: "Bounce easeInOut", value: "bounce.inOut" },
+                { title: "Steps", value: "steps" },
+                // { title: "Rough", value: "rough" },
+                // { title: "Slow", value: "slow" },
+                { title: "Custom", value: "custom" }
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationEase == 'steps'",
+        title: "Steps",
+        id: "globalScrollAnimationEaseSteps",
+        responsive: false,
+        number: {
+            default: 10,
+        }
+    },
+    {
+        visible: "globalScrollAnimationEase == 'custom'",
+        title: "Custom Ease",
+        id: "globalScrollAnimationEaseCustom",
+        responsive: false,
+        text: {
+            default: ".17,.67,.83,.67",
+        }
+    },
+    {
+        divider: {},
+    },
+    {
+        title: "Spring",
+        heading: {}
+    },
+    {
+        id: "globalScrollAnimationIsSpring",
+        title: "Enable",
+        responsive: false,
+        switch: {}
+    },
+    {
+        visible: "globalScrollAnimationIsSpring == 'true'",
+        title: "Strength",
+        id: "globalScrollAnimationSpringStrength",
+        responsive: false,
+        slider: {
+            default: "0.3",
+            items: [
+                {
+                    title: "0.1",
+                    value: "0.1",
+                },
+                {
+                    title: "0.2",
+                    value: "0.2",
+                },
+                {
+                    title: "0.3",
+                    value: "0.3",
+                },
+                {
+                    title: "0.4",
+                    value: "0.4",
+                },
+                {
+                    title: "0.5",
+                    value: "0.5",
+                },
+                {
+                    title: "0.6",
+                    value: "0.6",
+                },
+                {
+                    title: "0.7",
+                    value: "0.7",
+                },
+                {
+                    title: "0.8",
+                    value: "0.8",
+                },
+                {
+                    title: "0.9",
+                    value: "0.9",
+                },
+                {
+                    title: "1",
+                    value: "1",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationIsSpring == 'true'",
+        title: "Aplitude",
+        id: "globalScrollAnimationSpringAmplitude",
+        responsive: false,
+        slider: {
+            default: "1",
+            items: [
+                {
+                    title: "0.5",
+                    value: "0.5",
+                },
+                {
+                    title: "0.75",
+                    value: "0.75",
+                },
+                {
+                    title: "1",
+                    value: "1",
+                },
+                {
+                    title: "1.25",
+                    value: "1.25",
+                },
+                {
+                    title: "1.5",
+                    value: "1.5",
+                },
+                {
+                    title: "1.75",
+                    value: "1.75",
+                },
+                {
+                    title: "2",
+                    value: "2",
+                },
+                {
+                    title: "2.25",
+                    value: "2.25",
+                },
+                {
+                    title: "2.5",
+                    value: "2.5",
+                },
+                {
+                    title: "2.75",
+                    value: "2.75",
+                },
+                {
+                    title: "3",
+                    value: "3",
+                },
+            ]
+        }
+    },
+    {
+        divider: {},
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Trigger Enter",
+        heading: {}
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Element",
+        id: "globalScrollAnimationTriggerElementPositionEnter",
+        responsive: false,
+        select: {
+            default: "top",
+            items: [
+                {
+                    title: "Top",
+                    value: "top",
+                },
+                {
+                    title: "Center",
+                    value: "center",
+                },
+                {
+                    title: "Bottom",
+                    value: "bottom",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Viewport",
+        id: "globalScrollAnimationTriggerViewportPositionEnter",
+        responsive: false,
+        select: {
+            default: "center",
+            items: [
+                {
+                    title: "Top",
+                    value: "top",
+                },
+                {
+                    title: "Center",
+                    value: "center",
+                },
+                {
+                    title: "Bottom",
+                    value: "bottom",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Trigger Exit",
+        heading: {}
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Element",
+        id: "globalScrollAnimationTriggerElementPositionExit",
+        responsive: false,
+        select: {
+            default: "top",
+            items: [
+                {
+                    title: "Top",
+                    value: "top",
+                },
+                {
+                    title: "Center",
+                    value: "center",
+                },
+                {
+                    title: "Bottom",
+                    value: "bottom",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        title: "Viewport",
+        id: "globalScrollAnimationTriggerViewportPositionExit",
+        responsive: false,
+        select: {
+            default: "center",
+            items: [
+                {
+                    title: "Top",
+                    value: "top",
+                },
+                {
+                    title: "Center",
+                    value: "center",
+                },
+                {
+                    title: "Bottom",
+                    value: "bottom",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger == 'scroll' || globalScrollAnimationTrigger == 'inView'",
+        divider: {},
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none' && globalScrollAnimationTrigger == 'inView'",
+        title: "Trigger Margin",
+        heading: {}
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none' && globalScrollAnimationTrigger == 'inView'",
+        title: "Top",
+        id: "globalScrollAnimationMarginTop",
+        responsive: false,
+        number: {
+            default: 0,
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none' && globalScrollAnimationTrigger == 'inView'",
+        title: "Bottom",
+        id: "globalScrollAnimationMarginBottom",
+        responsive: false,
+        number: {
+            default: 0,
+        }
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none' && globalScrollAnimationTrigger == 'inView'",
+        divider: {},
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none'",
+        title: "Repeat",
+        heading: {}
+    },
+    {
+        visible: "globalScrollAnimationTrigger != 'none'",
+        title: "Repeat",
+        id: "globalScrollAnimationRepeat",
+        responsive: false,
+        select: {
+            default: "false",
+            items: [
+                {
+                    title: "Off",
+                    value: "false",
+                },
+                {
+                    title: "Infinite",
+                    value: "infinite",
+                },
+                {
+                    title: "Set Number of Times",
+                    value: "setTimes",
+                },
+            ]
+        }
+    },
+    {
+        visible: "globalScrollAnimationRepeat == 'setTimes'",
+        title: "Times",
+        id: "globalScrollAnimationRepeatTimes",
+        responsive: false,
+        number: {
+            default: 3,
+        }
+    },
+    {
+        visible: "globalScrollAnimationRepeat != 'false'",
+        title: "Yoyo",
+        id: "globalScrollAnimationRepeatYoyo",
+        responsive: false,
+        switch: {}
+    },
+    {
+        visible: "globalScrollAnimationRepeat != 'false'",
+        title: "Delay",
+        id: "globalScrollAnimationRepeatDelay",
+        responsive: false,
+        number: {
+            default: 0,
+            subtitle: "In milliseconds",
+        }
+    },
+]
+
+export default AnimationSettings;

package/controls/Animations/Reveals.js

@@ -0,0 +1,168 @@
+const Reveals = [
+  {
+    title: "Mode",
+    id: "revealScrub",
+    responsive: false,
+    segmented: {
+      default: false,
+      items: [
+        { title: "Smooth", value: false },
+        { title: "Scrub", value: true },
+      ]
+    }
+  },
+  {
+    title: "Animation",
+    id: "revealAnimationName",
+    responsive: false,
+    select: {
+      use: "RevealAnimations"
+    }
+  },
+  {
+    title: "Direction",
+    id: "revealAnimationDirection",
+    responsive: false,
+    segmented: {
+      default: "up",
+      items: [
+        { icon: "arrow.up", value: "up" },
+        { icon: "arrow.down", value: "down" },
+        { icon: "arrow.left", value: "left" },
+        { icon: "arrow.right", value: "right" }
+      ]
+    }
+  },
+  {
+    title: "Distance",
+    id: "revealDistance",
+    responsive: false,
+    text: {
+      default: "200px"
+    }
+  },
+  {
+    visible: "revealAnimationName == 'rotate'",
+    title: "Degrees",
+    id: "revealDegrees",
+    responsive: false,
+    number: {
+      default: "90"
+    }
+  },
+  {
+    divider: {}
+  },
+  {
+    title: "Trigger",
+    heading: {}
+  },
+  {
+    title: "Play",
+    id: "revealPlay",
+    responsive: false,
+    select: {
+      default: "enter-exit",
+      items: [
+        { title: "Once on enter", value: "enter-once" },
+        { title: "Always on enter", value: "enter-always" },
+        { title: "Enter and exit", value: "enter-exit" },
+      ]
+    }
+  },
+  {
+    title: "Start",
+    id: "revealStart",
+    responsive: false,
+    segmented: {
+      default: "entering-screen",
+      items: [
+        { icon: "align.vertical.bottom.fill", value: "entering-screen" },
+        { icon: "align.vertical.center.fill", value: "middle-of-screen" },
+        { icon: "align.vertical.top.fill", value: "exiting-screen" }
+      ]
+    }
+  },
+  {
+    title: "End",
+    id: "revealEnd",
+    responsive: false,
+    segmented: {
+      default: "exiting-screen",
+      items: [
+        { icon: "align.vertical.bottom.fill", value: "entering-screen" },
+        { icon: "align.vertical.center.fill", value: "middle-of-screen" },
+        { icon: "align.vertical.top.fill", value: "exiting-screen" }
+      ]
+    }
+  },
+  {
+    divider: {}
+  },
+  {
+    title: "Timing",
+    heading: {}
+  },
+  {
+    title: "Easing",
+    id: "revealEasing",
+    responsive: false,
+    select: {
+      default: "power1",
+      items: [
+        { title: "Linear", value: "linear" },
+        { title: "Power0", value: "power0" },
+        { title: "Power1", value: "power1" },
+        { title: "Power2", value: "power2" },
+        { title: "Power3", value: "power3" },
+        { title: "Power4", value: "power4" },
+        { title: "Sine", value: "sine.out" },
+        { title: "Circ", value: "circ.out" },
+        { title: "Expo", value: "expo.out" },
+        { title: "Back", value: "back.out" },
+        { title: "Elastic", value: "elastic.out" },
+        { title: "Bounce", value: "bounce.out" }
+      ]
+    }
+  },
+  {
+    visible: "revealScrub == false",
+    title: "Duration",
+    id: "revealDuration",
+    responsive: false,
+    number: {
+      default: 500
+    }
+  },
+  {
+    visible: "revealScrub == false",
+    title: "Delay",
+    id: "revealDelay",
+    responsive: false,
+    number: {
+      default: 0,
+      subtitle: "in milliseconds"
+    }
+  },
+  {
+    divider: {}
+  },
+  {
+    title: "Debug",
+    heading: {}
+  },
+  {
+    title: "Markers",
+    id: "revealDebug",
+    responsive: false,
+    switch: {
+      default: false
+    }
+  },
+  {
+    information: {},
+    title: "Visualize animation start and end points."
+  },
+];
+
+export default Reveals;

package/controls/Animations/ScrollAnimation_Opacity.js

@@ -0,0 +1,15 @@
+const Opacity = [
+    {
+      title: "Opacity",
+      id: "globalScrollAnimationOpacity",
+      responsive: false,
+      slider: {
+        use: "Slider",
+        default: 100,
+        units: "%",
+      },
+    },
+  ];
+  
+  export default Opacity;
+  

package/controls/Animations/ScrollAnimation_Rotate.js

@@ -0,0 +1,17 @@
+const Rotate = [
+    {
+      title: "Rotate",
+      id: "globalScrollAnimationRotate",
+      responsive: false,
+      slider: {
+        min: -360,
+        max: 360,
+        round: true,
+        default: 0,
+        units: "deg",
+      },
+    },
+  ];
+  
+  export default Rotate;
+  

package/controls/Animations/ScrollAnimation_Scale.js

@@ -0,0 +1,18 @@
+const Scale = [
+    {
+      title: "Scale",
+      id: "globalScrollAnimationScale",
+      responsive: false,
+      slider: {
+        use: "Slider",
+        default: 100,
+        min: 0,
+        max: 200,
+        round: true,
+        units: "%",
+      },
+    },
+  ];
+  
+  export default Scale;
+  

package/controls/Animations/ScrollAnimation_Translate.js

@@ -0,0 +1,31 @@
+const Translate = [
+    {
+      title: "Horizontal",
+      id: "globalScrollAnimationTranslateX",
+      responsive: false,
+      slider: {
+        use: "Slider",
+        default: 0,
+        min: -100,
+        max: 100,
+        round: true,
+        units: "%",
+      }
+    },
+    {
+      title: "Vertical",
+      id: "globalScrollAnimationTranslateY",
+      responsive: false,
+      slider: {
+        use: "Slider",
+        default: 0,
+        min: -100,
+        max: 100,
+        round: true,
+        units: "%",
+      }
+    },
+  ];
+  
+  export default Translate;
+