This is great! Do you have plans to make it a library and framework agnostic, probably using web components? That way, it can be integrated easily into, say, ANGULAR OR REACT.
@@JoyofCodeDev Okay, still thanks. However, your reply is very mean and shortsighted. People make languages, frameworks and libraries : not just for the love of the tools used, but for the love of tools that will be created with them.
Just tried this out together with mdsvex + Tailwind Typography for markdown styling and oh my god I am in love, those three are a god-like combination. I genuinely think that this will partly replace advanced-markdown-slides for Obsidian for me, at least for more complicated projects I am absolutely sticking with this.
Amazing!!! Grateful for this simple-to-use animation framework! As a game dev content creator, it's perfect for my videos. No React learning like MotionCanvas or ReMotion. Thanks for enhancing my workflow!
This looks amazing! I will definitely try it. A video on how you made this library and your development process would be very informative and interesting.
@@RickyC0626 We were talking about animation, but that's something, I guess. What do you like about Svelte better? In particular, I'm interested in the programming experience. Btw since you're off mainstream already, did you try Solid.js?
This is awesome! I'm about to start pumping out web dev youtube content and was looking into Remotion. Been trying to decide if I should build something myself just for my personal use for content creation. I was considering the latter option because I totally wanted to use Vite, Svelte, and Tailwind. So yeah, I'm so here for this! I love how unopinionated it is as well. I was feeling icky about adopting a tool that I might have to invest a lot in and find it hard to get away from later.
I tried out both remotion and motion canvas. Remotion is great because it's html/css/js which I am familiar with. Downside is that it's stuck to react and sometimes there are rendering issues. The way you animate things by exclusively using frames is also annoying. Motion canvas is much better in this aspect with its yield syntax and event mapping. But because it's basically a custom framework, the syntaxes and everything is much harder to use and may not be as useful
This is an awesome idea! I wonder if something similar could be done but for *roff or LaTeX for people who aren't familiar with the whole web development world
@@JoyofCodeDev What a legend! Supporting free and open source software like that. Could you please make a tutorial for this? Your videos are really professional and I'm sure the community would love to see how you make your videos 🙂
Wow, you are GENIUS. What if this could also be an npm package? Where it can be incorporated into any existing web app or framework like angular or react (becomes tech stack agnostic) and use web components? Is it possible or have you thought about that? If so, your npm downloads will reach the sky in no time?
im not that excited about tailwind being EVERYWHERE...it looks like based on how youre using it, we can actually use plain old CSS. is that right? This is exciting stuff!
I feel the same way but give it a try because you might enjoy it for making slides and I tried to make the experience great by sorting the classes for you but you can use any styling method you want.
Congrats! Could you please show threlte within it? 3D is missing in all these solution and threlte is mostly for "real" scenes (no slide animation per se).
Hey man. I love your content, and how your blog post flows with your videos. Quick request here. I've been trying to make a modal window with a single instance that can be opened from anywhere with a store and perhaps context API. But I keep messing things up. One time, a modal went open on all the pages open on my browser😂. But it seems my brain went on strike😅. Can you help a bro out with a video? Thanks man🤟. Oh, and save me a banana
This is meant to be an introduction but if people want one sure. You can find the link to the Animotion docs in the description if you want to learn how to use it.
![Kumamoto Masters Japan 2024 | Gregoria Mariska Tunjung (INA) [5] vs. Akane Yamaguchi (JPN) [2] | F](http://i.ytimg.com/vi/EIjZybhsWqA/mqdefault.jpg)
🔴 Patreon: www.patreon.com/joyofcode
💬 Discord: joyofcode.xyz/invite
Is this video made with animotion? This would be the perfect example on the repo.
@SRG-Learn-Code The entire video is made with Animotion. I'm going to make an examples repo but you can find more examples in the docs.
This is great!
Do you have plans to make it a library and framework agnostic, probably using web components?
That way, it can be integrated easily into, say, ANGULAR OR REACT.
@@HealmaTech I don't because I love Svelte and I'm not interested in using web components.
@@JoyofCodeDev Okay, still thanks.
However, your reply is very mean and shortsighted.
People make languages, frameworks and libraries : not just for the love of the tools used, but for the love of tools that will be created with them.
love how you used animotion to demonstrate how animotion works, looks great
This is incredible man! 🔥 Can't wait to try it out!
Another channel I respect
Me too
Just tried this out together with mdsvex + Tailwind Typography for markdown styling and oh my god I am in love, those three are a god-like combination. I genuinely think that this will partly replace advanced-markdown-slides for Obsidian for me, at least for more complicated projects I am absolutely sticking with this.
I love that idea.
An Animotion presentation using Animotion, nice touch
Looks great, can't wait to flex it in work meetings while everyone else is on PowerPoint, subbed!
So no one else is talking about Animotion in RUclips
It's an honor for us to be with you
Forward thinker!
It's niche.
I just used this to make a presentation about nix! :) Thank you!
You're a legend, man. This is incredible. Thanks a lot for sharing.
Amazing!!!
Grateful for this simple-to-use animation framework! As a game dev content creator, it's perfect for my videos. No React learning like MotionCanvas or ReMotion. Thanks for enhancing my workflow!
Awesome! 😄
This looks great. Fantastic job my guy.
This looks amazing, am going to try out tonight
Why am I just seeing this!!!! Great work, ❤ from Uganda
This looks amazing! I will definitely try it. A video on how you made this library and your development process would be very informative and interesting.
That sounds interesting.
Wow, this is great! I have used both Manim and Remotion, but thinking about trying Motion Canvas. Looks like I'll try out Animotion too.
Hey, did you try them? What did you learn? Let us know :)
@@someman7 I learned that I love Svelte more than React. Now all my new projects use Svelte.
@@RickyC0626 We were talking about animation, but that's something, I guess. What do you like about Svelte better? In particular, I'm interested in the programming experience. Btw since you're off mainstream already, did you try Solid.js?
Awesome 🎉. This is exactly what I was looking for. Thanks.
Big thank for your new video 🎉 Maybe tip for the next one: Sveltekit as PWA 😅
Amazing idea! Definitely gonna use that for simpler projects that don't require Motion Canvas,
Damn seems so cool! Will try it on myportfolio site maybe🤔
great explanation. thank you!
Awesome, will use it for sure!
Another🔥video! i love your work man
This is awesome! I'm about to start pumping out web dev youtube content and was looking into Remotion. Been trying to decide if I should build something myself just for my personal use for content creation. I was considering the latter option because I totally wanted to use Vite, Svelte, and Tailwind. So yeah, I'm so here for this! I love how unopinionated it is as well. I was feeling icky about adopting a tool that I might have to invest a lot in and find it hard to get away from later.
Bro did not, in fact, “start pumping out web dev RUclips content”
@@Chemest_anope lol. Chronic health issues will do that unfortunately.
I love it! But it would be great with an export feature to video or PDF.
Legend 🔥🔥🔥 Great explanation
This project looks interesting..i will give it a try.. please add some basic instructions and overview of features with examples in a docs page 😊
You can find the docs in the description.
Amazing 🤩🤩
Thank you
This is fantastic
I love it!
Finally new show let me see 😊
Imma invest in this
So cool man! ⚡
This looks like Godot Slides, but with web tech stack. Which seems like a valuable thing to do and have.
Awesome!
I tried out both remotion and motion canvas.
Remotion is great because it's html/css/js which I am familiar with. Downside is that it's stuck to react and sometimes there are rendering issues. The way you animate things by exclusively using frames is also annoying.
Motion canvas is much better in this aspect with its yield syntax and event mapping. But because it's basically a custom framework, the syntaxes and everything is much harder to use and may not be as useful
This is an awesome idea! I wonder if something similar could be done but for *roff or LaTeX for people who aren't familiar with the whole web development world
You can use the Math (KaTeX) and Step component together for mathematical formulas.
Your presentation is awesome. What do you use to create your videos?
I use Animotion for the presentation that I record using OBS and Audacity for the audio and Kdenlive for final edits.
@@JoyofCodeDev What a legend!
Supporting free and open source software like that. Could you please make a tutorial for this? Your videos are really professional and I'm sure the community would love to see how you make your videos 🙂
Wow, you are GENIUS.
What if this could also be an npm package?
Where it can be incorporated into any existing web app or framework like angular or react (becomes tech stack agnostic) and use web components?
Is it possible or have you thought about that?
If so, your npm downloads will reach the sky in no time?
Tom is a genius. I don't have any plans because I love Svelte and I don't want to use web components.
I want to add more custom keywords to c# language highlight, how i can do that ?
You can look at the Svelte example: animotion.pages.dev/docs/code-blocks#support-for-other-languages.
This project looks interesting, what is the most significant difference between animotion and motion canvas?
Motion Canvas is an animation engine while Animotion uses slides and lets you use any JavaScript animation library.
what a fucking legend
How can I install it and use it on an existing svelte project? I tried looking in the documentation but there's nothing about how to do it
You can't because there is no Animotion package you can import and use. I'm open to it but I would need to think about it.
is there Latex Support or 3D graph Animation Like Capability in it Like manim ?
You can write formulas using KaTeX if you read animotion.pages.dev/docs/math.
What font are you using? I really like it.
It's MonoLisa.
Great project!
Do you use svelte crossfade transition here?
The entire video is made with Animotion.
im not that excited about tailwind being EVERYWHERE...it looks like based on how youre using it, we can actually use plain old CSS. is that right? This is exciting stuff!
I feel the same way but give it a try because you might enjoy it for making slides and I tried to make the experience great by sorting the classes for you but you can use any styling method you want.
That's a cool project, although it definitely lacks a way to export anything as a video without having to open OBS to capture your screen.
That would be great.
@@JoyofCodeDev Remotion has that, and I've used it to generate visualizers for my soundtracks very comfortably.
@@thatanimeweirdo I thought about it before and I'd love to be able to record a presentation but there's other things I need to figure out before.
so cool
Congrats! Could you please show threlte within it? 3D is missing in all these solution and threlte is mostly for "real" scenes (no slide animation per se).
You can use Threlte to do whatever you want inside of a slide in Animotion and animate the values with Svelte. 😄
xkcd 927: Standards
Will “npm install animotion” in existing repo work too?
Yeah! 😄
That's cool and that but does it have documentation?
Links are in the description.
wow, is this video animation built with that too?
💯
How did you made this video ?
so how do you output this to video?
I use OBS but recently I've been thinking about using the browser media API for recording.
Hey man. I love your content, and how your blog post flows with your videos.
Quick request here. I've been trying to make a modal window with a single instance that can be opened from anywhere with a store and perhaps context API. But I keep messing things up. One time, a modal went open on all the pages open on my browser😂. But it seems my brain went on strike😅. Can you help a bro out with a video?
Thanks man🤟.
Oh, and save me a banana
Sure! 😄
Just use native CSS, even with svelte, d3 and etc.!
You can for sure and there's an entire section about styles in the docs.
Why the video is too short ?
One month and no new content 😢
Confusing alternatives listed. You've compared animation engines to the presentation framework. Animotion is basically a wrapper around reveal.js.
I mention them because they're used to visualize ideas with code which inspired me to make Animotion.
Is this an advertisement ?
Yeah, I made it! 😄
@@JoyofCodeDev Will you be making tutorial like videos of project you can use it with?
For beginners?
This is meant to be an introduction but if people want one sure. You can find the link to the Animotion docs in the description if you want to learn how to use it.