a3o Motion

Playing around with some subtle hover animations — what project are you working on before the weekend hits?

I threw this together while working on @figma's new Spring Animations feature with @rickrajj and @nikolasklein. It's a quick HTML/CSS/JS prototype to help us explore the different kinds of animations that were possible.

Each tile has a different animation which plays on hover.

Took this one a little further 🤏

Magic thing with CSS animations is that you can make them dynamic at runtime with custom properties ✨

:root {--how-high: 10px;}
:root:has(a:hover){--how-high:50px;}
@​keyframes jump {50%{translate: 0 var(--how-high);}}

Change with JS even 🤙

We've added some new, playful effects to the Image Reveal Hover Effects demo#demo #webdesign #uidesign #animation #gsap #javascript

サイトでホバーのアニメーションを作るときにCSSの:hoverで作ると、動画のように連続したUIで気持ちよくないので、GSAPのタイムラインを使って、気持ちよくさせてみるという実装。

カーソルを動かすだけで楽しいサイトにできる。

#HTML #CSS #駆け出し #webデザイン勉強中 
 #webエンジニア…

Love the hover animation on @metalab so I tried doing my version of it using some clip-path revealing and filter magic 🧚‍♀️

👉

I suggest omitting it for touch devices, just like they do.

Excellent hover animation and branding! 💯

The app analyzes your memories and helps you explore them with AI.

Each card represents a memory.

→(@Brainsave_ai)

Portfolio by Michael Creamer, a graphic designer based in North Carolina, featuring an on hover animation and a custom cursor:

Check out more portfolios in Readymag Examples:

I made a hover effect with GSAP.
Short YouTube tutorial and CodePen below. 👇

An interesting text hover animation!

🔗 Link:.

I'm sorry, but dystopian, cyberpunk-inspired web experiments are my favorite! 🤖

Here's a take on a segmented tooltip hover effect with pixel animations:

The last one is gooey! 🫧

#css #gsap #javascript #webdevelopment #frontend #animation #ui

CSS Trick ✨

You can create this glitch hover effect by animating pseudoelement content 🎬

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}

It's a funky…

✨ Button Hover Animation

🔗 Code @CodePen
💡 Inspiration @aleksliving