jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use svelte motion for better spring

Browse source
This commit is contained in:
Justin Edmund 2025-06-10 01:00:49 -07:00
parent 30aebe5979
commit 8d68219dde
1 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/routes/work/[slug]/+page.svelte
View file

@ -4,6 +4,7 @@
import ProjectContent from '$lib/components/ProjectContent.svelte' import ProjectContent from '$lib/components/ProjectContent.svelte'
import type { PageData } from './$types' import type { PageData } from './$types'
import type { Project } from '$lib/types/project' import type { Project } from '$lib/types/project'
import { spring } from 'svelte/motion'
let { data } = $props<{ data: PageData }>() let { data } = $props<{ data: PageData }>()
@ -11,7 +12,19 @@
const error = $derived(data.error as string | undefined) const error = $derived(data.error as string | undefined)
let headerContainer = $state<HTMLElement | null>(null) let headerContainer = $state<HTMLElement | null>(null)
let logoTransform = $state('translate(0, 0)')
// Spring with aggressive bounce settings
const logoPosition = spring(
{ x: 0, y: 0 },
{
stiffness: 0.03, // Extremely low for maximum bounce
damping: 0.1, // Very low for many oscillations
precision: 0.001 // Keep animating for longer
}
)
// Derive transform from spring position
const logoTransform = $derived(`translate(${$logoPosition.x}px, ${$logoPosition.y}px)`)
function handleMouseMove(e: MouseEvent) { function handleMouseMove(e: MouseEvent) {
if (!headerContainer) return if (!headerContainer) return
@ -24,14 +37,14 @@
const centerY = rect.height / 2 const centerY = rect.height / 2
// Calculate movement based on mouse position relative to center // Calculate movement based on mouse position relative to center
const moveX = ((x - centerX) / centerX) * 15 // 15px max movement const moveX = ((x - centerX) / centerX) * 30 // 30px max movement for more dramatic effect
const moveY = ((y - centerY) / centerY) * 15 const moveY = ((y - centerY) / centerY) * 30
logoTransform = `translate(${moveX}px, ${moveY}px)` logoPosition.set({ x: moveX, y: moveY })
} }
function handleMouseLeave() { function handleMouseLeave() {
logoTransform = 'translate(0, 0)' logoPosition.set({ x: 0, y: 0 })
} }
</script> </script>
@ -202,7 +215,6 @@
width: 85px; width: 85px;
height: 85px; height: 85px;
object-fit: contain; object-fit: contain;
transition: transform 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
will-change: transform; will-change: transform;
@include breakpoint('phone') { @include breakpoint('phone') {