From 72f857fc1055f2985ed2c6944c064735826a873f Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Thu, 14 May 2026 15:01:07 +0500
Subject: [PATCH] [Website] Refine feature card scroll entrance to a subtle
 opacity fade (#20574)

Thomas mentioned the animations need to be subtle. Therefore, this PR
removes transform-based slide/rotate animations in favor of a clean 0.6s
opacity fade for a polished, professional appearance.

Before:


https://github.com/user-attachments/assets/bede627f-d4b3-4126-8eb0-c1d5a9b4d16a

After:


https://github.com/user-attachments/assets/85cb604b-a8c9-4730-85d3-8edb8ef0fc71
---
 .../src/sections/Feature/FeatureScrollEntrance.tsx  | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-website-new/src/sections/Feature/FeatureScrollEntrance.tsx b/packages/twenty-website-new/src/sections/Feature/FeatureScrollEntrance.tsx
index 54030fc600..16e6f2d92a 100644
--- a/packages/twenty-website-new/src/sections/Feature/FeatureScrollEntrance.tsx
+++ b/packages/twenty-website-new/src/sections/Feature/FeatureScrollEntrance.tsx
@@ -3,39 +3,32 @@
 import { css } from '@linaria/core';
 import { useEffect, useRef, useState } from 'react';
 
-const STAGGER_DELAY_MS = 120;
-const VIEWPORT_THRESHOLD = 0.15;
+const STAGGER_DELAY_MS = 0;
+const VIEWPORT_THRESHOLD = 0.1;
 
 const entranceBaseClassName = css`
-  transition:
-    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
-    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: opacity 0.6s ease;
 
   @media (prefers-reduced-motion: reduce) {
     opacity: 1 !important;
-    transform: none !important;
     transition: none !important;
   }
 `;
 
 const hiddenDropClassName = css`
   opacity: 0;
-  transform: translateY(60px) rotate(2deg);
 `;
 
 const hiddenFromLeftClassName = css`
   opacity: 0;
-  transform: translateX(-40px) translateY(30px) rotate(-3deg);
 `;
 
 const hiddenFromRightClassName = css`
   opacity: 0;
-  transform: translateX(40px) translateY(30px) rotate(3deg);
 `;
 
 const visibleClassName = css`
   opacity: 1;
-  transform: translateX(0) translateY(0) rotate(0deg);
 `;
 
 function getHiddenClassName(index: number): string {