Timothée Guignard

Javascript, UI, UX. Exploring those worlds and sharing about it.

[Timothée Guignard @TimGuignard]

@Star_Knight12 @evanyou Again ?!

[Timothée Guignard @TimGuignard]

@charrith47 @evanyou One day maybe 🙏

[Timothée Guignard @TimGuignard]

@BrettFromDJ There is a figma MCP which work pretty well if you’re figma file is well structured.
Uses all your variables. If you mix it with your framework MCP, it’s actually really fast and accurate in most case

[Timothée Guignard @TimGuignard]

@becool_me @mosiddiquee Yes that’s a kind of restriction and I think it’s for the best

[Timothée Guignard @TimGuignard]

@sandislonjsak I guess some angular project have it. But since angular 16 it shouldn’t be used in most of the case. Signal and computed are much simpler and optimized. Unless very specific use case I don’t see where it would be needed

[Timothée Guignard @TimGuignard]

@mpgn_x64 I saw this in a few design few years back and I always hated it

[Timothée Guignard @TimGuignard]

Exploring SVG animation with random durations. 2 animations that remain smooth.
The goal was to not see any lag between the transitions.
Available on @CodePen
https://t.co/hB9kGSLiIR

[Timothée Guignard @TimGuignard]

You can create this kind of animation with 2 SVG shapes.
No matter the loading duration, it will always remain fluid. No lag between the loading shape and the final (check) shape.

The rest is just a bit of #gsap

[Timothée Guignard @TimGuignard]

@denicmarko Vue

[Timothée Guignard @TimGuignard]

@lusionltd @UiSavior That's amazing

[Timothée Guignard @TimGuignard]

@ipwanciu First time I see it 😅

[Timothée Guignard @TimGuignard]

@rndr_realm @threejs The effect is so clean! I've been studying the ones created in SVG but this one seems much better.
I think canvas have also much better performance on large pages

[Timothée Guignard @TimGuignard]

@jonasarleth @greensock Really smooth, I like it

[Timothée Guignard @TimGuignard]

Cool way to animate a loader (svg shape) based on the duration.
The animation stays fluid, no matter the time it lasts.

[Timothée Guignard @TimGuignard]

@T_Zahil I’m French and I feel the same way. That’s annoying.
They only had one and only opinion: you don’t share it? you’re stupid.
There is absolutely no nuance.

But this is NOT a reflection of the professional French world. Good companies want open minded people.

[Timothée Guignard @TimGuignard]

@steren It was actually the same thing on Tinder web a few years ago. They fixed it as well 😅

[Timothée Guignard @TimGuignard]

@ganyicz Let's remind people that this is a tailwind class.

If you don't use it, you need to create a class that would look like:

.scheme-only-dark{
color-scheme: only dark;
}

[Timothée Guignard @TimGuignard]

Just fixed an annoying bug where dragging/dropping too fast add this kind of lag.

The reason was that the speed was always the same. Fixed it by calculating the velocity (kind of). The results seems much more natural, even if it could be improved.

https://t.co/jT3LNfPEaY

[Timothée Guignard @TimGuignard]

What I like with SwiperJS is how easy it is to add animations based on the slide progress.

So much better especially for phone carousel with drag & drop.

[Timothée Guignard @TimGuignard]

@Una Really clean! I like it a lot