Next Level Vanilla JavaScript UI Animations

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 187

  • @Frankslaboratory
    @Frankslaboratory  3 года назад +51

    Do you prefer tutorials with vanilla JavaScript like this or you want libraries? Click the LIKE please :)

    • @Xyzzzz307
      @Xyzzzz307 3 года назад +2

      Can't choose. Both seem brilliant.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@Xyzzzz307 Thank you for letting me know, I'm just asking to plan my future content

    • @UlyssesOfOmaha
      @UlyssesOfOmaha 3 года назад +8

      Vanilla all the way!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@UlyssesOfOmaha Yes! I love vanilla JS

    • @agent-33
      @agent-33 3 года назад +5

      Definitely vanilla. With vanilla JS we can understand how some libraries work.

  • @OnlineTutorialsYT
    @OnlineTutorialsYT 3 года назад +61

    Thanks bro for mentioning my channel and your work is really next level.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +18

      Hii, thank you it means a lot coming from you. I didn't think you would notice I mentioned you :D You are my inspiration, I will be sharing your channel from time to time in case there are some people who don't know you yet ❤

    • @viniciusm.m.7822
      @viniciusm.m.7822 3 года назад +2

      @Steven Hill Indeed!!!! :D

    • @jeenitprajapati3449
      @jeenitprajapati3449 3 года назад +2

      Hey Online Tutorials.

    • @rajatgupta9578
      @rajatgupta9578 3 года назад +2

      like your work... both of you.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@rajatgupta9578 Hi Rajat, thank you :)

  • @rvft
    @rvft 3 года назад +1

    You both are one of the a few RUclipsrs who don't talk bullsh, but teach really helpful things. Huge love to both of you ❤️. I have 5 go to inspiration places which are: Behance, Dribble, Online Tutorials, you and the Coding Nepal. Thank you all for sharing your knowledge with us. God bless you and the nice people like you.

  • @johnadriandodge
    @johnadriandodge 3 года назад +2

    Once again, another artistic, web masterpiece.
    This tutorial has two primary different effects, each are very artistic, one is fiery while the other is techie spacey.
    Am looking forward to sitting down on the computer and working my way through this, and incorporating both effects somewhere.
    Thanks to CSS and Javascript maturing so much, what was once only really possible in flash, is now more than possible without.
    Not that Flash should have disappeared, because it should not have.
    Thank you Jedi

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      You are very kind John, thank you. The fire effect is retro early 2000s Flash reference indeed, it's a bit easier to code these things with JavaScript, it has a lot of built in tools now that simplify things. We live in a great time to learn coding IMO. You seem to be going though a lot of tutorials, working hard on your skills, that's great to see, keep going John.

  • @JM-de2gh
    @JM-de2gh 3 года назад +1

    lol, I had predicted your next video was going to be fireworks because of the 4th of July... then I remembered, you're on the other side of the world! Thanks for the good vids Frank. I'll catch up on this one when I get back from the family trip.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Jon, I'm in UK so we are quite unaffected by 4th of July, people don't even talk about it here. I want to make fireworks effect, wish I remembered last week so I could time it well :D Enjoy your family trip, hope you're well :)

  • @sanzhar.danybayev
    @sanzhar.danybayev 3 года назад +1

    I've been front-end programming for 8 years, your are opening a whole new world for me)

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Hi Sanzar. Thank you that means a lot coming from an experienced developer like you. What tools do you usually work with

    • @sanzhar.danybayev
      @sanzhar.danybayev 3 года назад

      ​@@Frankslaboratory We are so lucky to have you! For front-end programming I use TS, Next.JS, React, SCSS. For animations framer-motion library and CSS3 keyframes properties. To be honest I was always afraid of canvas, it looked like some sort of the magic behind the scenes. With your attitude and approach I developed confidence and solid understanding of how it works. You're so authentic and unique. Usually people copy-paste content all over the internet. Your content is just at another level. And of course people usually don't explain advanced topics. You are the discovery of the year. Much respected and appreciated!

    • @sanzhar.danybayev
      @sanzhar.danybayev 3 года назад

      @@Frankslaboratory Wish you luck and all the best for the things that you do for us. May all your dreams come true!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@sanzhar.danybayev Wow, discovery of the year, you are very kind Sanzhar. I noticed many people avoid canvas, but I feel if we take it step by step it becomes much easier and manageable. It is a very powerful tool, seems like a waste not to use it. You can work with a wide array of frontend tools I see, I also want to learn TS and NextJS this year. Wish me luck :)

    • @sanzhar.danybayev
      @sanzhar.danybayev 3 года назад

      @@Frankslaboratory yeah, totally agree. Canvas is a powerful tool 🔥 I do wish you luck in learning these things! Rest assured with your knowledge base and attitude you will learn pretty quickly.

  • @johnadriandodge
    @johnadriandodge 3 года назад +1

    Splendid light saber you have! Splendid light saber you have!

  • @cryptocoinkiwi8272
    @cryptocoinkiwi8272 Год назад

    This tutorial has ignited a flame of creativity within me! I already have an idea in mind.

  • @LePhenixGD
    @LePhenixGD Год назад

    That fire effect looks so neat!

  • @zourdy697
    @zourdy697 3 года назад +3

    awesome project frank, love it mate!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Tommy! Nice to meet you, thank you for the kind feedback ❤

  • @murilosilvestre7736
    @murilosilvestre7736 3 года назад

    this channel is pure art, and a blessing for those striving to learn more, thank you again, Frank

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Murilo! Thank you, such a nice feedback I don't even deserve it, you are very kind ❤

  • @unknown-bx8my
    @unknown-bx8my 3 года назад +2

    when i need to make responsive canvas project i save x & y & width & height of each object as percent between 0 and 1 then when i need to draw them i multiply them by canvas width or height.
    i can now prevent updating x & y & width & height when the canvas resize👍

    • @unknown-bx8my
      @unknown-bx8my 3 года назад

      but this idea does not work in this project because HTML elements does not have the same structure.
      i like your projects😍😍.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Hi Abed. This is a great technique. I'm curious to use it in some project.

    • @unknown-bx8my
      @unknown-bx8my 3 года назад +2

      Glad you like it :)

    • @Xyzzzz307
      @Xyzzzz307 3 года назад +2

      ❤ Good Technique

  • @plertz6210
    @plertz6210 3 года назад

    YEAH, the video we have been waiting for is here!!!!

  • @Terciel-Code
    @Terciel-Code 3 года назад +2

    I'm always waiting for your great tutorials. I learned so much. Thank youu

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Really? Thank try thats nice to hear :)

    • @Terciel-Code
      @Terciel-Code 3 года назад

      @@Frankslaboratory creating a game without using a game engine is so awesome. Thanks a lot!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@Terciel-Code Yes, that's my favourite way to build a game, because I'm learning about JavaScript and webdev at the same time :D

  • @rishuraj6760
    @rishuraj6760 3 года назад +2

    Great creation 👌🚩🚩🚩

  • @BitCloud047
    @BitCloud047 3 года назад +1

    Amazing video as always my friend!!

  • @aravindvv2276
    @aravindvv2276 3 года назад +2

    Love this one 😍😍 and yea you both are my primary learning channels, I always look for videos from you guys

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      So much of my inspiration came from Online tutorials, I don't know how he gets so many creative ideas all the time. Thank you for your support Aravind ❤

    • @unknown-bx8my
      @unknown-bx8my 3 года назад +1

      me too.

    • @aravindvv2276
      @aravindvv2276 3 года назад

      @@Frankslaboratory absolutely! and the frequency at which new tutorials are made, its just unbelievable

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@aravindvv2276 He is a tutorial machine! :D

  • @UlyssesOfOmaha
    @UlyssesOfOmaha 3 года назад +1

    I just discovered your channel a couple of days ago! Thank you for sharing your knowledge with us!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Phil! Nice to meet you. Good to have you here. Are you self taught developer as well?

    • @UlyssesOfOmaha
      @UlyssesOfOmaha 3 года назад

      @@Frankslaboratory I am self teaching, most definitely, with the help of generous and insightful folks like yourself. I decided it was time for a career change in February. To that end, I resigned from my position at my former company with the goal of learning coding over the course of 24 months. Had I known it was this awesome, I would have done this 20 years ago.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@UlyssesOfOmaha Great choice Phil, coding is the best career, depending what field you are coming from you will have better work life balance most likely. 24 months is a plenty of time to master all of web dev, hope you manage to keep yourself motivated, let me know how it goes from time to time

    • @UlyssesOfOmaha
      @UlyssesOfOmaha 3 года назад

      @@Frankslaboratory Most definitely! Thanks again for sharing your wealth of knowledge with us! If you're ever in Omaha, all of the coffee is on me!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Never been to US but one day I will visit. Thanks Phil

  • @sandsriggs
    @sandsriggs Год назад

    I am a SUPER Novice on web development but followed this tutorial to decide if I could learn along like this! OH BOY did I have typos and make a lot of mistake in following along, but it was easy to go back and correct. I was able to complete the lesson and the bonus section to change up the animations. Thank you for this!
    Question. do your Udemy Classes have more content in the master classes for you development (games) or is it the same as in the video playlists in RUclips here?

  • @RomanKnav
    @RomanKnav 3 года назад

    Awesome tutorial as always. And wow, nearly 3k more subs since I last seen one of your videos about a month ago. Way to go Frank 😎

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Roman. Thank you. Yeah it's been a good month ha

  • @Dibiler
    @Dibiler 3 года назад +2

    Hi Frank, love the tutorial as always. Just one point. I'm not sure if this is better or worse performance. Instead of going through the array particle and doing "splice" on it for every small particle. isn't it better to filter it and save the updated array as:
    particlesArray = particlesArray.filter(item => item.size >1);

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Hi, great point, I really like this solution and I will use it in my next video, thank you for suggestion, I like these types of comments

  • @iconicworld8880
    @iconicworld8880 3 года назад +1

    You are the ideal to me
    I am glad finding this channel,
    Thank you

  • @梁永霖-o6u
    @梁永霖-o6u 3 года назад +1

    THIS ID DOPE BRO!!!

  • @RamrocksGaming
    @RamrocksGaming 3 года назад +1

    U both are great 👍 to share ur idea and learning new things thanks you

  • @OneAndOnlyMe
    @OneAndOnlyMe 3 года назад

    Great tutorial. Love vanilla JS.

  • @evaristocuesta
    @evaristocuesta 3 года назад +1

    Great video!!

  • @HoaNguyen-rp9kb
    @HoaNguyen-rp9kb 3 года назад +1

    hi Franks, i have a question!, how can i show what i'm doing with code, your right screen??

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Hòa! Nice to meet you :) I use VS code editor with extension plugin called Live server. It automatically reloads browser window when I save any of my project files (I use keyboard shortcut CTRL + S after every line of code). The part on the right is just my browser window cropped by screen recording software.

  • @christopherdeal4794
    @christopherdeal4794 3 года назад

    Frank, quick question, I'm having trouble with the resize function. I split it into two. I had an alert set/console log and I can tell js is falling into this function but seems to revert back to the width/height set at top of this script. Not sure why
    SOLVED: One errant semicolon....:P
    Chrome Browser
    window.addEventListener('resize', resize);
    function resize() {
    console.log(window.innerWidth, window.innerHeight);
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    console.log(canvas.width, canvas.height);
    measureButtons();
    }

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Chris, glad you managed to find the issue, debugging is a headache but it gets easier the more we code

  • @SFN-YT
    @SFN-YT 3 года назад +2

    Love your videos! Great content, well delivered!! Thank you :) Prefer vanilla tuts - libraries are good, but dubious about bloat. Likewise, wondering if there are any adverse effects or 'gotchas' when using some of the cool stuff you show us, especially if using on a website/mobile, rather than in a game for instance. Would be good to get your thoughts...

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi, thank you for a nice feedback. To answer your question, there are always things to consider when using animations on your site, you don't want to overdo it. For mobile sometimes I completely disable canvas effects, especially for small screens, content and readability always comes first, but nice visuals are also important in some scenarios. There is more to say on this, I might make a special video on this topic, thank you for asking.

    • @SFN-YT
      @SFN-YT 3 года назад

      ​@@Frankslaboratory Thanks for your response. You're right, a little goes a long way - it's a balance between pretty and practical. Fancy stuff is great, but no one really talks about the practicalities and how best to manage them IRL. A video would be awesome!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@SFN-YT You are right. I feel like there are many areas in web animation that remain unexplored, both new techniques and good practices are not talked about that much for some reason. Not sure why more people don't make content on it. There is so much that can be done on the web these days

    • @SFN-YT
      @SFN-YT 3 года назад

      ​@@Frankslaboratory Good practices and optimising UX aren't whizzy, fun or eye catching, but necessary for good web design/dev. A sprinkle of magic here and there can really help a site standout, but we have to consider the 'cost'. Which is difficult to know, especially for us beginners, so any guidance would be very great!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@SFN-YT I agree, for my lessons I usually go for specific effect so I can show off particular techniques, like in this video I wanted to use getBoudingClientRectangle. Optimisations and best practices are the final step in mastering webdev, it takes a while to write really good most optimal code, I'm still learning how to do it.

  • @carefree_ladka
    @carefree_ladka 3 года назад

    Just amazing. Thank you for making such videos 😊

  • @khaled4212
    @khaled4212 3 года назад +1

    great job man :D

  • @jeenitprajapati3449
    @jeenitprajapati3449 3 года назад +1

    Amazing Idea.

  • @ibrahemmagdy8493
    @ibrahemmagdy8493 3 года назад

    Great video. you are amazing and creative. thank you bro 😊.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Really? Thank you Ibrahem, that's vey kind of you to say

  • @seanverom74719
    @seanverom74719 3 года назад +2

    Coooool!!!!

  • @drkmgoswami3042
    @drkmgoswami3042 3 года назад +1

    Hi I am making platformer game in html canvas but how can I in make camera follow please tell how to make

    • @drkmgoswami3042
      @drkmgoswami3042 3 года назад

      Please tell

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi, I did it in my flappy bird tutorial, basically camera doesnt exist and you just move everything else around to make it look like camera is moving. I will make more videos and games using this technique soon

  • @sancechannel6308
    @sancechannel6308 3 года назад +1

    Amazing bro

  • @iconicworld8880
    @iconicworld8880 3 года назад +1

    And i also watch online tutorials videos
    Man this channels are my favourite s

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      I love his channel, so many great webdev ideas on there

  • @Xyzzzz307
    @Xyzzzz307 3 года назад +2

    Cool!
    First 😂😂
    You published 14 seconds ago and I commented 19 seconds ago.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi, you are fast, how do you do it :D

    • @Xyzzzz307
      @Xyzzzz307 3 года назад

      @@Frankslaboratory
      Sir It feels Programming has got my fingers to compete speed of sound now. Having a pretty good score in the Magic Tiles game.
      Can you tell us how to make it with some 3d look Sir?

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@Xyzzzz307 Magic tiles game is hard, you must be fast :D You have been coding a lot I think, well done! There are two ways to code this game in 3D, easy way with CSS transforms, advanced way with WebGL. And something in the middle would be to use Three.js library.

    • @Xyzzzz307
      @Xyzzzz307 3 года назад

      @@Frankslaboratory
      I think we have 3d for vanilla javascript also right Sir?
      I believe it is possible right?

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@Xyzzzz307 3D can be done with vanilla JS yes, but at certain point calculating z axis and vectors with 3D perspective becomes very math intense without a 3D library

  • @vladzagrebelnyi
    @vladzagrebelnyi 3 года назад +1

    You are best
    Thank you :)

  • @pauljohn3898
    @pauljohn3898 3 года назад +1

    amazing

  • @mukiibipeter07
    @mukiibipeter07 2 года назад

    Hi Frank. I would like to make a request.
    Can you make a tutorial on how to create an interface with canvas only?
    Clickable buttons, a form element ...
    I've been looking everywhere for this but nothing.

  • @horacioluna7046
    @horacioluna7046 3 года назад

    hello, what do you use to edit your code?

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Horacio, I use VS code editor with Live server plugin to reload my browser automatically

    • @horacioluna7046
      @horacioluna7046 3 года назад

      @@Frankslaboratory Thank you very much!

  • @agent-33
    @agent-33 3 года назад +1

    🔥🔥🔥

  • @nathanbrews9951
    @nathanbrews9951 2 года назад

    I prefer this VJS style its seems pure

  • @definty
    @definty 3 года назад +1

    Cool tutorials thanks Frank :) Are there any good tutorials to help us learn the Math of making cool animations? Take it easy dude.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi, do you know Coding train youtube channel? He is the best for math of animation. He uses P5.js library or Processing, but it can be easily converted to vanilla JS if that's your preference. Other than that I don't know of any big knowledge library, I learn stuff from sources scattered over the internet. We need more resources on this.

    • @definty
      @definty 3 года назад

      @@Frankslaboratory Thanks for the reply :). I will check out P5 tomorrow. I have spent most my evening trying to make a nice Sine Wave animation since I'm learning the requestAnimationFrame() function. I think I got the hang of it but making a nice smooth Sine wave was hard and ultimately I realized several hours later that I would probably need some sort of Interpolation probably Cubic Interpolation.
      I found that D3.js has a few methods for Interpolation so hopefully I can get a nice smooth Sine wave soon and learn D3.js at the same time.
      Hopefully I will be a web dev soon as I already know Python but Node.js scares me! I really like your falling white pixel animation in the corner of your video.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      @@definty in coding there are usually multiple ways to do the same thing. If you want to animate sine wave movement it's very easy with Math.sin() method, I use it to animate enemies in my games to make them fly up and down following a sine wave path. If you actually want to draw that sine wave then it becomes a bit more complex, but maybe not, would have to sit down and thing about it for a while. There is a lot to learn in webdev, nobody knows everything, but Google always helps. I also want to learn Python, maybe next year. Let me know how your studies are going from time to time, I wonder what projects you end up building eventually

    • @definty
      @definty 3 года назад

      @@Frankslaboratory I will do bud, One day I might start a RUclips channel for FullStack dev I would happily help you if you ever get stuck on something in Python. After watching a few React tutorials today I think I might try and make a basic music making app or at least do some research.
      WebASM looks interesting and with music production plugins (Which create and can manipulate sound mostly made in JUCE C++ framework) I found a C++/JUCE -> WASM converter on Github.
      It would be fun to learn the Audio API for JS and see how far I can stretch it and see if I can make a Digital Audio Workstation inside the browser.
      This is one of my motivations for learning React and Animation in JS. But I have hundreds of Ideas and only 24 hours in the day!

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      @@definty We have the same problem, too many ideas and not enough time :D Starting a RUclips is very time consuming as I found out myself, so make sure you choose topic you like long term, it's a marathon. I made 81 videos and they say the first 100 videos don't count, it's just a learning process (video editing, speaking on camera, audio setup, lights, engaging with people, explaining and entertaining etc.., there's a lot) and I'm just a beginner after 2 years. Some of the technologies you mention are new to me, I have made a video on Audio API with vanilla JS, there is A LOT in there and not many resources online, looking forward to experimenting with it more soon :D

  • @ЕгорЕгорович-д2т

    Top!

  • @mdjahidulislam9205
    @mdjahidulislam9205 3 года назад +1

    Nice

  • @Jerry-e7p
    @Jerry-e7p 2 года назад

    복습합니다!!

  • @drkmgoswami3042
    @drkmgoswami3042 3 года назад +1

    How to add physics in html canvas

    • @mullermuller6000
      @mullermuller6000 3 года назад

      什么意思

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi, it depends what kind of physics you are looking for, I did little bit of wind here which could be considered simple physics, then you can do bouncing and gravity and then next level would be collision detection and resolving collisions to make elements bounce off in the right direction based on collision angle, that way you can create advanced physics engines and games like angry birds

  • @nicklansbury3166
    @nicklansbury3166 3 года назад +3

    It's Friday. And therefore it's time for Franks laboratory. Good times. Oh, and to answer your question, VANILLA all the way. Have a great weekend.

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Nick, I'm glad we agree, I love vanilla JS because I want to know how things work :) Happy Friday!! :)

  • @mdhossen7082
    @mdhossen7082 2 года назад

    Wow

  • @ArbajAnsari-ku3hg
    @ArbajAnsari-ku3hg 3 года назад +1

    pllease make on video "HOw to be master in JS like you" .....PLease!!!!i'm now learning basic fundamentals from udemy JOnas Schemntan's course..

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      I did Jonas' CSS course as well as his JavaScript course, he is a great teacher and these courses give really good complete picture. It will be much easier for you to jump into project tutorials when you complete it, nice. I will make some videos on this topic as well when I have time, yes, thank you for suggesting

  • @sonnyl2915
    @sonnyl2915 3 года назад +1

    Wow i just sat there and watched all the way through. I'm a noob js

    • @Frankslaboratory
      @Frankslaboratory  3 года назад +1

      Hi Sonny, I'm glad you enjoyed it, you seem to have strong interest in JavaScript which is the most important thing, Take it step by step and eventually it will become easy, it takes time for all of us

  • @abdulwahabraheemi
    @abdulwahabraheemi 3 года назад

    😎💪❤️

  • @faizulla5838
    @faizulla5838 3 года назад

    where ic code????

  • @nathanbrews9951
    @nathanbrews9951 2 года назад

    Thanks again FL unfortunately
    buttonElements.forEach((button) => {
    Uncaught TypeError: buttonElements.forEach is not a function
    at script.js:37:16

    • @Frankslaboratory
      @Frankslaboratory  2 года назад +1

      Its telling you where the problem is. Console log your buttonElements and inspect the objects. Find which value is undefined and make sure your variables point to the right values

  • @arnavraj9094
    @arnavraj9094 3 года назад +1

    Who came from online tutorials post

    • @Frankslaboratory
      @Frankslaboratory  3 года назад

      Hi Arnav, did he make a post about me? Didn't realise.

  • @ricardoestrella95
    @ricardoestrella95 3 года назад

    Be my sensei