Svelte just released an improved version of actions named attachments which are element-level lifecycle functions you can use to work with the DOM directly. 🔥
I wanted to animate an element from point A to B across an arc — so I asked AI to write a custom linear interpolation function for me and plugged it into Svelte's `Tween` class. 🔥
This gives me ideas like creating a Vector class for animating Canvas/SVG. 🤔
👇 REPL
Learn how to fake 3D with CSS and create an animated sphere intersection using only masks and some trigonometry! 🔥
youtu.be/jUiEzVwbdco
Animated 3D Sphere Intersection Using CSS And Trigonometry
YouTube video by Joy of Code
Fixed annoying Animotion bug where you had no type completion for some components because I created a circular dependency...🙈
pnpm update @animotion/core@latest
📣 Animotion update:
- Added custom entry/exit transitions for view transitions
- New duration and delay options for transitions
- Added `transitions` array prop for convenience
- Hide `<Transition>` from affecting your layout using the `hidden` prop
Learn how to fake 3D with CSS and create an animated sphere intersection using only masks and some trigonometry! 🔥
youtu.be/jUiEzVwbdcoAnimated 3D Sphere Intersection Using CSS And Trigonometry
YouTube video by Joy of Code
In the next video I break down a 3D sphere intersection demo from Codepen and it's going to be absolute cinema.
I learned how the Web Audio API works and I'm pleased with the result — you can trim and fade sounds and looping works as expected even if you change the playback speed.
svelte.dev/playground/5...JavaScript audio libraries are a mixed bag of features and APIs that aren't ergonomic for storytelling with Animotion.
I decided to make a simple audio library where you can trim and add effects to audio using the Web Audio API.
When using JavaScript to set a CSS variable you can pass the value using a data attribute instead and define the unit. 🤙
Animating CSS variables is easy with Svelte and since you're animating the value itself you're not limited to what you can transition. 🪄
Animating CSS variables is easy with Svelte and since you're animating the value itself you're not limited to what you can transition. 🪄
W
🥳 It's an exciting day! 🥳
Thanks to Webflow GSAP is now 100% FREE - including ALL of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members.
We can't wait to see what you make!
gsap.com/blog/3-13
Async Svelte patch just dropped.
I also wrote a post a long time ago where I included a bookmarklet to debug CSS and creating a bookmark that contains JavaScript is cursed as it sounds.
joyofcode.xyz/simple-css-d...Nothing comes close to help you debug CSS and understand what's going on the page.
Nothing comes close to help you debug CSS and understand what's going on the page.
Here's a basic Svelte state machine example which accepts data and is able to update it and run some action when you enter a state.
Also did you know the collective noun for ghosts is a “chill”?
I'm working on a complex scene for an upcoming video and using data attributes for styling and animations instead of classes is awesome.
You can even get fancy with state machines and send events instead to avoid impossible states.
I'm working on a complex scene for an upcoming video and using data attributes for styling and animations instead of classes is awesome.
You can even get fancy with state machines and send events instead to avoid impossible states.
Can't wait to see what the Svelte team has been cooking. 🧑🍳
You can set starting values for CSS properties when the element is displayed and read attribute values in your CSS variables for easy transitions. 🔥
Absolute cinema 🔊
JavaScript audio libraries are a mixed bag of features and APIs that aren't ergonomic for storytelling with Animotion.
I decided to make a simple audio library where you can trim and add effects to audio using the Web Audio API.
JavaScript audio libraries are a mixed bag of features and APIs that aren't ergonomic for storytelling with Animotion.
I decided to make a simple audio library where you can trim and add effects to audio using the Web Audio API.
I made a cool visualization using only CSS for an upcoming video I'm working on.
Consistent vertical text spacing in CSS is now easy thanks to the `text-box-trim` property or its shorthand `text-box` — design tools like Figma also support it.
The best way to stay up to date with Svelte changes through a nice UI — it would also be nice to have a PR tracker to see what the Svelte team is cooking.
There's a Q&A with Rich Harris today on This Week in Svelte if you want to tune in. 🤙
www.youtube.com/watch?v=BGNy...
This Week in Svelte, Ep. 100 — Changelog, Q&A with Rich Harris
YouTube video by Svelte Society
There's also a new mini version of Zod which uses a more functional tree-shakable API like Valibot.
The Svelte playground now supports TypeScript through type removal and Tailwind CSS for styling. 🔥
You can combine Svelte transitions by passing the `t` progress value to their `css` function and individual CSS properties you want to animate. 🪄
If you're using CSS nesting you can target the parent selector by appending the `&` nesting selector. 🔥
Today I learned you can use `class` instead of `className` in React
fixupx.com/acdlite/stat...
Andrew Clark (@acdlite)
I’ll let y’all in on a secret: since v18, `class` on a prop does work. We log a scary warning in development, but it does work.
We warn against it because mixing `className` and `class` in the same c...
The landing page is a work of art
After 5 years in the making, I'm very happy to finally release Anime.js v4, my dream animation library:
🧩 New modular API
⚡️ Highly performant
🖱️ Scroll-linked animations
🫵 Draggables
↔️ Responsive
✨ Additive animations
🪽 WAAPI support
And so much more!
Check out the new website
animejs.com!
To run a TypeScript file in SvelteKit when using aliases like $env for environment variables you can use vite-node and SSR as the transform mode. 😎
Now that you can style the native HTML <select> element with CSS, I made a short video covering how it works! 🔥
youtu.be/QckgIJrHiNY
You Can Style The Native HTML Select With CSS
YouTube video by Joy of Code
The <select> element can now be styled and include rich HTML content but the Svelte parser throws an error since it's unexpected.
The workaround is to put the content in a component or snippet. 👇️
Learn how to make interactive 3D apps with Svelte and Threlte from basics to loading assets including understanding Three.js code! 🔥
youtu.be/tfq8OrvORYE
Learn How To Make Interactive 3D Apps With Svelte And Threlte
YouTube video by Joy of Code
[Not loaded yet]
I'm working on the next video on building interactive 3D apps in Svelte with Threlte. 🤫
Is this vibe coding? 🦋
