I Made an Awesome Code Animation Tool

Поділитися
Вставка
  • Опубліковано 27 січ 2024
  • 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
  • Наука та технологія

КОМЕНТАРІ • 262

  • @joshtriedcoding
    @joshtriedcoding  4 місяці тому +253

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

    • @taiyebnirjhor8414
      @taiyebnirjhor8414 4 місяці тому +2

      you should try

    • @__alex.grae__
      @__alex.grae__ 4 місяці тому +5

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

    • @FabuBrik
      @FabuBrik 4 місяці тому +5

      I do be bussin. Granny ain’t cappin.

    • @greendsnow
      @greendsnow 4 місяці тому

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

    • @joshtriedcoding
      @joshtriedcoding  4 місяці тому +2

      hahaha

  • @nazmulhridoy
    @nazmulhridoy 4 місяці тому +351

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

    • @vaisakhkm783
      @vaisakhkm783 4 місяці тому +25

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

    • @daylen577
      @daylen577 4 місяці тому +29

      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 4 місяці тому

      @@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 4 місяці тому +5

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

    • @daylen577
      @daylen577 4 місяці тому +6

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

  • @faraonch
    @faraonch 4 місяці тому +24

    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.

  • @MikeDSutton
    @MikeDSutton 4 місяці тому +18

    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
    @farzany 4 місяці тому +18

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

  • @khaledsanny4817
    @khaledsanny4817 4 місяці тому +139

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

    • @unforgettable31
      @unforgettable31 4 місяці тому +2

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

    • @joshtriedcoding
      @joshtriedcoding  4 місяці тому +3

      cheers man! appreciate that

    • @karlnassar8646
      @karlnassar8646 4 місяці тому +11

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

    • @ways.
      @ways. 4 місяці тому +1

      did you mean to say engineering ?

  • @sunejack7161
    @sunejack7161 4 місяці тому +2

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

  • @brianruizy
    @brianruizy 4 місяці тому +9

    nicely done Josh. This has so much potential !!

  • @WebDevEducation
    @WebDevEducation 4 місяці тому +2

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

  • @WeeklyHow
    @WeeklyHow 4 місяці тому +1

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

  • @Garkolym
    @Garkolym 4 місяці тому

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

  • @Mahfoudh94
    @Mahfoudh94 4 місяці тому

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

  • @anlukinha8764
    @anlukinha8764 4 місяці тому +12

    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 4 місяці тому

      Can some please tell on which browser it is working well

  • @NizzyABI
    @NizzyABI 4 місяці тому +1

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

  • @zakir.nuriiev
    @zakir.nuriiev 4 місяці тому

    Cool project, Josh! Thank you for sharing it!

  • @destroylevi
    @destroylevi 4 місяці тому +3

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

  • @HugoOlsson01
    @HugoOlsson01 4 місяці тому

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

  • @Diego_Cabrera
    @Diego_Cabrera 4 місяці тому

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

  • @BlissfulGroup
    @BlissfulGroup 4 місяці тому

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

  • @srujangurram
    @srujangurram 4 місяці тому

    Very dope ! Great idea and clean execution too 👏

  • @nazarshvets7501
    @nazarshvets7501 4 місяці тому

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

  • @muhamedkarajic
    @muhamedkarajic 4 місяці тому +1

    Ty for adding this, really appreciate the effort.

  • @MilMike
    @MilMike 4 місяці тому +1

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

  • @Martin_Adams
    @Martin_Adams 4 місяці тому

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

  • @padione3540
    @padione3540 4 місяці тому +4

    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 4 місяці тому

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

  • @ryzzlas
    @ryzzlas 4 місяці тому +4

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

  • @jterry92
    @jterry92 4 місяці тому

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

  • @noahpittman
    @noahpittman 4 місяці тому

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

  • @vacek.1360
    @vacek.1360 4 місяці тому +1

    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.

  • @ananas32069
    @ananas32069 4 місяці тому +9

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

    • @joshtriedcoding
      @joshtriedcoding  4 місяці тому +2

      oh yeah that's way up there

    • @xskerrittx1
      @xskerrittx1 4 місяці тому

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

  • @ridass.7137
    @ridass.7137 4 місяці тому

    Thats super cool, congrats!

  • @TheIpicon
    @TheIpicon 4 місяці тому

    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 місяці тому +1

      @@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".

  • @jupiter909
    @jupiter909 4 місяці тому

    Beautiful work, well done!

  • @esquilo_atomico
    @esquilo_atomico 4 місяці тому

    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)

  • @AustinShelby
    @AustinShelby 4 місяці тому

    Cool project! This will come handy for sure

  • @GreenCrowDev
    @GreenCrowDev 4 місяці тому

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

  • @DomskiPlays
    @DomskiPlays 4 місяці тому +4

    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 місяці тому +1

      yep i'd like to see those too!

    • @ciach0_
      @ciach0_ 4 місяці тому

      and maybe the delay until the next transition

  • @CoryTheSimmons
    @CoryTheSimmons 4 місяці тому

    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.

  • @igors.2943
    @igors.2943 4 місяці тому

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

  • @NiklasZiermann
    @NiklasZiermann 4 місяці тому

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

  • @CleverGeneration
    @CleverGeneration 4 місяці тому

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

  • @tomisloading
    @tomisloading 4 місяці тому +1

    YES I absolute LOVE this 😭

  • @ilario-gd
    @ilario-gd 3 місяці тому

    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!

  • @johnefan
    @johnefan 4 місяці тому

    This is really cool 😎 Well done 👍

  • @kalilsubaan
    @kalilsubaan 4 місяці тому

    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 місяці тому +1

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

  • @editdev
    @editdev 4 місяці тому

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

  • @georgekrax
    @georgekrax 4 місяці тому

    Great tool buddy! 🙌

  • @promisefemi
    @promisefemi 4 місяці тому

    This is just amazing, DAMN

  • @luccaparadeda1985
    @luccaparadeda1985 4 місяці тому

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

  • @monterourena
    @monterourena 4 місяці тому

    Omg Josh! This tool if amazing 🔥

  • @mohammeddrgh5705
    @mohammeddrgh5705 3 місяці тому

    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
    @DioArsya 4 місяці тому

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

  • @ComfyCosi
    @ComfyCosi 4 місяці тому

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

  • @thecastiel69
    @thecastiel69 4 місяці тому +2

    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.

  • @Zizaco
    @Zizaco 4 місяці тому

    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 : )

  • @raisisn
    @raisisn 4 місяці тому

    Omg this is awesome, thank you

  • @uscjake868
    @uscjake868 4 місяці тому

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

  • @amershboul9107
    @amershboul9107 4 місяці тому

    man! im proud of you!

  • @deadlock_33
    @deadlock_33 4 місяці тому

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

  • @arthur_snow
    @arthur_snow 4 місяці тому

    amazing josh!!!

  • @kipchickensout
    @kipchickensout 4 місяці тому

    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!

  • @dahermora5976
    @dahermora5976 4 місяці тому

    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.

  • @sleepy-gogo
    @sleepy-gogo 4 місяці тому

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

  • @slendi9623
    @slendi9623 4 місяці тому

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

  • @bchr364
    @bchr364 4 місяці тому +7

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

  • @herzog0
    @herzog0 4 місяці тому +1

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

  • @vagnereix
    @vagnereix 4 місяці тому

    amazing josh ✨

  • @elixpo
    @elixpo 4 місяці тому

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

  • @codetech1165
    @codetech1165 4 місяці тому

    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

  • @SylixAI
    @SylixAI 4 місяці тому

    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

  • @chandrashekar316
    @chandrashekar316 4 місяці тому

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

  • @khalidsheet
    @khalidsheet 4 місяці тому +2

    Awesome work Josh!
    I suggest you turn it into an Electron Application

  • @arbitervildred8999
    @arbitervildred8999 3 місяці тому

    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

  • @code_of_honour
    @code_of_honour 4 місяці тому +1

    motion canvas is pretty good for animating code as well

  • @Disorrder
    @Disorrder 4 місяці тому

    Cool! Let's optimize the calculations :)

  • @AndreFelipeF
    @AndreFelipeF 4 місяці тому

    great job man

  • @IIllIlIllIlIllIlIlI
    @IIllIlIllIlIllIlIlI 4 місяці тому

    Love your videos bro

  • @akuoko_konadu
    @akuoko_konadu 4 місяці тому

    Thanks for sharing this 🎉

  • @meowmesh
    @meowmesh 4 місяці тому

    Yo thats the part of the engineering i want to do. I will start building something simple and eventually gradually step to difficult problem.

  • @12chachachannel
    @12chachachannel 4 місяці тому

    Finally I can code with animations

  • @bchr364
    @bchr364 4 місяці тому

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

  • @aliasgar.burhani1099
    @aliasgar.burhani1099 4 місяці тому +2

    Would love to contribute to this project and create more features . 💯

  • @mohitcodeswell
    @mohitcodeswell 4 місяці тому

    Happy to see not another clone video 😁, my man bought some real stuff.

  • @facundoflores4763
    @facundoflores4763 4 місяці тому

    Beautiful!

  • @monstajoedev
    @monstajoedev 4 місяці тому

    This is amazing ❤

  • @Rimsabe
    @Rimsabe 3 місяці тому

    nice, whats the tool u use to draw ??

  • @tmotthy
    @tmotthy 4 місяці тому

    Nice one Josh! Am I the only one who is also interested in knowing what tool he is using for explaining in this video? Please if you know let me know.

  • @Sandleaf
    @Sandleaf 4 місяці тому +1

    Thats extremely useful

  • @Nelson-Mehlis
    @Nelson-Mehlis 4 місяці тому

    Josh you are awesome 👏

  • @ustav_o
    @ustav_o 4 місяці тому

    that is simply awesome. good job!

  • @Soraphis91
    @Soraphis91 4 місяці тому

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

  • @EraYaN
    @EraYaN 4 місяці тому

    This would be awesome as a plugin for something like Manim (animation toolkit). To add code to technical animations

  • @user-qh3nq8np5i
    @user-qh3nq8np5i 4 місяці тому

    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.

  • @user-dh9rh3js3u
    @user-dh9rh3js3u 4 місяці тому

    Just amazinggg 💥

  • @xiuhdev
    @xiuhdev 4 місяці тому

    This is awesome! I just found out you can't slide on mobile unfortunately. 😢

  • @vaisakhkm783
    @vaisakhkm783 4 місяці тому +1

    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

  • @abdulazizmohammed2998
    @abdulazizmohammed2998 10 днів тому

    Josh is genius Is problem solving mashallah

  • @ismahelo
    @ismahelo 4 місяці тому

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

  • @Marco-34235
    @Marco-34235 4 місяці тому

    YOU ARE AMAZING

  • @DarkChaosMC
    @DarkChaosMC 4 місяці тому

    You should add theme support!