houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Website] Refine feature card scroll entrance to a subtle opacity fade (#20574)

Browse Source 
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
This commit is contained in:
Abdullah.
2026-05-14 15:01:07 +05:00
committed by GitHub
parent a47e1e0e5e
commit 72f857fc10
1 changed files with 3 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-website-new/src/sections/Feature/FeatureScrollEntrance.tsx
+3 -10
View File
@@ -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 {