Introducing Animotion: Visualize Ideas With Code
Рет қаралды 49,806
Күн бұрынAnimotion is a presentational framework for creating beautiful slides and visualizing ideas with code.
👉️ Support
🔴 Patreon
/ joyofcode
👉️ Links
Animotion
🔗 animotion.pages.dev/
Animotion Docs
🔗 animotion.pages.dev/docs
Animotion GitHub
🔗 github.com/animotionjs/animotion
Creating Content
🔗 joyofcode.xyz/creating-content
👉️ Setup
🔗 joyofcode.xyz/uses
👉️ Socials
🐦️ Twitter:
/ joyofcodedev
💬 Discord
joyofcode.xyz/invite
🔖 Timestamps
0:00 Intro
0:34 Animotion
0:47 Bring Your Own Animation Engine
0:59 Bring Your Own Library
1:26 Bring Your Own Controls
1:55 Using Animotion
2:17 Auto-animate
3:04 Code Blocks
3:36 Events
4:18 Bring Your Own Layout
5:13 Get Started
#joyofcode #animotion
@JoyofCodeDev 10 ай бұрын
🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite
@SRG-Learn-Code 10 ай бұрын
Is this video made with animotion? This would be the perfect example on the repo.
@JoyofCodeDev 10 ай бұрын
@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.
@HealmaTech 10 ай бұрын
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 10 ай бұрын
@@HealmaTech I don't because I love Svelte and I'm not interested in using web components.
@HealmaTech 10 ай бұрын
@@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.
@Huntabyte 10 ай бұрын
This is incredible man! 🔥 Can't wait to try it out!
@devbyveritech 10 ай бұрын
Another channel I respect
@digitaldrreamer 10 ай бұрын
Me too
@0range69 10 ай бұрын
love how you used animotion to demonstrate how animotion works, looks great
@OwO-. 10 ай бұрын
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.
@JoyofCodeDev 10 ай бұрын
I love that idea.
@maninalift 10 ай бұрын
This looks great. Fantastic job my guy.
@fabriai 10 ай бұрын
You're a legend, man. This is incredible. Thanks a lot for sharing.
@markzuckerbread1865 10 ай бұрын
Looks great, can't wait to flex it in work meetings while everyone else is on PowerPoint, subbed!
@mainendra 10 ай бұрын
Awesome 🎉. This is exactly what I was looking for. Thanks.
@tunisoft7465 10 ай бұрын
An Animotion presentation using Animotion, nice touch
@frazuppi4897 10 ай бұрын
Awesome, will use it for sure!
@RenCode 10 ай бұрын
Another🔥video! i love your work man
@dom8429 10 ай бұрын
great explanation. thank you!
@ethanniser 10 ай бұрын
This looks amazing, am going to try out tonight
@nyashachiroro2531 10 ай бұрын
Legend 🔥🔥🔥 Great explanation
@pixanddev4187 10 ай бұрын
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!
@JoyofCodeDev 10 ай бұрын
Awesome! 😄
@fu_hi 10 ай бұрын
Amazing 🤩🤩 Thank you
@AntoniGawlikowski 10 ай бұрын
I love it!
@frittex 10 ай бұрын
Amazing idea! Definitely gonna use that for simpler projects that don't require Motion Canvas,
@anfytrion 10 ай бұрын
This is fantastic
@argonjs 10 ай бұрын
So cool man! ⚡
@guynatumanya 10 ай бұрын
Why am I just seeing this!!!! Great work, ❤ from Uganda
@forever-knight 3 ай бұрын
Awesome!
@asatorftw 10 ай бұрын
Damn seems so cool! Will try it on myportfolio site maybe🤔
@noaudiochannel3131 10 ай бұрын
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.
@JoyofCodeDev 10 ай бұрын
That sounds interesting.
@kvetoslavnovak423 10 ай бұрын
Big thank for your new video 🎉 Maybe tip for the next one: Sveltekit as PWA 😅
@RickyC0626 10 ай бұрын
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.
@someman7 3 ай бұрын
Hey, did you try them? What did you learn? Let us know :)
@RickyC0626 3 ай бұрын
@@someman7 I learned that I love Svelte more than React. Now all my new projects use Svelte.
@someman7 3 ай бұрын
@@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?
@catdadcode 10 ай бұрын
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.
@Chemest_a 2 ай бұрын
Bro did not, in fact, “start pumping out web dev KZfaq content”
@AlexFord 2 ай бұрын
@@Chemest_anope lol. Chronic health issues will do that unfortunately.
@user-on2rx4si7g 10 ай бұрын
Finally new show let me see 😊
@cmdxen 10 ай бұрын
Imma invest in this
@kylestubblefield3404 10 ай бұрын
so cool
@IsxaaqAcademy 8 ай бұрын
So no one else is talking about Animotion in KZfaq It's an honor for us to be with you Forward thinker!
@JoyofCodeDev 8 ай бұрын
It's niche.
@dariodelconte5057 10 ай бұрын
what a fucking legend
@user-lq7xz1th4x 10 ай бұрын
Great project! Do you use svelte crossfade transition here?
@JoyofCodeDev 10 ай бұрын
The entire video is made with Animotion.
@edtechdesigner 10 ай бұрын
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 😊
@JoyofCodeDev 10 ай бұрын
You can find the docs in the description.
@mayanksharma6927 10 ай бұрын
Your presentation is awesome. What do you use to create your videos?
@JoyofCodeDev 10 ай бұрын
I use Animotion for the presentation that I record using OBS and Audacity for the audio and Kdenlive for final edits.
@mayanksharma6927 10 ай бұрын
@@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 🙂
@luiscatalan3309 18 күн бұрын
I love it! But it would be great with an export feature to video or PDF.
@aaronspeedy7780 10 ай бұрын
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 10 ай бұрын
You can use the Math (KaTeX) and Step component together for mathematical formulas.
@forno_nicolas 6 ай бұрын
Man this is DOPE thanks! Any way to directly use this inside sveltekit?
@JoyofCodeDev 6 ай бұрын
You can move things over to SvelteKit without a problem if you know your way around it but I'm also thinking about changing the default template from using Vite to SvelteKit in the future.
@Alche_mist 10 ай бұрын
This looks like Godot Slides, but with web tech stack. Which seems like a valuable thing to do and have.
@GameFuMaster 7 ай бұрын
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
@aidenzepp 10 ай бұрын
What font are you using? I really like it.
@JoyofCodeDev 10 ай бұрын
It's MonoLisa.
@HealmaTech 10 ай бұрын
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?
@JoyofCodeDev 10 ай бұрын
Tom is a genius. I don't have any plans because I love Svelte and I don't want to use web components.
@pixanddev4187 10 ай бұрын
I want to add more custom keywords to c# language highlight, how i can do that ?
@JoyofCodeDev 10 ай бұрын
You can look at the Svelte example: animotion.pages.dev/docs/code-blocks#support-for-other-languages.
@Cadknowledge 7 ай бұрын
is there Latex Support or 3D graph Animation Like Capability in it Like manim ?
@JoyofCodeDev 7 ай бұрын
You can write formulas using KaTeX if you read animotion.pages.dev/docs/math.
@abdallahmahmoud7650 Ай бұрын
How did you made this video ?
@pm1234 10 ай бұрын
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).
@JoyofCodeDev 10 ай бұрын
You can use Threlte to do whatever you want inside of a slide in Animotion and animate the values with Svelte. 😄
@AhmadShauqi-co3ij 9 ай бұрын
This project looks interesting, what is the most significant difference between animotion and motion canvas?
@JoyofCodeDev 9 ай бұрын
Motion Canvas is an animation engine while Animotion uses slides and lets you use any JavaScript animation library.
@christopherpoulsenfernande1624 9 ай бұрын
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
@JoyofCodeDev 9 ай бұрын
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.
@ArielLothlorien 10 ай бұрын
That's cool and that but does it have documentation?
@JoyofCodeDev 10 ай бұрын
Links are in the description.
@naranyala_dev 10 ай бұрын
wow, is this video animation built with that too?
@JoyofCodeDev 10 ай бұрын
💯
@Ohisia 10 ай бұрын
Will “npm install animotion” in existing repo work too?
@JoyofCodeDev 10 ай бұрын
Yeah! 😄
@blacklistnr1 10 ай бұрын
xkcd 927: Standards
@irlshrek 10 ай бұрын
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!
@JoyofCodeDev 10 ай бұрын
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.
@digitaldrreamer 10 ай бұрын
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
@JoyofCodeDev 10 ай бұрын
Sure! 😄
@thatanimeweirdo 9 ай бұрын
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.
@JoyofCodeDev 9 ай бұрын
That would be great.
@thatanimeweirdo 9 ай бұрын
@@JoyofCodeDev Remotion has that, and I've used it to generate visualizers for my soundtracks very comfortably.
@JoyofCodeDev 9 ай бұрын
@@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.
@GameFuMaster 7 ай бұрын
so how do you output this to video?
@JoyofCodeDev 7 ай бұрын
I use OBS but recently I've been thinking about using the browser media API for recording.
@koodeau 10 ай бұрын
Just use native CSS, even with svelte, d3 and etc.!
@JoyofCodeDev 10 ай бұрын
You can for sure and there's an entire section about styles in the docs.
@user-on2rx4si7g 10 ай бұрын
Why the video is too short ?
@ivanjermakov 10 ай бұрын
Confusing alternatives listed. You've compared animation engines to the presentation framework. Animotion is basically a wrapper around reveal.js.
@JoyofCodeDev 10 ай бұрын
I mention them because they're used to visualize ideas with code which inspired me to make Animotion.
@ruckriver7508 4 ай бұрын
One month and no new content 😢
@Mel-mu8ox 10 ай бұрын
Is this an advertisement ?
@JoyofCodeDev 10 ай бұрын
Yeah, I made it! 😄
@Mel-mu8ox 10 ай бұрын
@@JoyofCodeDev Will you be making tutorial like videos of project you can use it with? For beginners?
@JoyofCodeDev 10 ай бұрын
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.
Diana Belitskay
Рет қаралды 20 МЛН