I Made an Awesome Code Animation Tool

Ғылым және технология

so i made a neat animation tool and im really happy with how it turned out. I think y'all might like it!!
check it out here (or dont whatever): www.animate-code.com/
also please dont blow up my server cause video processing takes lots of cpu thx :^)
-- my links
Newsletter: www.joshtriedcoding.com/
Discord: / discord
GitHub: github.com/joschan21

Пікірлер: 261

  • @joshtriedcoding
    @joshtriedcoding4 ай бұрын

    even my grandma said "josh this tool be bussin", what do y'all think?

  • @taiyebnirjhor8414

    @taiyebnirjhor8414

    4 ай бұрын

    you should try

  • @__alex.grae__

    @__alex.grae__

    4 ай бұрын

    Hömma, Joshi, deine App fährt mit'm Bus!

  • @FabuBrik

    @FabuBrik

    4 ай бұрын

    I do be bussin. Granny ain’t cappin.

  • @greendsnow

    @greendsnow

    4 ай бұрын

    bro, reveal .js has solved this problem already...

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    hahaha

  • @nazmulhridoy
    @nazmulhridoy4 ай бұрын

    Josh, consider making this tool open source so that we can contribute to taking this project to the next level! :)

  • @vaisakhkm783

    @vaisakhkm783

    3 ай бұрын

    Let's be honest, first week he gets a PR nightmare and then no one even going to look at that code..

  • @daylen577

    @daylen577

    3 ай бұрын

    Very bad idea, open source requires maintenance and is a massive headache, especially for someone as inexperienced as this guy. If it took him two weeks to build this, imagine how long it'd take him to get through dozens of PRs

  • @vaisakhkm783

    @vaisakhkm783

    3 ай бұрын

    @@daylen577 i wouldn't say it's a bad idea... if he is not going to commercialize it, it's just a matter of putting it in a github repo and slapping a mit license on it... he doesn't need to accept or even check any pull requests or fix issues... also, two weeks is impressive right? things i estimate to be completed in 2hour always takes 2 weeks....

  • @jacksonbourne

    @jacksonbourne

    3 ай бұрын

    ​@@daylen577Thought I was the only one to think this. This taking 2 weeks is wild given there isn't much to it.

  • @daylen577

    @daylen577

    3 ай бұрын

    @@jacksonbourne Yeah this is an afternoon project at best, lol

  • @khaledsanny4817
    @khaledsanny48174 ай бұрын

    This is what i call Software Engenieering ... research... errors ... experiments and though thoughts ... 😂 Good job dude.

  • @unforgettable31

    @unforgettable31

    4 ай бұрын

    With all due respect to the creator, this is just reinventing the wheel.

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    cheers man! appreciate that

  • @karlnassar8646

    @karlnassar8646

    4 ай бұрын

    @@unforgettable31 if there's not an actual product for all users how is it reinventing the wheel?

  • @ways.

    @ways.

    3 ай бұрын

    did you mean to say engineering ?

  • @faraonch
    @faraonch4 ай бұрын

    Thank you for sharing the process. As being in a similar position, creating products from scratch with same technology, it's a great feeling how others run through the processes. Well done.

  • @AliBenj-so6om

    @AliBenj-so6om

    3 ай бұрын

    Good comment

  • @MikeDSutton
    @MikeDSutton3 ай бұрын

    Nice tool, thanks for releasing it! Found an edge case for you; since the diff only uses the plaintext rather than taking into account the syntax highlighting there is a scenario where the colour of a common token will change, e.g: `const x = test();` -> `const x = "test";` -- The word "test" jumps from yellow to red at the start of the transition. Interpolating the colour of each token as well as its position would solve this issue.

  • @farzany
    @farzany4 ай бұрын

    Wow I love this kind of initiative! Amazing work, going to use this from now on!

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    cheers man!

  • @brianruizy
    @brianruizy4 ай бұрын

    nicely done Josh. This has so much potential !!

  • @sunejack7161
    @sunejack71614 ай бұрын

    Great tool! I love this innovative thinking and the initiative taken to implement it. Great job man.

  • @WebDevEducation
    @WebDevEducation4 ай бұрын

    Absolutely LOVE this! Can definitely see myself using this tool for my own short form tutorials!

  • @WeeklyHow
    @WeeklyHow4 ай бұрын

    I'll definitely use this for my future videos. Thanks Josh!

  • @Garkolym
    @Garkolym3 ай бұрын

    Glückwunsch zu 100k Abos :D Hast den Playbutton verdient! Das Tool ist genial

  • @Mahfoudh94
    @Mahfoudh944 ай бұрын

    just respect for you, that was an amazing take, your videos never failed us.

  • @NizzyABI
    @NizzyABI4 ай бұрын

    This is gonna help a lot for the videos. Thanks Josh!

  • @anlukinha8764
    @anlukinha87644 ай бұрын

    Feedback: 1 - When the "Tab" key is pressed, it focuses on the "Preview" button instead of adding indentation. 2 - I noticed that sometimes code highlighting appears, so I assume you are using a "code editor" library (although, now I think it might have been the browser's language corrector... my mistake). Have you ever heard of "Monaco Editor"? (Probably yes, but it doesn't hurt to ask, right?) 3 - Perhaps consider implementing a resizable (code) window. Note: "Monaco Editor" allows for auto-formatting and auto-highlighting for multiple languages natively. It may also provide the option to add a "language picker" in the future. Congratulations for the app! I remember a few weeks ago when I asked about what you were using... I never imagined you would create a project like this! Best regars and good luck with your bachelor's thesis!

  • @studyafa7159

    @studyafa7159

    3 ай бұрын

    Can some please tell on which browser it is working well

  • @Diego_Cabrera
    @Diego_Cabrera4 ай бұрын

    Definitely using this in my videos. Thanks for the amazing tool!

  • @zakir.nuriiev
    @zakir.nuriiev4 ай бұрын

    Cool project, Josh! Thank you for sharing it!

  • @HugoOlsson01
    @HugoOlsson014 ай бұрын

    Very impressive. Good choices with the design of the site.

  • @srujangurram
    @srujangurram4 ай бұрын

    Very dope ! Great idea and clean execution too 👏

  • @Martin_Adams
    @Martin_Adams3 ай бұрын

    What a unique project and great for educators! I'd love to see this as a desktop app for a one time payment.

  • @muhamedkarajic
    @muhamedkarajic3 ай бұрын

    Ty for adding this, really appreciate the effort.

  • @destroylevi
    @destroylevi4 ай бұрын

    very nice project. actually was looking for something to animate code for videos!

  • @MilMike
    @MilMike3 ай бұрын

    wow! I was searching for something similar for years. Thanks for sharing it!

  • @nazarshvets7501
    @nazarshvets75014 ай бұрын

    Such a great idea for problem to solve. Great content!

  • @ryzzlas
    @ryzzlas4 ай бұрын

    Looks very nice! One question: Why hit the server to export? Wouldn't the client be able to do that?

  • @vacek.1360
    @vacek.13604 ай бұрын

    This tool is awesome!!! Imagine that teachers at school will start to using it, i think it would be faster than typing whole code infont of class and also students will understand the code better because the website is clean and minimalistic.

  • @BlissfulGroup
    @BlissfulGroup4 ай бұрын

    Love this tool Josh! Amazing work for just two weeks! P.S. Please be aware you can duplicate your way way passed 10 slides 😉

  • @ridass.7137
    @ridass.71374 ай бұрын

    Thats super cool, congrats!

  • @jterry92
    @jterry923 ай бұрын

    I just subbed. This is dope! Keep it up, man!

  • @jupiter909
    @jupiter9093 ай бұрын

    Beautiful work, well done!

  • @ananas32069
    @ananas320694 ай бұрын

    Amazing tool! The nice feature to add would be support for multiple programming languages

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    oh yeah that's way up there

  • @xskerrittx1

    @xskerrittx1

    3 ай бұрын

    I'd love to use this for Python!@@joshtriedcoding

  • @AustinShelby
    @AustinShelby4 ай бұрын

    Cool project! This will come handy for sure

  • @igors.2943
    @igors.29434 ай бұрын

    Cool!! 😃 Great job! 🥳 Good luck!😊

  • @GreenCrowDev
    @GreenCrowDev3 ай бұрын

    Bless you 🙏 I was really looking for something like this!

  • @noahpittman
    @noahpittman4 ай бұрын

    This is amazing!! If this were open source I would love to work on it. Gonna use this for sure !!

  • @tomisloading
    @tomisloading4 ай бұрын

    YES I absolute LOVE this 😭

  • @georgekrax
    @georgekrax4 ай бұрын

    Great tool buddy! 🙌

  • @padione3540
    @padione35404 ай бұрын

    This is amazing! Maybe at some point you can give us a closer look behind the curtain of how it works. Especially the converting to video part 🎉

  • @SteveBoyer10

    @SteveBoyer10

    3 ай бұрын

    I don’t know how he renders the video, but I’d use Remotion!

  • @TheIpicon
    @TheIpicon4 ай бұрын

    great job, looks awesome Josh! good luck with the thesis ;)

  • @TheIpicon

    @TheIpicon

    4 ай бұрын

    btw, in my country we do only thesis for masters, so it was weird for me to hear that...

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    @@TheIpicon thanks! interesting, which country are you from? For us here in Germany we have a thesis for both, though the masters is much longer and the scientific expectation much higher

  • @TheIpicon

    @TheIpicon

    4 ай бұрын

    @@joshtriedcodingsame for us, but on bachelors we don't call it a thesis just a "final project".

  • @NiklasZiermann
    @NiklasZiermann3 ай бұрын

    Guess I've got a new tool for my video making process. Amazing work man! Ich bin begeistert :)

  • @arthur_snow
    @arthur_snow4 ай бұрын

    amazing josh!!!

  • @johnefan
    @johnefan4 ай бұрын

    This is really cool 😎 Well done 👍

  • @CoryTheSimmons
    @CoryTheSimmons4 ай бұрын

    Pretty cool for people making videos or presentations. I'd love to see some more UI/UX work on it and accounts where I can save stuff.

  • @CleverGeneration
    @CleverGeneration4 ай бұрын

    Awesome project Josh, thanks for sharing! 👏 What library did you use for the drag and drop feature?

  • @editdev
    @editdev4 ай бұрын

    awesome tool, I'm gonna try it out for some game development vids!

  • @amershboul9107
    @amershboul91074 ай бұрын

    man! im proud of you!

  • @DomskiPlays
    @DomskiPlays4 ай бұрын

    Very very cool Josh! Things I'd like to see: All the config options like transition easing, duration, syntax highlighter/theme Also, it's unclear how to copy a slide so maybe a tutorial would be nice on the first visit?

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    yep i'd like to see those too!

  • @ciach0_

    @ciach0_

    4 ай бұрын

    and maybe the delay until the next transition

  • @monterourena
    @monterourena4 ай бұрын

    Omg Josh! This tool if amazing 🔥

  • @promisefemi
    @promisefemi3 ай бұрын

    This is just amazing, DAMN

  • @vagnereix
    @vagnereix3 ай бұрын

    amazing josh ✨

  • @uscjake868
    @uscjake8684 ай бұрын

    Very Cool. I was clicking the arrows that didn't work until I realized you said "Click the arrow key"

  • @bchr364
    @bchr3644 ай бұрын

    Did you write this powerpoint(slides on side and preview) from scratch or did you use any lib?

  • @mohammeddrgh5705
    @mohammeddrgh57053 ай бұрын

    this def going to my bookmarks , p.s : can you make some parameters where you can change the speed of the animation and the size of the text and when you add a new slide it automatically copies and pastes the old slide(s content in it , thank you anyway for this great tool

  • @DioArsya
    @DioArsya4 ай бұрын

    dang it, this is decent for 2 weeks and very usable 🔥

  • @esquilo_atomico
    @esquilo_atomico4 ай бұрын

    Amazing tool Feedback: - It would be cool to be able to go to the slide by pressing its number when not focusing the editor - Would be nice to have a way to skip the animation on preview, maybe by pressing shift+arrows - Themes :3 - Export as gif (?) - Trap tab when focusing the editor - More languages supported by the syntax highlight thinng (Elixir, Rust, Python, Kotlin, Go, C) The tool is really bussin and has a lot of potential (now I'm subscribed)

  • @ilario-gd
    @ilario-gd3 ай бұрын

    Hey man, first of all, this is an awesome tool! But I was thinking, what about a color palete editor, to have our own text color choices, background color as well, maybe even a font changing possibility? It's kinda dope but there's only the same theme available. Thank you tho!

  • @raisisn
    @raisisn4 ай бұрын

    Omg this is awesome, thank you

  • @AndreFelipeF
    @AndreFelipeF3 ай бұрын

    great job man

  • @ComfyCosi
    @ComfyCosi4 ай бұрын

    this is awesome, are you going to open source it like your other tutorials?

  • @kalilsubaan
    @kalilsubaan4 ай бұрын

    Yo Josh great vid as always. Btw what topic you doing for your thesis? Im about to start mine. All the best!

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    it's about how generative ai can be used to increase profitability in e-commerce, even involving a prototype app I coded :)

  • @IIllIlIllIlIllIlIlI
    @IIllIlIllIlIllIlIlI4 ай бұрын

    Love your videos bro

  • @monstajoedev
    @monstajoedev4 ай бұрын

    This is amazing ❤

  • @kipchickensout
    @kipchickensout3 ай бұрын

    Sooo the highlighting only works for JS? I really like the idea, had the plan to do that myself as well at some point but had no motivation, it looks really nice!

  • @vaisakhkm783
    @vaisakhkm7833 ай бұрын

    Isn't better to do rendering in the client side right? So server expense will be reduced i am there are sure complied wasm ffmeg libraries are available

  • @facundoflores4763
    @facundoflores47634 ай бұрын

    Beautiful!

  • @thecastiel69
    @thecastiel694 ай бұрын

    Can you do a video about unit testing? Like, if it is important or mostly time westing, for frontend or backend, because philosophicaly I don't know why the idea stub and mock make sense.

  • @slendi9623
    @slendi96233 ай бұрын

    Cool, did you consider rendering with ffmpeg on thr client using WASM?

  • @luccaparadeda1985
    @luccaparadeda19854 ай бұрын

    Come on thsi is amazing, I already used It for a presentation for tomorrow! 🎉🎉

  • @herzog0
    @herzog03 ай бұрын

    Josh is the version of Syd from Toy Story that ended up doing really cool stuff on coding

  • @arbitervildred8999
    @arbitervildred89993 ай бұрын

    the algorithm looks like it could've easily been reproduced in python within 2 hours with word lists, splits, and such and since it's build frame by frame you could just make it exactly like an ordinary animation tool paste code in the first frame box, and hit new frame, the entire code would be automatically copied, so you just have to keep adding lines each frame and maybe play with a timer, speed, transition effect

  • @natryx_nyx
    @natryx_nyx4 ай бұрын

    hey josh what's the name of the app u were using for the GAME PLAN

  • @Nelson-Mehlis
    @Nelson-Mehlis4 ай бұрын

    Josh you are awesome 👏

  • @akuoko_konadu
    @akuoko_konadu4 ай бұрын

    Thanks for sharing this 🎉

  • @codetech1165
    @codetech11654 ай бұрын

    Hi Josh, I absolutely love your videos mate. and I was interested in knowing if one was to reach out to you for professional purposes, what and how do they reach you

  • @th3l0m1s.matyas.kostal
    @th3l0m1s.matyas.kostal3 ай бұрын

    What program did you use to make those notes and schedule?

  • @Spooky.Studios
    @Spooky.Studios3 ай бұрын

    i'm kinda late to this but is there other Programming languages in the tool? (C#, Lua, etc)

  • @bchr364
    @bchr3644 ай бұрын

    very nice, do you consider to make it open source?

  • @elixpo
    @elixpo3 ай бұрын

    This is just amazing, please make it opensouce so that we can contribute more to it

  • @SylixAI
    @SylixAI4 ай бұрын

    Nice! What library did you use for record the slides and export it as .mp4 file?

  • @joshtriedcoding

    @joshtriedcoding

    4 ай бұрын

    its a custom animation engine I wrote on the backend

  • @dahermora5976
    @dahermora59763 ай бұрын

    Awesome work, Josh! I've seen some people saying they can do it in an afternoon, and to all those people, I say, Talk is cheap, show me the code.

  • @Sandleaf
    @Sandleaf3 ай бұрын

    Thats extremely useful

  • @sleepy-gogo
    @sleepy-gogo3 ай бұрын

    I'd love to contribute to this project! Please make it open source so the community can maintain it!

  • @Marco-34235
    @Marco-342353 ай бұрын

    YOU ARE AMAZING

  • @CodeWithMathias
    @CodeWithMathias4 ай бұрын

    can we access the github repo ? i want to add some stuff for my presentations like add autocomplete and langage selection ...

  • @Zizaco
    @Zizaco4 ай бұрын

    That's a pretty neat idea. But it doesn't work that well, some characters overlap and don't appear correctly. But I'll be definitely be using this if you fix these bugs. You should add some ads there to monetize this : )

  • @user-dh9rh3js3u
    @user-dh9rh3js3u4 ай бұрын

    Just amazinggg 💥

  • @ismahelo
    @ismahelo3 ай бұрын

    which program are you using on 1:44? it looks pretty neat

  • @eineatombombe
    @eineatombombe4 ай бұрын

    Is this open source? I'd love to self host it so i can render l i want

  • @Zhundah
    @Zhundah4 ай бұрын

    Are you planning on open sourcing it?

  • @midediamond6314
    @midediamond63144 ай бұрын

    How do you research new tools for your project?

  • @chandrashekar316
    @chandrashekar3163 ай бұрын

    I assumed you made it oss, but alas Would be great as people would love to contribute

  • @yichenchong7728
    @yichenchong77283 ай бұрын

    Does it only support typescript/javascript syntax for highlighting right now?

  • @Soraphis91
    @Soraphis913 ай бұрын

    Just here to mention "Motion Canvas" which has a "CodeBlock" build in that does basically this.

  • @deadlock_33
    @deadlock_334 ай бұрын

    Looks cool Josh can you make open-source so we also can contribute and make it more powerful ❤

  • @user-qh3nq8np5i
    @user-qh3nq8np5i3 ай бұрын

    if you go in preview and go back, some text doesnt animate back the way it did, some buggy characters on top of each other, brackets glitching, etc.

  • @Disorrder
    @Disorrder3 ай бұрын

    Cool! Let's optimize the calculations :)

  • @kushalpillay2677
    @kushalpillay26773 ай бұрын

    What if we took keynote and produced a large dataset of animations on various code snippets. Run ocr on it to calculate positions and new positions. Then we use what the model generates and animate it?

  • @joshtriedcoding

    @joshtriedcoding

    3 ай бұрын

    why introduce AI into a field that does not need AI? If you're just curious how well it would perform, my prediction is pretty bad because tokenization needs to be exact, something LLMs are not great at

  • @Rimsabe
    @Rimsabe3 ай бұрын

    nice, whats the tool u use to draw ??

  • @facundosoto2748
    @facundosoto27483 ай бұрын

    Was it necessary to add a giant black background? Is there a way to remove it? 😭

  • @pelianneil7138
    @pelianneil713812 күн бұрын

    So amazing. The only problem is that i want to animate rust code and when i write "fn" instead of "function", even after changing the file extension, there is no syntax highlighting

  • @charliemcguire4319
    @charliemcguire43193 ай бұрын

    nice one dude

Келесі