ๆญฃๅœจๅŠ ่ฝฝ่ง†้ข‘...

่ง†้ข‘ๅŠ ่ฝฝๅคฑ่ดฅ

Use ๐šŸ๐š’๐šŽ๐š -๐š๐š›๐šŠ๐š—๐šœ๐š’๐š๐š’๐š˜๐š—๐šœ and ๐šŒ๐š•๐š’๐š™-๐š™๐šŠ๐š๐š‘ to animate theme switches instead of flipping them with a transition ๐š๐š˜๐šŒ๐šž๐š–๐šŽ๐š—๐š.๐š๐š˜๐šŒ๐šž๐š–๐šŽ๐š—๐š๐™ด๐š•๐šŽ๐š–๐šŽ๐š—๐š.๐šŠ๐š—๐š’๐š–๐šŠ๐š๐šŽ( { ๐šŒ๐š•๐š’๐š™๐™ฟ๐šŠ๐š๐š‘: ["๐š’๐š—๐šœ๐šŽ๐š(๐Ÿถ ๐Ÿถ ๐Ÿท๐Ÿถ๐Ÿถ% ๐Ÿถ)", "๐š’๐š—๐šœ๐šŽ๐š(๐Ÿถ)"] }, { ๐š™๐šœ๐šŽ๐šž๐š๐š˜๐™ด๐š•๐šŽ๐š–๐šŽ๐š—๐š: "::๐šŸ๐š’๐šŽ๐š -๐š๐š›๐šŠ๐š—๐šœ๐š’๐š๐š’๐š˜๐š—-๐š—๐šŽ๐š (๐š›๐š˜๐š˜๐š)", ๐š๐šž๐š›๐šŠ๐š๐š’๐š˜๐š—: ๐Ÿผ๐Ÿถ๐Ÿถ }, ), ::๐šŸ๐š’๐šŽ๐š -๐š๐š›๐šŠ๐š—๐šœ๐š’๐š๐š’๐š˜๐š—-๐š—๐šŽ๐š (๐š›๐š˜๐š˜๐š) { ๐šŠ๐š—๐š’๐š–๐šŠ๐š๐š’๐š˜๐š—: ๐š—๐š˜๐š—๐šŽ; ๐š–๐š’๐šก-๐š‹๐š•๐šŽ๐š—๐š-๐š–๐š˜๐š๐šŽ: ๐š—๐š˜๐š›๐š–๐šŠ๐š•; } Here the clipPath ensures the transition happens from top to bottom

53,786 ๆฌก่ง‚็œ‹ โ€ข 2 ไธชๆœˆๅ‰ โ€ขvia X (Twitter)

0 ๆก่ฏ„่ฎบ

ๆš‚ๆ— ่ฏ„่ฎบ

ๅŽŸๅง‹ๅธ–ๅญ็š„่ฏ„่ฎบๅฐ†ๆ˜พ็คบๅœจ่ฟ™้‡Œ

็›ธๅ…ณ่ง†้ข‘

Use ๐šœ๐š’๐š‹๐š•๐š’๐š—๐š-๐š’๐š—๐š๐šŽ๐šก() to stagger children of a parent without having to manually track a using --๐š’ ๐šŸ๐šŠ๐š›๐š’๐šŠ๐š‹๐š•๐šŽ๐šœ or having to use an animation library .๐š’๐š๐šŽ๐š– { ๐šŠ๐š—๐š’๐š–๐šŠ๐š๐š’๐š˜๐š—: ๐šŽ๐š—๐š๐šŽ๐š› ๐Ÿถ.๐Ÿบ๐Ÿป๐šœ ๐šŒ๐šž๐š‹๐š’๐šŒ-๐š‹๐šŽ๐šฃ๐š’๐šŽ๐š›(๐Ÿถ.๐Ÿธ๐Ÿธ, ๐Ÿท, ๐Ÿถ.๐Ÿน๐Ÿผ, ๐Ÿท) ๐š‹๐š˜๐š๐š‘; ๐šŠ๐š—๐š’๐š–๐šŠ๐š๐š’๐š˜๐š—-๐š๐šŽ๐š•๐šŠ๐šข: ๐šŒ๐šŠ๐š•๐šŒ(๐Ÿถ.๐Ÿท๐Ÿธ๐šœ * (๐šœ๐š’๐š‹๐š•๐š’๐š—๐š-๐š’๐š—๐š๐šŽ๐šก() - ๐Ÿท)); } @๐š”๐šŽ๐šข๐š๐š›๐šŠ๐š–๐šŽ๐šœ ๐šŽ๐š—๐š๐šŽ๐š› { ๐š๐š›๐š˜๐š– { ๐š˜๐š™๐šŠ๐šŒ๐š’๐š๐šข: ๐Ÿถ; ๐š๐š›๐šŠ๐š—๐šœ๐š๐š˜๐š›๐š–: ๐š๐š›๐šŠ๐š—๐šœ๐š•๐šŠ๐š๐šŽ๐šˆ(๐Ÿผ๐š™๐šก); } ๐š๐š˜ { ๐š˜๐š™๐šŠ๐šŒ๐š’๐š๐šข: ๐Ÿท; ๐š๐š›๐šŠ๐š—๐šœ๐š๐š˜๐š›๐š–: ๐š๐š›๐šŠ๐š—๐šœ๐š•๐šŠ๐š๐šŽ๐šˆ(๐Ÿถ); } } Clean and minimal approach for stagger animations

Manu Arora

28,489 ๆฌก่ง‚็œ‹ โ€ข 3 ไธชๆœˆๅ‰

you can create a CSS only carousel with CSS `๐šœ๐šŒ๐š›๐š˜๐š•๐š•-๐šœ๐š—๐šŠ๐š™` .๐šœ๐šŒ๐š›๐š˜๐š•๐š•๐šŽ๐š› { ๐š˜๐šŸ๐šŽ๐š›๐š๐š•๐š˜๐š -๐šก: ๐šŠ๐šž๐š๐š˜; ๐šœ๐šŒ๐š›๐š˜๐š•๐š•-๐šœ๐š—๐šŠ๐š™-๐š๐šข๐š™๐šŽ: ๐šก ๐š–๐šŠ๐š—๐š๐šŠ๐š๐š˜๐š›๐šข; ๐šœ๐šŒ๐š›๐š˜๐š•๐š•-๐š™๐šŠ๐š๐š๐š’๐š—๐š-๐š’๐š—๐š•๐š’๐š—๐šŽ: ๐Ÿท.๐Ÿป๐š›๐šŽ๐š–; /* ๐š–๐šŠ๐š๐šŒ๐š‘๐šŽ๐šœ ๐šข๐š˜๐šž๐š› ๐šœ๐šŒ๐š›๐š˜๐š•๐š•-๐š™๐š•/๐š™๐š› */ } .๐šŒ๐šŠ๐š›๐š { ๐šœ๐šŒ๐š›๐š˜๐š•๐š•-๐šœ๐š—๐šŠ๐š™-๐šŠ๐š•๐š’๐š๐š—: ๐šŒ๐šŽ๐š—๐š๐šŽ๐š›; ๐š๐š•๐šŽ๐šก-๐šœ๐š‘๐š›๐š’๐š—๐š”: ๐Ÿถ; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

Manu Arora

56,137 ๆฌก่ง‚็œ‹ โ€ข 4 ไธชๆœˆๅ‰

Use CSS @๐š™๐š›๐š˜๐š™๐šŽ๐š›๐š๐šข to unlock things like > Animated conic gradients > Rotating borders, loaders > Hover transition on gradient stops the regular --๐šŠ๐š—๐š๐š•๐šŽ variable doesn't work with animating gradient stops because CSS has to idea how to interpolate it @๐š™๐š›๐š˜๐š™๐šŽ๐š›๐š๐šข fixes that with , and more @๐š™๐š›๐š˜๐š™๐šŽ๐š›๐š๐šข --๐šŠ๐š—๐š๐š•๐šŽ { ๐šœ๐šข๐š—๐š๐šŠ๐šก: ' '; ๐š’๐š—๐š‘๐šŽ๐š›๐š’๐š๐šœ: ๐š๐šŠ๐š•๐šœ๐šŽ; ๐š’๐š—๐š’๐š๐š’๐šŠ๐š•-๐šŸ๐šŠ๐š•๐šž๐šŽ: ๐Ÿถ๐š๐šŽ๐š; } .๐šŒ๐šŠ๐š›๐š { --๐šŠ๐š—๐š๐š•๐šŽ: ๐Ÿถ๐š๐šŽ๐š; ๐š‹๐šŠ๐šŒ๐š”๐š๐š›๐š˜๐šž๐š—๐š: ๐š•๐š’๐š—๐šŽ๐šŠ๐š›-๐š๐š›๐šŠ๐š๐š’๐šŽ๐š—๐š( ๐šŸ๐šŠ๐š›(--๐šŠ๐š—๐š๐š•๐šŽ), #๐Ÿน๐Ÿพ๐š‹๐š๐š๐Ÿพ, #๐Ÿถ๐šŽ๐šŠ๐Ÿป๐šŽ๐Ÿฟ, #๐Ÿธ๐Ÿป๐Ÿผ๐Ÿน๐šŽ๐š‹, #๐Ÿท๐šŽ๐Ÿบ๐Ÿถ๐šŠ๐š ); ๐š๐š›๐šŠ๐š—๐šœ๐š’๐š๐š’๐š˜๐š—: --๐šŠ๐š—๐š๐š•๐šŽ ๐Ÿถ.๐Ÿพ๐šœ ๐šŽ๐šŠ๐šœ๐šŽ; } .๐šŒ๐šŠ๐š›๐š:๐š‘๐š˜๐šŸ๐šŽ๐š› { --๐šŠ๐š—๐š๐š•๐šŽ: ๐Ÿบ๐Ÿป๐š๐šŽ๐š; } Defaults to initial value so you don't have to set them everytime

Manu Arora

23,868 ๆฌก่ง‚็œ‹ โ€ข 2 ไธชๆœˆๅ‰