@social-mail/social-mail-client 1.7.3 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/properties/groups/AnimateGroupEditor.tsx

@@ -33,5 +33,20 @@ export default function AnimateGroupEditor() {
                 attributeName="styler-on-enter-duration"
                 />
         </div>
+
+        <DropDownProperty
+            label="On Scroll"
+            attributeName="styler-on-scroll"
+            />
+        <div style-display={BindEditor.oneWay((s) => s.selection.element.matches("[styler-on-scroll]"))}>
+            <DropDownProperty
+                label="Effect 1"
+                attributeName="styler-on-scroll-effect-1"
+                />
+            <DropDownProperty
+                label="Effect 2"
+                attributeName="styler-on-scroll-effect-2"
+                />
+        </div>
     </ExpanderPropertyEditor>;
 }

package/styler/styler.css

@@ -18749,6 +18749,29 @@ animated-text[styler-on-hover=zoom-out]:hover > * {
 [styler-on-hover-effect-2-delay=10s] {
   --styler-on-hover-effect-2-delay: 10s;
 }
+[styler-on-scroll] {
+  position: relative;
+}
+[styler-on-scroll] > * {
+  transition: all var(--styler-on-scroll-delay, 0.1s) ease-in-out;
+}
+[above-body][styler-on-scroll=move-away] > * {
+  transform: translateY(calc(var(--above-body-ratio) * 100%)) scale(clamp(0.2, var(--body-ratio), 1), clamp(-0.2, var(--body-ratio), 1));
+}
+[above-body][styler-on-scroll-effect-1=fade-out] > * {
+  opacity: clamp(0.5, var(--body-ratio), 1);
+}
+[above-body][styler-on-scroll-effect-2=blur]::after {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
+  backdrop-filter: blur(clamp(1px, calc(var(--above-body-ratio) * 10px), 10px));
+}
 body {
   font-family: var(--font-default, --default-fonts);
 }