Sublime
An inspiration engine for ideas
Masked gradient loader with SVG && CSS 🤙
1. Set pathLength on <circle> to 1.05
2. Set stroke-dasharray: 1.05
2. Animate stroke-dashoffset
@keyframes spin {
0%,5% { stroke-dashoffset: 1.05; }
45%,55% { stroke-dashoffset: 2.1;... See more
jhey ʕ•ᴥ•ʔx.comUse CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙
.char {
animation-delay: calc(
sin((var(--index) / var(--total)) * 90deg) *
var(--duration)
);
} https://t.co/cSJsVA9sA3
jhey ʕ•ᴥ•ʔx.com🤩 I just learned a super cool trick!
Do you know how sometimes you want to record while you scroll on a website, like for a demo or something...
But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭
Well, I... See more
Florin Pop 👨🏻💻x.comMasked gradient loader with SVG && CSS 🤙
1. Set pathLength on <circle> to 1.05
2. Set stroke-dasharray: 1.05
2. Animate stroke-dashoffset
@keyframes spin {
0%,5% { stroke-dashoffset: 1.05; }
45%,55% { stroke-dashoffset: 2.1;... See more
jhey ʕ•ᴥ•ʔx.comCSS Trick 🤙
You can use trigonometric functions in CSS to create sweet sine wave-style animation delays 🎬
.node {
animation-delay: calc(
sin((var(--index) / var(--count)) * 45deg) 👈
* var(--speed) * -1s
);
}___... See more
jhey ʕ•ᴥ•ʔx.comLoader exploration from last year at Linear with @yannglt.
It's a mix of `translateZ` and `rotateY`. https://t.co/2LIg7UIT9Z
Emil Kowalskix.com