@cntrl-site/sdk-nextjs 1.0.19-alpha.0 → 1.0.19-alpha.2

package/lib/components/Item.js

@@ -33,6 +33,7 @@ const KeyframesContext_1 = require("../provider/KeyframesContext");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const getStatesCSS_1 = require("../utils/getStatesCSS");
 const useStatesClassNames_1 = require("./useStatesClassNames");
+const useStatesTransitions_1 = require("./useStatesTransitions");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -56,6 +57,7 @@ const RichTextWrapper = ({ isRichText, children }) => {
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
     const itemWrapperRef = (0, react_1.useRef)(null);
+    const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
     const id = (0, react_1.useId)();
@@ -107,11 +109,13 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
     const innerStatesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'item-inner');
     const wrapperStatesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'item-wrapper');
+    (0, useStatesTransitions_1.useStatesTransitions)(itemWrapperRef.current, item.state, ['top', 'left']);
+    (0, useStatesTransitions_1.useStatesTransitions)(itemInnerRef.current, item.state, ['width', 'height', 'scale']);
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id} ${wrapperStatesClassNames}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: `${stickyTop * 100}vw`,
                     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner ${innerStatesClassNames}`, onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner ${innerStatesClassNames}`, ref: itemInnerRef, onClick: () => {
                             const trigger = getItemTrigger(item.id, 'click');
                             if (!trigger)
                                 return;
@@ -157,7 +161,6 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
-              transition: all 0.2s ease;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
@@ -167,7 +170,6 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              transition: all 0.2s ease;
             }
             ${statesWrapperCSS}
             ${statesInnerCSS}

package/lib/components/items/CodeEmbedItem.js

@@ -15,6 +15,7 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
 const useStatesClassNames_1 = require("../useStatesClassNames");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const stylesMap = {
     [sdk_1.AreaAnchor.TopLeft]: {},
     [sdk_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
@@ -38,6 +39,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize }) => {
     const pos = stylesMap[anchor];
     const layoutValues = [item.area, item.layoutParams, item.state];
     const statesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-wrapper');
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'opacity']);
     (0, react_1.useEffect)(() => {
         if (!ref)
             return;

package/lib/components/items/CustomItem.js

@@ -13,6 +13,7 @@ const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const CustomItem = ({ item, onResize, sectionId }) => {
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -22,6 +23,7 @@ const CustomItem = ({ item, onResize, sectionId }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const statesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'custom-component');
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle']);
     if (!component)
         return null;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id} ${statesClassNames}`, ref: setRef, style: Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, stateParams]) => {

package/lib/components/items/GroupItem.js

@@ -16,6 +16,7 @@ const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
@@ -27,6 +28,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     const statesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'group');
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['opacity', 'angle']);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id} ${statesClassNames}`, ref: setRef, style: Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;

package/lib/components/items/ImageItem.js

@@ -19,6 +19,7 @@ const useElementRect_1 = require("../../utils/useElementRect");
 const useLayoutContext_1 = require("../useLayoutContext");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
 uniform sampler2D u_pattern;
@@ -35,8 +36,9 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
-    const [ref, setRef] = (0, react_1.useState)(null);
-    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
+    const [imgRef, setImgRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
     const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
@@ -55,6 +57,9 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const height = area && exemplary ? area.height * exemplary : 0;
     const statesWrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'image-wrapper');
     const statesImgClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'image');
+    (0, useStatesTransitions_1.useStatesTransitions)(wrapperRef, item.state, ['angle', 'opacity', 'blur']);
+    (0, useStatesTransitions_1.useStatesTransitions)(imgRef, item.state, ['strokeWidth', 'radius', 'strokeColor']);
+    (0, useStatesTransitions_1.useStatesTransitions)(fxCanvas.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
@@ -64,11 +69,11 @@ const ImageItem = ({ item, sectionId, onResize }) => {
         cursor: FXCursor,
         controls: controlValues
     }, width, height);
-    const rect = (0, useElementRect_1.useElementRect)(ref);
+    const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
     const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
     const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
     const inlineStyles = Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}));
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id} ${statesWrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasGLEffect && isFXAllowed ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id} ${statesImgClassNames}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id} ${statesImgClassNames}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id} ${statesWrapperClassNames}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasGLEffect && isFXAllowed ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id} ${statesImgClassNames}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id} ${statesImgClassNames}`, style: inlineStyles, ref: setImgRef, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/RectangleItem.js

@@ -16,6 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
 const useStatesClassNames_1 = require("../useStatesClassNames");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const RectangleItem = ({ item, sectionId, onResize }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
@@ -29,6 +30,7 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const statesClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'rectangle');
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id} ${statesClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
                         : {})) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/components/items/RichTextItem.js

@@ -18,6 +18,7 @@ const useExemplary_1 = require("../../common/useExemplary");
 const useItemAngle_1 = require("../useItemAngle");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
@@ -30,6 +31,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const exemplary = (0, useExemplary_1.useExemplary)();
     const stateClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'rich-text-wrapper');
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id} ${stateClassNames}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, states]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         const statesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'rich-text-wrapper', ['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], states);

package/lib/components/items/VideoItem.js

@@ -18,6 +18,7 @@ const useLayoutContext_1 = require("../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const VideoItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -33,6 +34,8 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const statesWrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video-wrapper');
     const statesVideoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video');
     const hasScrollPlayback = scrollPlayback !== null;
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'opacity', 'blur']);
+    (0, useStatesTransitions_1.useStatesTransitions)(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id} ${statesWrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id} ${statesWrapperClassNames}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id} ${statesVideoClassNames}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/components/items/VimeoEmbed.js

@@ -16,6 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -32,6 +33,8 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video-wrapper');
     const videoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video');
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'opacity']);
+    (0, useStatesTransitions_1.useStatesTransitions)(iframeRef, item.state, ['radius']);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));

package/lib/components/items/YoutubeEmbed.js

@@ -17,6 +17,7 @@ const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi")
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useStatesClassNames_1 = require("../useStatesClassNames");
 const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -26,6 +27,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
+    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
@@ -33,6 +35,8 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-youtube-video-wrapper');
     const embedClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed');
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
+    (0, useStatesTransitions_1.useStatesTransitions)(div, item.state, ['radius']);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -83,7 +87,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { ref: setWrapperRef, className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();

package/lib/components/useStatesTransitions.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatesTransitions = void 0;
+const react_1 = require("react");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+function useStatesTransitions(el, state, values) {
+    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const activeStates = Object.values(interactionsStatesMap);
+    const statesForLayout = (0, react_1.useMemo)(() => layoutId ? state[layoutId] : {}, [state, layoutId]);
+    const itemStatesIds = statesForLayout ? Object.keys(statesForLayout) : [];
+    const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
+    (0, react_1.useEffect)(() => {
+        if (!itemActiveStateId || !el)
+            return;
+        const state = statesForLayout[itemActiveStateId];
+        const transitionStr = getTransition(state, 'in', values);
+        const slowestProp = getSlowestProperty(state, 'in', values);
+        if (!transitionStr)
+            return;
+        el.style.transition = transitionStr;
+        el.ontransitionend = (e) => {
+            e.stopPropagation();
+            if (e.target !== el || e.propertyName !== slowestProp)
+                return;
+            el.style.transition = 'none';
+        };
+        return () => {
+            const transitionStr = getTransition(state, 'out', values);
+            const slowestProp = getSlowestProperty(state, 'out', values);
+            if (!transitionStr)
+                return;
+            el.style.transition = transitionStr;
+            el.ontransitionend = (e) => {
+                e.stopPropagation();
+                if (e.target !== el || e.propertyName !== slowestProp)
+                    return;
+                el.style.transition = 'none';
+            };
+        };
+    }, [itemActiveStateId, statesForLayout, el]);
+}
+exports.useStatesTransitions = useStatesTransitions;
+const CSSPropertyNameMap = {
+    'width': 'width',
+    'height': 'height',
+    'top': 'top',
+    'left': 'left',
+    'scale': 'transform',
+    'angle': 'transform',
+    'opacity': 'opacity',
+    'radius': 'border-radius',
+    'strokeWidth': 'border-width',
+    'strokeColor': 'border-color',
+    'fillColor': 'background-color',
+    'blur': 'filter',
+    'backdropBlur': 'backdrop-filter',
+    'letterSpacing': 'letter-spacing',
+    'wordSpacing': 'word-spacing',
+    'color': 'color'
+};
+function getTransition(state, direction, values) {
+    return Object.entries(state)
+        .filter(([key]) => values.includes(key))
+        .map(([key, params]) => {
+        const cssKey = CSSPropertyNameMap[key];
+        if (!cssKey) {
+            throw new Error(`Cannot translate "${key}" to a CSS property.`);
+        }
+        return `${cssKey} ${params[direction].duration}ms ${params[direction].timing} ${params[direction].delay}ms`;
+    }, [])
+        .join(', ');
+}
+function getSlowestProperty(state, direction, values) {
+    const mappedEntries = Object.entries(state)
+        .filter(([key]) => values.includes(key))
+        .map(([key, params]) => {
+        const transitionParams = params[direction];
+        return {
+            key,
+            time: transitionParams.duration + transitionParams.delay
+        };
+    });
+    if (mappedEntries.length === 0)
+        return '';
+    const { key } = mappedEntries.reduce((slowest, current) => current.time > slowest.time ? current : slowest);
+    return CSSPropertyNameMap[key];
+}

package/lib/utils/StateStyles/StateStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStateStyles = exports.getTransitions = void 0;
+exports.getTransitions = exports.getStateStyles = void 0;
 const color_1 = require("@cntrl-site/color");
 const getItemTopStyle_1 = require("../getItemTopStyle");
 const stateTransformationMap = {
@@ -39,41 +39,51 @@ const CSSPropertyNameMap = {
     'wordSpacing': 'word-spacing',
     'color': 'color'
 };
-function getTransitions(values, state) {
+function getStateStyles(values, state, anchorSide) {
     if (!state)
-        return 'unset';
-    const transitionValues = values.reduce((acc, valueName) => {
+        return '';
+    const stateValues = values.reduce((acc, valueName) => {
+        // @ts-ignore
         if (valueName in state && state[valueName] !== undefined) {
-            // @ts-ignore TODO
+            // @ts-ignore
             const stateProperties = state[valueName];
+            const getter = stateTransformationMap[valueName];
             return [
                 ...acc,
-                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
+                getter(stateProperties.value, anchorSide)
             ];
         }
         return acc;
     }, []);
-    if (!transitionValues.length)
-        return 'unset';
-    return transitionValues.join(', ');
+    if (!stateValues.length)
+        return '';
+    // @ts-ignore
+    const transitionStr = getTransitions(values, state);
+    stateValues.push(`transition: ${transitionStr};`);
+    return stateValues.join('\n');
 }
-exports.getTransitions = getTransitions;
-function getStateStyles(values, state, anchorSide) {
+exports.getStateStyles = getStateStyles;
+function getTransitions(values, state) {
     if (!state)
-        return '';
-    const stateValues = values.reduce((acc, valueName) => {
+        return 'unset';
+    const transitionValues = values.reduce((acc, valueName) => {
+        // @ts-ignore TODO
         if (valueName in state && state[valueName] !== undefined) {
             // @ts-ignore TODO
             const stateProperties = state[valueName];
             return [
                 ...acc,
-                stateTransformationMap[valueName](stateProperties.value, anchorSide)
+                // @ts-ignore
+                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
             ];
         }
         return acc;
     }, []);
-    if (!stateValues.length)
-        return '';
-    return stateValues.join('\n');
+    if (!transitionValues.length)
+        return 'unset';
+    return transitionValues.join(', ');
 }
-exports.getStateStyles = getStateStyles;
+exports.getTransitions = getTransitions;
+// export function getStateTransitions<T extends ArticleItemType>(
+//
+// )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.19-alpha.0",
+  "version": "1.0.19-alpha.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.4-alpha.7",
+    "@cntrl-site/sdk": "^1.12.4-alpha.8",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/Item.tsx

@@ -34,6 +34,7 @@ import { KeyframesContext } from '../provider/KeyframesContext';
 import { InteractionsContext } from '../provider/InteractionsContext';
 import { getStatesCSS } from '../utils/getStatesCSS';
 import { useStatesClassNames } from './useStatesClassNames';
+import { useStatesTransitions } from './useStatesTransitions';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -81,6 +82,7 @@ const noop = () => null;
 
 export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
+  const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const keyframesRepo = useContext(KeyframesContext);
   const id = useId();
@@ -134,6 +136,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const isRichText = isItemType(item, ArticleItemType.RichText);
   const innerStatesClassNames = useStatesClassNames(item.id, item.state, 'item-inner');
   const wrapperStatesClassNames = useStatesClassNames(item.id, item.state, 'item-wrapper');
+  useStatesTransitions(itemWrapperRef.current, item.state, ['top', 'left']);
+  useStatesTransitions(itemInnerRef.current, item.state, ['width', 'height', 'scale']);
   return (
     <div
       className={`item-wrapper-${item.id} ${wrapperStatesClassNames}`}
@@ -157,6 +161,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         <RichTextWrapper isRichText={isRichText}>
           <div
             className={`item-${item.id}-inner ${innerStatesClassNames}`}
+            ref={itemInnerRef}
             onClick={() => {
               const trigger = getItemTrigger(item.id, 'click');
               if (!trigger) return;
@@ -211,7 +216,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
-              transition: all 0.2s ease;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
@@ -221,7 +225,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              transition: all 0.2s ease;
             }
             ${statesWrapperCSS}
             ${statesInnerCSS}

package/src/components/items/CodeEmbedItem.tsx

@@ -9,6 +9,7 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
 import { getStatesCSS } from '../../utils/getStatesCSS';
 import { useStatesClassNames } from '../useStatesClassNames';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 const stylesMap = {
   [AreaAnchor.TopLeft]: {},
@@ -33,6 +34,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   const pos = stylesMap[anchor];
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
   const statesClassNames = useStatesClassNames(item.id, item.state, 'embed-wrapper');
+  useStatesTransitions(ref!, item.state, ['angle', 'blur', 'opacity']);
 
   useEffect(() => {
     if (!ref) return;

package/src/components/items/CustomItem.tsx

@@ -7,6 +7,7 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId }) => {
   const sdk = useCntrlContext();
@@ -17,6 +18,7 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const statesClassNames = useStatesClassNames(item.id, item.state, 'custom-component');
+  useStatesTransitions(ref, item.state, ['angle'])
   if (!component) return null;
   return (
     <>

package/src/components/items/GroupItem.tsx

@@ -9,6 +9,7 @@ import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight }) => {
   const id = useId();
@@ -20,6 +21,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const statesClassNames = useStatesClassNames(item.id, item.state, 'group');
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  useStatesTransitions(ref!, item.state, ['opacity', 'angle'])
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>

package/src/components/items/ImageItem.tsx

@@ -13,6 +13,7 @@ import { useElementRect } from '../../utils/useElementRect';
 import { useLayoutContext } from '../useLayoutContext';
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
@@ -30,8 +31,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+  const [imgRef, setImgRef] = useState<HTMLImageElement | HTMLCanvasElement | null>(null);
+  useRegisterResize(wrapperRef, onResize);
   const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
@@ -50,6 +52,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const height = area && exemplary ? area.height * exemplary : 0;
   const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'image-wrapper');
   const statesImgClassNames = useStatesClassNames(item.id, item.state, 'image');
+  useStatesTransitions(wrapperRef, item.state, ['angle', 'opacity', 'blur']);
+  useStatesTransitions(imgRef, item.state, ['strokeWidth', 'radius', 'strokeColor']);
+  useStatesTransitions(fxCanvas.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -65,7 +70,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     width,
     height
   );
-  const rect = useElementRect(ref);
+  const rect = useElementRect(wrapperRef);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
   const inlineStyles = {
@@ -78,7 +83,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
       <>
         <div
           className={`image-wrapper-${item.id} ${statesWrapperClassNames}`}
-          ref={setRef}
+          ref={setWrapperRef}
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
@@ -98,6 +103,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
               alt=""
               className={`image image-${item.id} ${statesImgClassNames}`}
               style={inlineStyles}
+              ref={setImgRef}
               src={item.commonParams.url}
             />
           )}

package/src/components/items/RectangleItem.tsx

@@ -10,6 +10,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getStatesCSS } from '../../utils/getStatesCSS';
 import { useStatesClassNames } from '../useStatesClassNames';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -23,6 +24,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const statesClassNames = useStatesClassNames(item.id, item.state, 'rectangle');
   useRegisterResize(ref, onResize);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
+  useStatesTransitions(ref, item.state, ['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>

package/src/components/items/RichTextItem.tsx

@@ -12,6 +12,7 @@ import { useExemplary } from '../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -25,6 +26,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const exemplary = useExemplary();
   const stateClassNames = useStatesClassNames(item.id, item.state, 'rich-text-wrapper');
   useRegisterResize(ref, onResize);
+  useStatesTransitions(ref, item.state, ['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
 
   return (
     <>

package/src/components/items/VideoItem.tsx

@@ -12,6 +12,7 @@ import { useLayoutContext } from '../useLayoutContext';
 import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -27,6 +28,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'video-wrapper');
   const statesVideoClassNames = useStatesClassNames(item.id, item.state, 'video');
   const hasScrollPlayback = scrollPlayback !== null;
+  useStatesTransitions(ref, item.state, ['angle', 'opacity', 'blur']);
+  useStatesTransitions(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
   useRegisterResize(ref, onResize);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),

package/src/components/items/VimeoEmbed.tsx

@@ -10,6 +10,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -26,6 +27,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-video-wrapper');
   const videoClassNames = useStatesClassNames(item.id, item.state, 'embed-video');
   useRegisterResize(ref, onResize);
+  useStatesTransitions(ref, item.state, ['angle', 'blur', 'opacity']);
+  useStatesTransitions(iframeRef, item.state, ['radius']);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));

package/src/components/items/YoutubeEmbed.tsx

@@ -12,6 +12,7 @@ import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useStatesClassNames } from '../useStatesClassNames';
 import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -21,6 +22,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
@@ -28,7 +30,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-youtube-video-wrapper');
   const embedClassNames = useStatesClassNames(item.id, item.state, 'embed');
   useRegisterResize(div, onResize);
-
+  useStatesTransitions(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
+  useStatesTransitions(div, item.state, ['radius']);
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);
@@ -81,6 +84,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
+        ref={setWrapperRef}
         className={`embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`}
         onMouseEnter={() => {
           if (!player || play !== 'on-hover') return;

package/src/components/useStatesTransitions.ts

@@ -0,0 +1,95 @@
+import { ArticleItemType, ItemState, ItemStateParams, ItemStatesMap } from '@cntrl-site/sdk';
+import { useContext, useEffect, useMemo } from 'react';
+import { InteractionsContext } from '../provider/InteractionsContext';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+type AllKeys<T> = T extends any ? keyof T : never;
+type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
+
+export function useStatesTransitions(
+  el: HTMLElement | null,
+  state: ItemState<ArticleItemType>,
+  values: StatePropertyKey[]
+) {
+  const { interactionsStatesMap } = useContext(InteractionsContext);
+  const { layoutId } = useCurrentLayout();
+  const activeStates = Object.values(interactionsStatesMap);
+  const statesForLayout = useMemo(() => layoutId ? state[layoutId] : {}, [state, layoutId]);
+  const itemStatesIds = statesForLayout ? Object.keys(statesForLayout) : [];
+  const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
+  useEffect(() => {
+    if (!itemActiveStateId || !el) return;
+    const state = statesForLayout[itemActiveStateId];
+    const transitionStr = getTransition(state, 'in', values);
+    const slowestProp = getSlowestProperty(state, 'in', values);
+    if (!transitionStr) return;
+    el.style.transition = transitionStr;
+    el.ontransitionend = (e) => {
+      e.stopPropagation();
+      if (e.target !== el || e.propertyName !== slowestProp) return;
+      el.style.transition = 'none';
+    };
+    return () => {
+      const transitionStr = getTransition(state, 'out', values);
+      const slowestProp = getSlowestProperty(state, 'out', values);
+      if (!transitionStr) return;
+      el.style.transition = transitionStr;
+      el.ontransitionend = (e) => {
+        e.stopPropagation();
+        if (e.target !== el || e.propertyName !== slowestProp) return;
+        el.style.transition = 'none';
+      };
+    };
+  }, [itemActiveStateId, statesForLayout, el]);
+}
+
+const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
+  'width': 'width',
+  'height': 'height',
+  'top': 'top',
+  'left': 'left',
+  'scale': 'transform',
+  'angle': 'transform',
+  'opacity': 'opacity',
+  'radius': 'border-radius',
+  'strokeWidth': 'border-width',
+  'strokeColor': 'border-color',
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter',
+  'letterSpacing': 'letter-spacing',
+  'wordSpacing': 'word-spacing',
+  'color': 'color'
+};
+
+function getTransition(
+  state: ItemStateParams,
+  direction: 'in' | 'out',
+  values: string[]
+) {
+  return Object.entries(state)
+    .filter(([key]) => values.includes(key))
+    .map(([key, params]) => {
+      const cssKey = CSSPropertyNameMap[key];
+      if (!cssKey) {
+        throw new Error(`Cannot translate "${key}" to a CSS property.`);
+      }
+      return `${cssKey} ${params[direction].duration}ms ${params[direction].timing} ${params[direction].delay}ms`;
+    }, [])
+    .join(', ');
+}
+
+function getSlowestProperty(state: ItemStateParams, direction: 'in' | 'out', values: string[]): string {
+  const mappedEntries = Object.entries(state)
+    .filter(([key]) => values.includes(key))
+    .map(([key, params]) => {
+      const transitionParams = params[direction];
+      return {
+        key,
+        time: transitionParams.duration + transitionParams.delay
+      }
+    });
+  if (mappedEntries.length === 0) return '';
+  const { key } = mappedEntries.reduce((slowest, current) => current.time > slowest.time ? current : slowest);
+  return CSSPropertyNameMap[key];
+}

package/src/utils/StateStyles/StateStyles.ts

@@ -1,11 +1,12 @@
-import { StateParams, ArticleItemType, AnchorSide, ItemState } from '@cntrl-site/sdk';
+import { StateParams, ArticleItemType, AnchorSide, ItemState, ItemStatesMap } from '@cntrl-site/sdk';
 import { CntrlColor } from '@cntrl-site/color';
 import { getItemTopStyle } from '../getItemTopStyle';
 
-type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;
 type StateParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
+type AllKeys<T> = T extends any ? keyof T : never;
+type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
 
-const stateTransformationMap: Record<keyof ItemState<ArticleItemType>, StateParamsGetter> = {
+const stateTransformationMap: Record<StatePropertyKey, StateParamsGetter> = {
   'width': (width: number) => `width: ${width * 100}vw !important;`,
   'height': (height: number) => `height: ${height * 100}vw !important;`,
   'top': (top: number, anchorSide?: AnchorSide) => `top: ${getItemTopStyle(top, anchorSide)} !important;`,
@@ -43,44 +44,56 @@ const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
   'color': 'color'
 };
 
-export function getTransitions<T extends ArticleItemType>(
-  values: Array<keyof ItemState<ArticleItemType>>,
-  state?: ItemState<ArticleItemType>
+export function getStateStyles<T extends ArticleItemType>(
+  values: Array<StatePropertyKey>,
+  state?: ItemStatesMap[T],
+  anchorSide?: AnchorSide
 ): string {
-  if (!state) return 'unset';
-  const transitionValues = values.reduce<string[]>((acc, valueName) => {
+  if (!state) return '';
+
+  const stateValues = values.reduce<string[]>((acc, valueName) => {
+    // @ts-ignore
     if (valueName in state && state[valueName] !== undefined) {
-      // @ts-ignore TODO
+      // @ts-ignore
       const stateProperties = state[valueName] as StateParams<string | number>;
+      const getter = stateTransformationMap[valueName] as StateParamsGetter;
       return [
         ...acc,
-        `${CSSPropertyNameMap[valueName]} ${stateProperties!.duration}ms ${stateProperties!.timing} ${stateProperties!.delay}ms`
+        getter(stateProperties.value, anchorSide)
       ];
     }
     return acc;
   }, []);
-  if (!transitionValues.length) return 'unset';
-  return transitionValues.join(', ');
+
+  if (!stateValues.length) return '';
+  // @ts-ignore
+  const transitionStr = getTransitions(values, state);
+  stateValues.push(`transition: ${transitionStr};`);
+  return stateValues.join('\n');
 }
 
-export function getStateStyles<T extends ArticleItemType>(
-  values: Array<keyof ItemState<ArticleItemType>>,
-  state?: ItemState<ArticleItemType>,
-  anchorSide?: AnchorSide
+export function getTransitions<T extends ArticleItemType>(
+  values: Array<StatePropertyKey>,
+  state?: ItemStatesMap[T]
 ): string {
-  if (!state) return '';
-  const stateValues = values.reduce<string[]>((acc, valueName) => {
+  if (!state) return 'unset';
+  const transitionValues = values.reduce<string[]>((acc, valueName) => {
+    // @ts-ignore TODO
     if (valueName in state && state[valueName] !== undefined) {
       // @ts-ignore TODO
       const stateProperties = state[valueName] as StateParams<string | number>;
       return [
         ...acc,
-        stateTransformationMap[valueName](stateProperties.value, anchorSide)
+        // @ts-ignore
+        `${CSSPropertyNameMap[valueName]} ${stateProperties!.duration}ms ${stateProperties!.timing} ${stateProperties!.delay}ms`
       ];
     }
     return acc;
   }, []);
-  if (!stateValues.length) return '';
-  return stateValues.join('\n');
+  if (!transitionValues.length) return 'unset';
+  return transitionValues.join(', ');
 }
 
+// export function getStateTransitions<T extends ArticleItemType>(
+//
+// )

package/src/utils/getStatesCSS.ts

@@ -1,11 +1,14 @@
-import { AnchorSide, ArticleItemType, ItemState } from '@cntrl-site/sdk';
+import { AnchorSide, ArticleItemType, ItemStatesMap } from '@cntrl-site/sdk';
 import { getStateStyles } from './StateStyles/StateStyles';
 
-export function getStatesCSS(
+type AllKeys<T> = T extends any ? keyof T : never;
+type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
+
+export function getStatesCSS<T extends ArticleItemType>(
   itemId: string,
   classNamePrefix: string,
-  keys: Array<keyof ItemState<ArticleItemType>>,
-  states: Record<string, ItemState<ArticleItemType>> | undefined,
+  keys: Array<StatePropertyKey>,
+  states: Record<string, ItemStatesMap[T]> | undefined,
   anchorSide?: AnchorSide
 ) {
   return states