@cntrl-site/sdk-nextjs 1.9.14 → 1.9.16

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -7,6 +7,7 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 const stylesMap = {
   [AreaAnchor.TopLeft]: {},
@@ -31,6 +32,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   const html = decodeBase64(item.commonParams.html);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const pos = stylesMap[anchor];
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const stateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -8,6 +8,7 @@ import { useItemAngle } from '../useItemAngle';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const sdk = useCntrlContext();
@@ -19,6 +20,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useId, useState } from 'react';
+import React, { FC, useContext, useEffect, useId, useState } from 'react';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useRegisterResize } from '../../../common/useRegisterResize';
@@ -9,16 +9,21 @@ import JSXStyle from 'styled-jsx/style';
 import { getLayoutStyles, CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
 import { CompoundChild } from './CompoundChild';
 import { useCompoundItem } from './useCompoundItem';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { items } = item;
+  const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
   const { opacity: itemOpacity } = useCompoundItem(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const itemGeometryService = useContext(ItemGeometryContext);
   const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
@@ -26,6 +31,18 @@ export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, on
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
+  useEffect(() => {
+    // because on first render controllers not yet initialized
+    setTimeout(() => {
+      for (const id of itemIds) {
+        const hasItem = itemGeometryService.hasItem(id);
+        if (hasItem) {
+          const cntrl = itemGeometryService.getControllerById(id);
+          cntrl.setParentId(item.id);
+        }
+      }
+    }, 0);
+  }, [itemIds, item.id]);
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>

package/src/components/items/CustomItem/CustomItem.tsx

@@ -5,6 +5,7 @@ import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {
   const sdk = useCntrlContext();
@@ -14,6 +15,7 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
   const layoutValues: Record<string, any>[] = [item.area];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const stateParams = interactionCtrl?.getState<number>(['angle']);
   const angle = stateParams?.styles?.angle ?? itemAngle;
   if (!component) return null;

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -12,6 +12,7 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { LinkWrapper } from '../LinkWrapper';
 import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -38,6 +39,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const radius = getStyleFromItemStateAndParams(frameStateParams?.styles?.radius, itemRadius);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const validUrl = useMemo(() => {
     if (!layoutParams) return url;
     const validURL = new URL(url);

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -12,6 +12,7 @@ import { YTPlayer } from '../../../utils/Youtube/YoutubeIframeApi';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -38,6 +39,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
   useRegisterResize(div, onResize);
+  useItemGeometry(item.id, div);
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);

package/src/components/items/FileItem/ImageItem.tsx

@@ -13,6 +13,7 @@ import { useLayoutContext } from '../../useLayoutContext';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useItemFXData } from '../../../common/useItemFXData';
 import { getFill } from '../../../utils/getFill';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -28,6 +29,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const itemAngle = useItemAngle(item, sectionId);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(wrapperRef, onResize);
+  useItemGeometry(item.id, wrapperRef);
   const { url, hasGLEffect } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);

package/src/components/items/FileItem/VideoItem.tsx

@@ -14,6 +14,7 @@ import { useVideoFx } from '../../../utils/effects/useVideoFx';
 import { useElementRect } from '../../../utils/useElementRect';
 import { useItemFXData } from '../../../common/useItemFXData';
 import { getFill } from '../../../utils/getFill';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -74,6 +75,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     height
   );
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
     ...(strokeWidth !== undefined ? {

package/src/components/items/GroupItem/GroupItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useId, useState } from 'react';
+import React, { FC, useContext, useEffect, useId, useState } from 'react';
 import { Item, ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
 import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
@@ -9,16 +9,21 @@ import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { CompoundChild } from '../CompoundItem/CompoundChild';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
   const id = useId();
   const { items } = item;
+  const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
   const { opacity: itemOpacity, blur: itemBlur } = useGroupItem(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const itemGeometryService = useContext(ItemGeometryContext);
   const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
@@ -27,6 +32,18 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
+  useEffect(() => {
+    // because on first render controllers not yet initialized
+    setTimeout(() => {
+      for (const id of itemIds) {
+        const hasItem = itemGeometryService.hasItem(id);
+        if (hasItem) {
+          const cntrl = itemGeometryService.getControllerById(id);
+          cntrl.setParentId(item.id);
+        }
+      }
+    }, 0);
+  }, [itemIds, item.id]);
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>

package/src/components/items/Item.tsx

@@ -35,6 +35,7 @@ import { parseSizing, useSizing } from './useSizing';
 import { useItemPointerEvents } from './useItemPointerEvents';
 import { useItemArea } from './useItemArea';
 import { useDraggable } from './useDraggable';
+import { ItemGeometryContext } from '../../ItemGeometry/ItemGeometryContext';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -84,6 +85,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const [isDraggingActive, setIsDraggingActive] = useState(false);
   const wrapperStateProps = interactionCtrl?.getState<number>(['top', 'left']);
   const innerStateProps = interactionCtrl?.getState<number>(['width', 'height', 'scale']);
+  const geometryService = useContext(ItemGeometryContext);
+  const triggerZone = geometryService.getItemBoundary(item.id);
+  const hasItem = geometryService.hasItem(item.id);
+  const geometryController = useMemo(() => hasItem ? geometryService.getControllerById(item.id) : undefined, [hasItem]);
+  if (geometryController) {
+    geometryController.setScale(itemScale!);
+  }
   const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,
@@ -228,8 +236,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
             }
             .item-${item.id}-inner {
               width: ${sizingAxis.x === 'manual'
-                ? `${area.width * 100}vw`
-                : 'max-content'};
+          ? `${area.width * 100}vw`
+          : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
@@ -245,7 +253,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               left: ${area.left * 100}vw;
             }
           `);
-      })}
+    })}
       `}
       </JSXStyle>
     </div>

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useId, useState } from 'react';
+import { FC, useContext, useEffect, useId, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { RectangleItem as TRectangleItem, getLayoutStyles, FillLayer } from '@cntrl-site/sdk';
 import { CntrlColor } from '@cntrl-site/color';
@@ -11,6 +11,7 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { getFill } from '../../../utils/getFill';
 import { areFillsVisible } from '../../../utils/areFillsVisible/areFillsVisible';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -32,6 +33,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
   const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
   const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
   const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -12,6 +12,8 @@ import { useExemplary } from '../../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useCurrentLayout } from '../../../common/useCurrentLayout';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -24,12 +26,15 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     letterSpacing: itemLetterSpacing,
     color: itemColor,
     fontSize,
-    lineHeight
+    lineHeight,
+    xSizing
   } = useRichTextItemValues(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const exemplary = useExemplary();
   const { layoutId } = useCurrentLayout();
   useRegisterResize(ref, onResize);
+  const geometry = useItemGeometry(item.id, ref, RichTextGeometryController, { xSizing });
+  geometry?.setAngle(itemAngle!);
   const stateParams = interactionCtrl?.getState<number | string>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
   const stateStyles = stateParams?.styles ?? {};
   const transition = stateParams?.transition ?? 'none';

package/src/components/items/useRichTextItemValues.ts

@@ -60,6 +60,7 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
 
   const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
   const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
+  const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
 
-  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
+  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
 };

package/src/interactions/InteractionsRegistry.ts

@@ -7,18 +7,23 @@ import {
   ItemAny,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../utils/isItemType';
+import { InteractionItemScrollTrigger, InteractionScrollTrigger } from '@cntrl-site/sdk/lib/types/article/Interaction';
+import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
 
 export class InteractionsRegistry implements InteractionsRegistryPort {
   private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
   private items: ItemAny[];
+  private itemGeometryService: ItemGeometryService;
   private interactions: Interaction[];
   private stateItemsIdsMap: StateItemsIdsMap;
   private interactionStateMap: InteractionStateMap;
   private itemsStages: ItemStages;
   private activeStateIdInteractionIdMap: Record<StateId, InteractionId>;
+  private itemScrollPositionAnimationMap: Map<string, number> = new Map();
 
-  constructor(article: Article, layoutId: string) {
+  constructor(article: Article, layoutId: string, itemGeometryService: ItemGeometryService) {
     this.items = this.unpackItems(article);
+    this.itemGeometryService = itemGeometryService;
     const interactions = article.interactions[layoutId] ?? [];
     const activeStatesIds = interactions.reduce<StateId[]>((map, inter) => {
       const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id;
@@ -54,6 +59,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     this.interactionStateMap = interactionStateMap;
     const itemStages = this.getDefaultItemStages();
     this.itemsStages = itemStages;
+    this.itemScrollPositionAnimationMap = new Map();
   }
 
   register(itemId: ItemId, ctrl: ItemInteractionCtrl) {
@@ -96,28 +102,69 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']> {
-    const available = new Set<InteractionItemTrigger['type']>();
+  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['triggerEvent']> {
+    const available = new Set<InteractionItemTrigger['triggerEvent']>();
     const activeStates = Object.values(this.interactionStateMap);
     for (const interaction of this.interactions) {
       const { triggers } = interaction;
       for (const trigger of triggers) {
-        if (!('itemId' in trigger)) continue;
+        if (!('triggerEvent' in trigger)) continue;
         if (trigger.itemId !== itemId) continue;
         if (activeStates.includes(trigger.from)) {
-          available.add(trigger.type);
+          available.add(trigger.triggerEvent);
         }
       }
     }
     return available;
   }
 
+  getTriggerPositionForItemScrollTrigger(trigger: InteractionItemScrollTrigger): number {
+    const itemRect = this.itemGeometryService.getItemBoundary(trigger.itemId);
+    let triggerPosition = 0;
+    switch (trigger.screenPosition) {
+      case 'top':
+        triggerPosition = itemRect.top;
+        break;
+      case 'center':
+        triggerPosition = itemRect.top - window.innerHeight / 2;
+        break;
+      case 'bottom':
+        triggerPosition = itemRect.top - window.innerHeight;
+        break;
+      default:
+        triggerPosition = itemRect.top;
+        break;
+    }
+    switch (trigger.itemPosition) {
+      case 'top':
+        triggerPosition += 0;
+        break;
+      case 'center':
+        triggerPosition += itemRect.height / 2;
+        break;
+      case 'bottom':
+        triggerPosition += itemRect.height;
+        break;
+      default:
+        triggerPosition += 0;
+        break;
+    }
+    triggerPosition += trigger.offset;
+    return triggerPosition;
+  }
+
+  isItemScrollTriggerOnStartScreen(trigger: InteractionItemScrollTrigger): boolean {
+    const triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
+    return triggerPosition < 0;
+  }
+
   notifyLoad() {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const matchingTrigger = interaction.triggers.find(trigger =>
-        'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
+        ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
+        || (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger))
       );
       if (!matchingTrigger) continue;
       const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -155,22 +202,80 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     }
   }
 
+  scrollPositionNotifyScroll(trigger: InteractionScrollTrigger, position: number): boolean {
+    if (trigger.position === 0) return false;
+    const triggerPosition = trigger.position * window.innerWidth;
+    return triggerPosition < position;
+  }
+
+  scrollItemPositionNotifyScroll(trigger: InteractionItemScrollTrigger, position: number, interaction: Interaction): boolean {
+    let triggerPosition;
+    let isScrolledPastTrigger = false;
+    const itemRect = this.itemGeometryService.getItemBoundary(trigger.itemId);
+    if (!itemRect) return false;
+    switch (trigger.screenPosition) {
+      case 'top':
+        triggerPosition = 0;
+        break;
+      case 'center':
+        triggerPosition = window.innerHeight / 2;
+        break;
+      case 'bottom':
+        triggerPosition = window.innerHeight;
+        break;
+      default:
+        triggerPosition = 0;
+        break;
+    }
+    triggerPosition -= trigger.offset;
+    switch (trigger.itemPosition) {
+      case 'top':
+        isScrolledPastTrigger = itemRect.y < triggerPosition;
+        break;
+      case 'center':
+        isScrolledPastTrigger = itemRect.y + itemRect.height / 2 < triggerPosition;
+        break;
+      case 'bottom':
+        isScrolledPastTrigger = itemRect.bottom < triggerPosition;
+        break;
+      default:
+        isScrolledPastTrigger = itemRect.y < triggerPosition;
+        break;
+    }
+    if (isScrolledPastTrigger && !this.itemScrollPositionAnimationMap.get(interaction.id)) {
+      this.itemScrollPositionAnimationMap.set(interaction.id, position + itemRect.y - triggerPosition);
+    }
+    if (this.itemScrollPositionAnimationMap.get(interaction.id)! >= position) isScrolledPastTrigger = false;
+    return isScrolledPastTrigger;
+  }
+
   notifyScroll(position: number) {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
       const matchingTrigger = interaction.triggers.find((trigger) => {
-        if (!('position' in trigger) || trigger.position === 0) return false;
-        const triggerPosition = trigger.position * window.innerWidth;
-        const isScrolledPastTrigger = triggerPosition < position;
+        if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position') return false;
+        let isScrolledPastTrigger = false;
+        if (trigger.type === 'scroll-position') {
+          isScrolledPastTrigger = this.scrollPositionNotifyScroll(trigger, position);
+        }
+        if (trigger.type === 'item-scroll-position') {
+          isScrolledPastTrigger = this.scrollItemPositionNotifyScroll(trigger, position, interaction);
+        }
         if (!isScrolledPastTrigger && !trigger.isReverse) return false;
         const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
         return stateId === currentStateId;
       });
-      if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
-      const triggerPosition = matchingTrigger.position * window.innerWidth;
-      const isScrolledPastTrigger = triggerPosition < position;
+      if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId) continue;
+      let isScrolledPastTrigger = false;
+      if (matchingTrigger.type === 'scroll-position') {
+        const triggerPosition = matchingTrigger.position * window.innerWidth;
+        isScrolledPastTrigger = triggerPosition < position;
+      }
+      if (matchingTrigger.type === 'item-scroll-position') {
+        isScrolledPastTrigger = this.itemScrollPositionAnimationMap.get(interaction.id)! < position; // scroll down
+      }
       const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
       this.setCurrentStateForInteraction(interaction.id, targetStateId);
       const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
@@ -210,10 +315,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const matchingTrigger = interaction.triggers.find((trigger) =>
-        'itemId' in trigger
+        'triggerEvent' in trigger
         && trigger.itemId === itemId
         && trigger.from === currentStateId
-        && trigger.type === triggerType
+        && trigger.triggerEvent === triggerType
       );
       if (!matchingTrigger) continue;
       const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -366,7 +471,7 @@ type TransitioningStage = {
 type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
 type InteractionStateMap = Record<InteractionId, StateId>;
 type StateItemsIdsMap = Record<StateId, ItemId[]>;
-type TriggerType = InteractionItemTrigger['type'];
+type TriggerType = InteractionItemTrigger['triggerEvent'];
 type InteractionId = string;
 type StateId = string;
 type ItemId = string;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,6 +1,6 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
-import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
+import { getStyleKeysFromCSSProperty } from '../ItemGeometry/CSSPropertyNameMap';
 import { FillLayer, InteractionItemTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
@@ -30,7 +30,7 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['triggerEvent']): boolean {
     const triggers = this.registry.getItemAvailableTriggers(itemId);
     return triggers.has(triggerType);
   }

package/src/interactions/getTransition.ts

@@ -1,4 +1,4 @@
-import { CSSPropertyNameMap } from './CSSPropertyNameMap';
+import { CSSPropertyNameMap } from '../ItemGeometry/CSSPropertyNameMap';
 
 export function getTransition(
   state: Record<string, StateInfo>,

package/src/interactions/types.ts

@@ -2,7 +2,7 @@ import { ArticleItemType, FillLayer, InteractionItemTrigger, ItemState } from '@
 
 export interface ItemInteractionCtrl {
   getState<T>(keys: string[]): StateCSSInfo<T>;
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
+  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['triggerEvent']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -14,7 +14,7 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps<unknown>;
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
+  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['triggerEvent']>;
   notifyItemTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }

package/src/provider/InteractionsContext.tsx

@@ -3,6 +3,7 @@ import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
 import { Article } from '@cntrl-site/sdk';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { ArticleRectContext } from './ArticleRectContext';
+import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
 
 export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
 
@@ -13,10 +14,11 @@ interface Props {
 export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
   const { layoutId } = useCurrentLayout();
   const articleRectObserver = useContext(ArticleRectContext);
+  const itemGeometryService = useContext(ItemGeometryContext);
   const registry = useMemo(() => {
     if (!layoutId) return;
-    return new InteractionsRegistry(article, layoutId);
-  }, [layoutId]);
+    return new InteractionsRegistry(article, layoutId, itemGeometryService);
+  }, [layoutId, itemGeometryService]);
 
   useEffect(() => {
     if (!registry || !articleRectObserver) return;

package/src/utils/CSSNumeric.ts

@@ -0,0 +1,19 @@
+const reCSSNumeric = /([+-]?(?:\d*\.\d|\d)\d*)(\w+)/;
+
+interface CSSNumberValue {
+  value: number;
+  unit?: string;
+}
+
+export function parseCSSNumber(input: string): CSSNumberValue {
+  const match = reCSSNumeric.exec(input);
+  if (!match) return { value: Number.NaN };
+  return {
+    value: Number.parseFloat(match[1]),
+    unit: match[2]
+  };
+}
+
+export function formatCSSNumber(input: CSSNumberValue): string {
+  return `${input.value}${input.unit ?? ''}`;
+}