Joined May 2011
- Tweets 1,100
- Following 734
- Followers 805
- Likes 1,217
263 Photos and videos
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
codepen.io/TimGuignard/pen/d…
71
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
63
Cool way to animate a loader (svg shape) based on the duration.
The animation stays fluid, no matter the time it lasts.
48
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.
codepen.io/TimGuignard/pen/W…
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.
1
77
I’m always curious to see how this kind of day look.
Like what type of data you have to make this kind of representation?
The wind animation is pretty nice too
39
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.
1
137
This nice dots pattern on the @stitchbygoogle background is actually just a background-image with radial-gradient.
Just a tiny piece of code for a cool effect.
7
21
592
41,056
Always been a big fan of @duolingo animations. Look at the home page of their website.
So many tiny details, the cat's tail, the app icons that open to let them go out...
They use @LottieFiles by the way. I guess it's the same on their app. Awesome work!
1
3
198
"Chromostereopsis is a visual illusion whereby the impression of depth is conveyed in two-dimensional color images" - Wikipedia
Whatever...
125
Noticing some annoying stuff on mobile actually: the last clicked circle keep the hover state
I finished this mini-game few years back. Finally pushed it today 😅
Testable here codocular.com/lab/color-game…
78
Available on @CodePen codepen.io/TimGuignard/pen/a…
I finished this mini-game few years back. Finally pushed it today 😅
Testable here codocular.com/lab/color-game…
69
I finished this mini-game few years back. Finally pushed it today 😅
Testable here codocular.com/lab/color-game…
1
363
3 Dec 2025
interesting to note that after a certain amount of circles (196), we can start seeing a slow down, and at 264, it doesn't even complete the animation.
We kinda lose some circles, not exactly sure of the reason. Some animations are "jumping". The screen re-paint totally sometimes
3 Dec 2025
Slow down a little bit the animation.
Still the same rule, so it takes the exact same time to fill the grid. The animations become faster and faster
#css #svg #JavaScript
1
1
93
3 Dec 2025
And the performance screen in Google Chrome devtool for this video looks like this:
- CPU usage becoming bigger
- Main: red triangle increasing ("long task")
- Frames: more red part ("dropped frames")
1
1
57
3 Dec 2025
When I remove the animations, I can see:
- it takes less times in total to go to the same number of row (of course)
- no more Animations row
- The "recalculating style" (purple in Main) seems much smaller
Visually, the DOM don't "lose" circles.
Probably based on the animation
2
36
3 Dec 2025
Slow down a little bit the animation.
Still the same rule, so it takes the exact same time to fill the grid. The animations become faster and faster
#css #svg #JavaScript
1
126