Underline Draw Links
Hover effects · PasteMotion original
- Original
- GPU-friendly
- No JS
- Reduced-motion ready
Spring Hover Cards
Cards lift on hover with a real spring, so they feel physical and can be interrupted. Motion hover().
- Original
- Motion
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
An original by PasteMotion · MIT License
Code
<div class="spring-hover-cards">
<a href="#" class="spring-hover-cards__card">
<span class="spring-hover-cards__icon" aria-hidden="true">⚡</span>
<h3>Instant</h3>
<p>Springs settle naturally instead of following a fixed curve.</p>
</a>
<a href="#" class="spring-hover-cards__card">
<span class="spring-hover-cards__icon" aria-hidden="true">🎯</span>
<h3>Precise</h3>
<p>Interrupt mid-flight and it carries its velocity.</p>
</a>
<a href="#" class="spring-hover-cards__card">
<span class="spring-hover-cards__icon" aria-hidden="true">🫧</span>
<h3>Playful</h3>
<p>A little overshoot makes hover feel physical.</p>
</a>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
- Load Motion from the CDN (see the JS tab), then add the script.
- Adjust the custom properties (--accent) on .spring-hover-cards to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Magnetic Button
Buttons · PasteMotion original
- Original
- GPU-friendly
- Vanilla JS
- Reduced-motion ready
Sliding Pill Tabs
Toggles · PasteMotion original
- Original
- Vanilla JS
- Reduced-motion ready
Stacking Toasts
Tooltips · PasteMotion original
- Original
- GPU-friendly
- Vanilla JS
- Reduced-motion ready
Fade-Up Scroll Reveal
Scroll reveals · PasteMotion original
- Original
- GPU-friendly
- Vanilla JS
- Reduced-motion ready
3D Purple Card
Cards · @htwarriors108
- GPU-friendly
- No JS
- Reduced-motion ready