Skip to content

feat: smoother vertical tab animation #3491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adithyaakrishna wants to merge 1 commit into
base: feat/mothership-copilot
Choose a base branch
from
+54 −32
Open

feat: smoother vertical tab animation #3491

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 54 additions & 32 deletions apps/sim/app/(home)/components/templates/templates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,7 @@ export default function Templates() {
>
{TEMPLATE_WORKFLOWS.map((workflow, index) => {
const isActive = index === activeIndex
const depth = DEPTH_CONFIGS[workflow.id]
return (
<button
key={workflow.id}
Expand All @@ -453,42 +454,63 @@ export default function Templates() {
'relative text-left',
isActive
? 'z-10'
: 'flex items-center px-[12px] py-[10px] shadow-[inset_0_-1px_0_0_#2A2A2A] last:shadow-none hover:bg-[#232323]/50'
: 'shadow-[inset_0_-1px_0_0_#2A2A2A] last:shadow-none hover:bg-[#232323]/50'
)}
>
{isActive ? (
(() => {
const depth = DEPTH_CONFIGS[workflow.id]
return (
<>
<div
className='absolute top-[-8px] bottom-0 left-0 w-2'
style={{
clipPath: LEFT_WALL_CLIP,
backgroundColor: hexToRgba(depth.color, 0.63),
}}
/>
<div
className='absolute right-[-8px] bottom-0 left-2 h-2'
style={buildBottomWallStyle(depth)}
/>
<div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
<span className='flex-1 font-[430] font-season text-[16px] text-white'>
{workflow.name}
</span>
<ChevronDown
className='-rotate-90 h-[11px] w-[11px] shrink-0'
style={{ color: depth.color }}
/>
</div>
</>
)
})()
) : (
<span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
<div
className='pointer-events-none absolute top-[-8px] bottom-0 left-0 w-2'
style={{
clipPath: LEFT_WALL_CLIP,
backgroundColor: hexToRgba(depth.color, 0.63),
opacity: isActive ? 1 : 0,
transition: isActive
? 'opacity 250ms cubic-bezier(0.2, 0, 0, 1) 50ms'
: 'opacity 200ms cubic-bezier(0.4, 0, 1, 1)',
}}
/>
<div
className='pointer-events-none absolute right-[-8px] bottom-0 left-2 h-2'
style={{
...buildBottomWallStyle(depth),
opacity: isActive ? 1 : 0,
transition: isActive
? 'opacity 250ms cubic-bezier(0.2, 0, 0, 1) 50ms'
: 'opacity 200ms cubic-bezier(0.4, 0, 1, 1)',
}}
/>
<div
className='relative flex items-center px-[12px] py-[10px]'
style={{
transform: isActive ? 'translate(8px, -8px)' : 'translate(0px, 0px)',
backgroundColor: isActive ? '#242424' : 'transparent',
boxShadow: isActive
? 'inset 0 0 0 1.5px #3E3E3E'
: 'inset 0 0 0 1.5px transparent',
transition: isActive
? 'transform 350ms cubic-bezier(0.34, 1.4, 0.64, 1), background-color 250ms ease 30ms, box-shadow 250ms ease 30ms'
: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease, box-shadow 200ms ease',
}}
>
<span
className='flex-1 font-[430] font-season text-[16px]'
style={{
color: isActive ? '#FFFFFF' : 'rgba(246, 246, 240, 0.5)',
transition: 'color 250ms ease',
}}
>
{workflow.name}
</span>
)}
<ChevronDown
className='-rotate-90 h-[11px] w-[11px] shrink-0'
style={{
color: depth.color,
opacity: isActive ? 1 : 0,
transition: isActive
? 'opacity 200ms ease 150ms'
: 'opacity 150ms ease',
}}
/>
</div>
</button>
)
})}
Expand Down