Javascript, UI, UX. Exploring those worlds and sharing about it. https://xitter.cf/t.co/IkVI4heQnM
Oslo, Norvège
Joined May 2011
- Tweets1.1K
- Following732
- Followers809
- Likes1.3K
Now the same one, the code has been done separatly, and I basically just asked to animate it. (so instead of a video screenshot, it used the code)
Just tested Claude Opus 5.5 with Hyperframes.
One prompt (also generated), the result is ok. Not crazy, but with a few more indications and a clear direction, it would probably get much nicer.
The video below is actually a screen record.
I made it available on @CodePen as well: codepen.io/editor/TimGuignar…
Continuing to explore CSS scroll-driven animation.
Just a few lines of code to be able to animate an element based on his parent positions
I’m getting a bit too much into CSS scroll driven animations right now. This effect is easily achievable without any JavaScript.
The only behavior where it’s needed is when you need to recenter the tab. Can’t find a solution without JS.
That's available on @CodePen at codepen.io/editor/TimGuignar…
Some research on CSS scroll-driven animations.
Possibilities are huge. Here is a carousel without any css.
Works on horizontal scroll and on mobile.
Very easy to implement as well, it’s basically
This was in my mind for some times, I had to try, and yes, it's possible to do 100% css carousel like that!
Only tried on chrome for now, but that's pretty cool. 0 JS
In the 1st case, if your variable is undefined, your property act as unset, and the entire font-family becomes invalid...
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…
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
Cool way to animate a loader (svg shape) based on the duration.
The animation stays fluid, no matter the time it lasts.
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…
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