glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ComparisonSlider): remove blur inside the sliders line and add gpu acceleration. imrove animation duration

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-09 16:47:19 +03:00
parent cb740df1b2
commit 5d8869b3f2
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
View File

@@ -18,8 +18,15 @@ interface Props {
let { sliderPos, isDragging }: Props = $props();
</script>
<div
class="absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 transition-all duration-300 ease-out flex flex-col justify-center items-center"
class={cn(
'absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 flex flex-col justify-center items-center',
// Force GPU layer with translateZ
'translate-z-0',
// Only transition left when NOT dragging
isDragging ? '' : 'transition-[left] duration-300 ease-out',
)}
style:left="{sliderPos}%"
style:will-change={isDragging ? 'left' : 'auto'}
>
<!-- We use part of lucide cursor svg icon as a handle -->
<svg
@@ -40,13 +47,13 @@ let { sliderPos, isDragging }: Props = $props();
<div
class={cn(
'relative h-full rounded-sm transition-all duration-500',
'bg-white/3 backdrop-blur-md',
'relative h-full rounded-sm transition-all duration-300',
'bg-white/3 ',
// These are the visible "edges" of the glass
'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',
'rounded-full',
isDragging ? 'w-16 sm:w-32' : 'w-12 sm:w-16',
isDragging ? 'w-16 sm:w-24' : 'w-12 sm:w-16',
)}
>
</div>