jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profileg
jhey πŸ”¨πŸ»βœ¨

@jh3yy

πŸ’» Whimsy Dev Supreme!
πŸš€ Showing you how to level up with creative coding
πŸ’Ό DevRel @Google
πŸ“° @css @smashingmag @sitepointdotcom
πŸ“Ί https://t.co/7FlZg84Rr8
❀ @seaotta

ID:2396811776

linkhttp://jhey.dev/links calendar_today18-03-2014 21:45:40

28,4K Tweets

46,2K Followers

164 Following

jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profile Photo

Time to get some AFK time. Picked up a concussion this weekend and its bouts of fatigue are hitting me πŸ₯΄

Have a rad weekend! πŸ€™

account_circle
jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profile Photo

Add some color? 🎨

.ring { border-color: oklch(58% 0.25 8); }
@​keyframes hue { 50% { filter: hue-rotate(300deg); }}

account_circle
jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profile Photo

The CSS Trick for this text reveal on scroll? ✨

Combine position: sticky with scroll animation.

Split the text into words. Use a 'Pixel per character' value to calculate the start and end scroll position for each word πŸ€™

account_circle
jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profile Photo

The trick here was creating a function that takes GSAP eases and converts them to CSS linear() πŸ”₯

A flicker effect is a GSAP RoughEase that gets converted πŸ‘¨β€πŸ”¬

Once you generate different custom easings, you can drop them in and use them elsewhere πŸ€™

account_circle
jhey πŸ”¨πŸ»βœ¨(@jh3yy) 's Twitter Profile Photo

What do I build tonight? πŸ§‘β€πŸ³

Toying with some form of button micro-interaction or novel uses of animation timing ⏱️

Help me?

account_circle