Haniel
@hyprsonic.dev
Frontend Engineer | @sveltejs evangelist
https://github.com/hanielu
https://github.com/hanielu
The hover-flicker bug that haunts many devs:
Hover → element lifts → mouse loses contact → flickers forever
Fix: separate trigger from animated child.
Parent gets hover, child gets the movement.
In Tailwind:
<div class="group">
<div class="group-hover:-translate-y-6">
</div>
Hover → element lifts → mouse loses contact → flickers forever
Fix: separate trigger from animated child.
Parent gets hover, child gets the movement.
In Tailwind:
<div class="group">
<div class="group-hover:-translate-y-6">
</div>
January 29, 2026 at 9:17 AM
The hover-flicker bug that haunts many devs:
Hover → element lifts → mouse loses contact → flickers forever
Fix: separate trigger from animated child.
Parent gets hover, child gets the movement.
In Tailwind:
<div class="group">
<div class="group-hover:-translate-y-6">
</div>
Hover → element lifts → mouse loses contact → flickers forever
Fix: separate trigger from animated child.
Parent gets hover, child gets the movement.
In Tailwind:
<div class="group">
<div class="group-hover:-translate-y-6">
</div>
it's morphin' time 🪄
made with svelte + motion-sv
made with svelte + motion-sv
January 28, 2026 at 2:07 AM
it's morphin' time 🪄
made with svelte + motion-sv
made with svelte + motion-sv