fix: jerky animation behaviour (#7158)

apps/web/modules/ui/components/preview-survey/index.tsx

@@ -259,6 +259,7 @@ export const PreviewSurvey = ({
                       setBlockId = f;
                     }}
                     onFinished={onFinished}
+                    placement={placement}
                     isSpamProtectionEnabled={isSpamProtectionEnabled}
                   />
                 </Modal>
@@ -363,6 +364,7 @@ export const PreviewSurvey = ({
                   }}
                   onFinished={onFinished}
                   isSpamProtectionEnabled={isSpamProtectionEnabled}
+                  placement={placement}
                 />
               </Modal>
             ) : (

packages/surveys/src/components/general/survey.tsx

@@ -76,6 +76,7 @@ export function Survey({
   isSpamProtectionEnabled,
   dir = "auto",
   setDir,
+  placement,
 }: SurveyContainerProps) {
   let apiClient: ApiClient | null = null;
 
@@ -916,6 +917,7 @@ export function Survey({
       setBlockId={setBlockId}
       shouldResetBlockId={shouldResetQuestionId}
       fullSizeCards={fullSizeCards}
+      placement={placement}
     />
   );
 }

packages/surveys/src/components/wrappers/stacked-card.tsx

@@ -2,6 +2,7 @@ import { MutableRef } from "preact/hooks";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
 import React from "react";
+import { type TPlacement } from "@formbricks/types/common";
 import { TJsEnvironmentStateSurvey } from "@formbricks/types/js";
 import { TCardArrangementOptions } from "@formbricks/types/styling";
 
@@ -17,6 +18,7 @@ interface StackedCardProps {
   cardWidth: number;
   hovered: boolean;
   cardArrangement: TCardArrangementOptions;
+  placement: TPlacement;
 }
 
 export const StackedCard = ({
@@ -31,17 +33,24 @@ export const StackedCard = ({
   cardWidth,
   hovered,
   cardArrangement,
+  placement,
 }: StackedCardProps) => {
   const isHidden = offset < 0;
   const [delayedOffset, setDelayedOffset] = useState<number>(offset);
   const [contentOpacity, setContentOpacity] = useState<number>(0);
   const currentCardHeight = offset === 0 ? "auto" : offset < 0 ? "initial" : cardHeight;
 
-  const getBottomStyles = () => {
+  const getTopBottomStyles = () => {
     if (survey.type !== "link")
-      return {
-        bottom: 0,
-      };
+      if (placement === "bottomLeft" || placement === "bottomRight") {
+        return {
+          bottom: 0,
+        };
+      } else if (placement === "topLeft" || placement === "topRight") {
+        return {
+          top: 0,
+        };
+      }
   };
 
   const getDummyCardContent = () => {
@@ -111,7 +120,7 @@ export const StackedCard = ({
         pointerEvents: offset === 0 ? "auto" : "none",
         ...borderStyles,
         ...straightCardArrangementStyles,
-        ...getBottomStyles(),
+        ...getTopBottomStyles(),
       }}
       className="pointer rounded-custom bg-survey-bg absolute inset-x-0 overflow-hidden">
       <div

packages/surveys/src/components/wrappers/stacked-cards-container.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { JSX } from "react";
+import { type TPlacement } from "@formbricks/types/common";
 import { type TJsEnvironmentStateSurvey } from "@formbricks/types/js";
 import { type TProjectStyling } from "@formbricks/types/project";
 import { type TCardArrangementOptions } from "@formbricks/types/styling";
@@ -19,6 +20,7 @@ interface StackedCardsContainerProps {
   setBlockId: (blockId: string) => void;
   shouldResetBlockId?: boolean;
   fullSizeCards: boolean;
+  placement?: TPlacement;
 }
 
 export function StackedCardsContainer({
@@ -30,6 +32,7 @@ export function StackedCardsContainer({
   setBlockId,
   shouldResetBlockId = true,
   fullSizeCards = false,
+  placement = "bottomRight",
 }: Readonly<StackedCardsContainerProps>) {
   const [hovered, setHovered] = useState(false);
   const highlightBorderColor = survey.styling?.overwriteThemeStyling
@@ -179,6 +182,7 @@ export function StackedCardsContainer({
               cardWidth={cardWidth}
               hovered={hovered}
               cardArrangement={cardArrangement}
+              placement={placement}
             />
           );
         })

packages/surveys/src/index.ts

@@ -36,18 +36,35 @@ export const renderSurvey = (props: SurveyContainerProps) => {
       throw new Error(`renderSurvey: Element with id ${containerId} not found.`);
     }
 
-    const { placement, darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props;
+    // if survey type is link, we don't pass the placement, darkOverlay, clickOutside, onClose
+    if (props.survey.type === "link") {
+      const { placement, darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props;
 
-    render(
-      h(
-        I18nProvider,
-        { language },
-        h(RenderSurvey, {
-          ...surveyInlineProps,
-        })
-      ),
-      element
-    );
+      render(
+        h(
+          I18nProvider,
+          { language },
+          h(RenderSurvey, {
+            ...surveyInlineProps,
+          })
+        ),
+        element
+      );
+    } else {
+      // For non-link surveys, pass placement through so it can be used in StackedCard
+      const { darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props;
+
+      render(
+        h(
+          I18nProvider,
+          { language },
+          h(RenderSurvey, {
+            ...surveyInlineProps,
+          })
+        ),
+        element
+      );
+    }
   } else {
     const modalContainer = document.createElement("div");
     modalContainer.id = "formbricks-modal-container";