Intro to Anime.js - The JavaScript Animation Engine

[@TraversyMedia]

I just want to mention I know not everyone will be interested in everything I do. It is impossible to please everyone. But I appreciate the respect and the fact that many of you still watch my videos even if it is not something you are particularity interested in. I like to find and study new technologies and libraries, etc and share with you guys. Some take it, some leave it but I appreciate you guys watching

[@brahimbelkhiria2157]

you are the best on the net right now !

[@migom6]

hapi.js auth or more depth in ACL loopback pls :'(

[@tomvito]

Hello Brad. This is one of the reasons why many of us really enjoy watching your awesome and interesting videos. Including me. I learned a lot from you. You are a great teacher and thank you for doing this for us :) Best greetings from Germany.

[@Grewal0007]

yeah its impossible to teach everything to everyone........We love all your videos on this youtube channel. Keep doing great work. Hats Off.

[@qeebod]

Traversy Media ...keep doing these sort of videos sir. You're educating lot of people, including me. TQ from Malaysia.

[@AyJay123]

thank you for a legitimate beginner video that thoroughly explains the steps you take. A lot of other videos people speed through their code and don't show the entire mark up. Deliberate presentation is much appreciated!

[@MrSuija]

You're the best, I've recently got into programming and despite my passion, sometimes I feel just too overwhelmed by the huge amount of information available. When it happens, what I have to do is just play one of your videos. Thanks!

[@David-hy3yb]

Brad, thanks so much for putting out this free video. I am a Junior dev trying to compete in the tech capital for a job. I'm working on my portfolio during this quarantine and I needed that extra bit, so I looked at animations. Anime was really confusing even after watching some of the other videos on KZbin. This video helped tremendously and the fact you do it for free is awesome! Thanks for doing what you do. I've already purchased 3 of your courses on Udemy and love them. Keep it up.

[@TheRevitQueen]

really clear tutoring, the way you teach nothing remains unclear. Very happy to have found your channel, thank you @traversymedia!

[@Fjellfluff]

Now these kind of simple-to-follow-videos just makes life easier. Much appreciated from a javascript newbie!

[@amanpreet-dev]

Thanks Brad for such a wonderful tutorials. Just wanted to confirm that we can use this library with other front end framework such as angular , react etc. without any major changes. Thanks again, you are doing an excellent job for our community.:)

[@raymondmichael4987]

You are one among the honest human I know; keep up the good work brother; Um waiting for your vanilla Javascript tuts. Don't mind those few dislikes (if any)

[@busyrand]

Wow! I really loved this. So much more straightforward than I expected things to be. Thanks for the demo Brad. You're a Life Saver.

[@walkaboutneil]

So what did I pick up today? VSCode, Live Server, Emmit, CDNs, just cause I wanted to learn nodeJS this Wednesday. Ran into animeJS yesterday, interesting, and found your tutorial today, Friday. Have a running anime by the end of the day... well, its 1am. Kinda got carried away following your video. Great video to get me started. Thanks!

[@itaco8066]

I'm I a path of being web developer and every topic that I have learned you have covered. I'll be petron for sure men. Thank you very much

[@glennesavage7443]

Nicely done, brother. Appreciate you sharing your knowledge and the work you put in for your lessons.

[@gigabek]

My favourite anime is Corey in the house.

[@streetpotato5574]

Lordicus oh cool, mine is Hannah Montana.

[@Believer1995ofGod]

Thanks! Just learning the basics and I found out about anime.js, googled a tut and yours came up first. It was a great tut thanks for everything.

[@rotrose7531]

Every time I watch your vedeos, they can bring me something new. Thank you for these wonderful tutorials.

[@haydenfarnsworth2131]

Another great video Brad. Thanks for all your hard work. Best web dev tutorials on the internet.

[@kuez8708]

Thank you for creating all these videos. Your channel has really helped me with my programming endeavors.

[@Santoshumnekar]

All your concept of web design and development Very simple and easy for beginners ..Best job

[@flaex_]

I'm planning to build an animation focused, Gatsby and Strapi app. As far as you explained on the video, Anime seems like the right library to use in this scenario. Great video

[@kamaboko1]

The volume of tuts you produce is impressive. Keep up the great work, I'm sure it isn't easy though.

[@BambanzaJ2]

Hey brad. Before anything, I just wanna thank you for uploading these awesome video tutorials. You don't know how much of an impact your channel has had on my career options. I never thought I would consider a career in web design and development. Frankly speaking, I used to think it was a field devoid of any excitement...until I stumbled on your channel three weeks ago. Your way of teaching has inspired much confidence in me so much that not long ago, I listed web design and development as 2nd among my pool of personal skills, right after software development, on some application form. Anyway, That's how much you've inspired me. Now, down to business: I was wondering if you could do a series on php-mysql. I would really appreciate it. To show my appreciation, soon as I get my hands on real money, I'm sending some your way.

[@MTandi]

So, you like anime?

[@blasttrash]

asking real questions. :)

[@its.arjun.s]

I like 6 digit numbers

[@dorsolomon7251]

At first I thought that it will be like animate.css, but actually it was really helpful, great job man!

[@neoskribe8986]

This video is really inspiring, there's so much you can do with this.

[@kaysiz-zw]

hardly an hour and so many comments :)...the anticipation for your videos is more than for GOT

[@fatemerahmanabadi5685]

Thanks brad :) like always the best tutorial available on the topic :)

[@matthenley6704]

Man, thank you for these videos! I get so much from them!

[@riddhisapariya9105]

Very nice explanation of this animation tutorial and it is really helpful for beginners to learn animation from the scratch.....

[@demirelkd]

From Russia with love. Tnks for job. U re amazing teacher /

[@DAISY-qm6ib]

Big fan of your channel! Thank you so much for the effort!

[@matteobarbieri2989]

Great Brad, I can't only understand why having a delay of 1000 if we have a duration of 500+800= 1300. Great job anyway...keep going...thank you

[@antreoula]

Delay of 1000 should mean that = 1st square needs 500 to go down, but comes up a bit slower (800). When on its way up meets the starting position should be at 1000. So that's the moment that next square will start going down. I hope i got it right :P

[@wgalloPT]

This is so awesome!!!! an you do an awesome job at demonstrating!!! A million thanks!!!

[@julianaferry]

Thank you so much for your videos. I have learned so much with them!:)

[@dominatori2402]

Thanks man you really helped me with my school project.

[@hirephpdevelopers3840]

This tutorial is really informative and i have learned a lot from this video, thank you.

[@zuheyrtahir4409]

I love learning new things. Thank you in facilitating me. :)

[@BrunoSilva-mx1ut]

thanks from Brazil. Awesome video

[@sarangs8441]

Awesome video.Thank for providing such awesome content.

[@Limpuls]

This guy is unstoppable..

[@Amitkumar-zp3wb]

Great job man..Really thanks for the video.

[@bintoygaming]

Thank You Sir Brad! GOD BLESS YOU!

[@hpliq362]

Brad, you're a saint

[@technicalshohel]

sir your channel is great I am your big fan

[@azfarhameedkhan7117]

very nice tutorial, really helped me here. thank you very much sir.

[@acedigibits9079]

HI traversy, i saw u typing out full css and wanted to let u know since u are using emmet, u can use it in css too. instead of typing background u can use bg + tab . Have been following you since your initial android tutorials 4 years ago.

[@incinerator7146]

thank you so much man ! :) helped me a lot

[@pahuana]

Hey man, as always, your tutorials are awesome! Here is my first tutorial request: Can you talk about Progressive web apps and what's the best technology to make them? Thanks a lot!

[@ellsonmds5310]

there is this good extension called 'save on blur' for vscode. It saves us of saving. It works great with live server.

[@samtrafton8445]

Hello! How would the implementation be different if I wanted to use the anime.js library on a project with tailwindcss? I've followed this tutorial for linking the script but it doesn't appear to be affecting my elements.

[@adelinrapcore]

Thx for the tut. I am getting an error, module is not defined, what could it be?

[@eristoff3782]

Thank you so much for these videos!

[@baybay1234]

Thank you for the awesome tutorial!

[@brianadams2862]

Damn officially a patron...

[@chriswilliams1782]

After an Anime object has been created, then say translated or resized, how do you determine the new position or size. I've tried to use $('#id').width() but that doesn't return a width.

[@santhoshdasari9558]

Great Introductory tutorial. Really interesting. Also, please do the graphql frontend tutorial series. Thank You.

[@أحمدالنجار-و3ي]

حفظ الترجمة Thank you, you make it so easy

[@MohamedZalahi]

Hi brad, i'm always expecting your tutorial everyday, thank you for the best videos, and please can you make tutorial about responsive svg images or logos.

[@online.development]

Hello From SUDAN .. Keep On Bro.

[@webmarketing1252]

Great tutorial!! I just discover this animation library, it´s awesome! I´m coming from GSAP, excellent library too, but maybe i´m switching to these one, it´s much lighter. Thanks again!

[@23kamalg]

Awesome tutorial bro. :)

[@jameskobe1716]

How do you add an extra delay to the first iteration of the loop ? Great video anyway, ty

[@fahadalbattashi3611]

VERY USEFUL VIDEO ,, THANK YOU SO MUCH

[@danielandreasen2293]

I have a question and a comment: Why did you leave atom!? :) Do you use this editor for web only, or for general purpose programming (e.g. Python too?) So, I was reminded of github's 404 page, where the background is animated when moving the mouse around. I thought this is something you might be interested in either learning or teaching. I know I would love to learn it :) Great video(s) Brad, thank you so much for sharing these libraries

[@TraversyMedia]

I love Atom but it was giving me performance issues. That is the one big complaint I have with it.

[@danielandreasen2293]

I hear you, and I don't even have a powerful computer.

[@AlisherMakhmudov]

nice tutorial Brad, and if you don't mind could you a little compare this anime library with greensock library?

[@ivanlorenzo04]

Do you have a JSAV library tutorial Sir? Please do one if not

[@brahimbelkhiria2157]

tutoriels on payments systems plz!!!!!

[@filipevalentegomes2383]

Talking about animation just noticed that there aren't any good tutorials on building a smooth scrolling for react.js would be good to see best practice to build this.

[@filipevalentegomes2383]

thanks thats when you type too fast lol

[@nullx2368]

I have an unrelated question, Why you never made a video on .Net core 2.0 it seems to be pretty powerful and stable. I really want to build something with it but there is lack of information about it. Is it possible that you could make a video on it? You seem to be a very open person about languages and cover most of them thats why im surprised you barley ever do .net stuff

[@dragos199993]

Brad how did you commented multiple lines at once when you selected all the anime functions?

[@GmoneyMozart]

Dragos Nedelcu highlight what you want to comment out and hold control and press /

[@TraversyMedia]

ctrl + /

[@nabeeltahir6013]

Can you please make a videos on delivery system using PHP or any framework of PHP?

[@muhammadsaim5409]

hi Brad please make a scratch course on symfony 3 just like you made on codeigniter please please make a series on symfony 3 BTW you are awesome you tutorial is awesome i love it :*

[@wobsoriano]

Brad, awesome just awesome and awesome content. You can maybe try machine learning next time? Maybe Cloud Vision API by google

[@annazmussakib4796]

love you man....you are great😎😍

[@Senshiii99]

Can you do another video on anime js covering the svg part. Please...?

[@gallowing]

How would you reset this to the start position with out the animation playing again?

[@gallowing]

I figured it out, I had to reload the div and the script with jquery.

[@reksmeyok1957]

Thank you for your approval.

[@TraversyMedia]

Not sure what you mean by "approval", but you're welcome :)

[@reksmeyok1957]

I learned your codes and change most of them to fit my website. Thanks.

[@darwazi1331]

you did it excellent

[@hakunamata_tuh]

can we make simple game using this libraries?

[@ClaudioSteinJuniorprof]

Hello, I do not understand the arguments of this function: delay: function(el, i, l){ return i * 1000}, autoplay:false, loop:true }) Where were they passed? Congratulations on the tutorial!

[@SmartWizzard]

It’s simple and easy to understand, let me explain it to u. Delay is a function that takes 3 parameters, el: targeElement (.box), i: no of element in loop and l: the total targeted elements this will grab all boxes.

[@daniellajohansson]

If we remove the code: *loop: true* and press the play button we can only run it once. Next time I press play nothing happens. How could that be fixed? Anyone know?

[@daniellajohansson]

Ok so I answer to myself. I came up with a way. Don't know if it is a good way but it works. document.querySelector('#boxes .play').onclick = function(){ playPause.play(); playPause.restart(); } It makes it start from the beginning if you hit play -> pause -> play. If you count that as a bug?

[@arushagarwal6156]

I am having some weird indentation error and hence its not working for me....can anyone help me out?

[@burjanadze3988]

This is amazing and very funny

[@luisquinones8362]

Hey brad , can you make a tutorial on nodemailer , like you did with the php form.

[@TraversyMedia]

Doing it right now boss :) If all goes well it will be up soon

[@luisquinones8362]

thank you so much

[@0xOrganix]

Thank you very useful video.

[@mathiasmccoy1068]

Sir is there any way that i can ask something private?

[@rohankumarsahu933]

Can you make tutorial on svg, shape divider or animation

[@saydullaevfoziljon4192]

best vedio for programmer )

[@cyrilmacauley9383]

i don't understand the parameters in the delay function. :( anyone to explain please.

[@andix1412]

Great video, thank you! But do you may know how I can integrate anime.js in react? That would help me a lot! :)

[@benjisea]

Wtf is that function(el, i, l) mean? Where does he get these parameter names?

[@OnSenseAndReference]

Great job, man. You're doing everything well.

[@venkatnanisethi7564]

Good to learn for beginners. .

[@sergiokagiema9658]

Can you make a video about Greensock Animation Platform?

[@kingwindie]

I love videos like this

[@wireinet]

Thank you! Awesome!

[@dhirajramnani5867]

Hello sir. Can you please put videos of all the java script libraries like particles.js and anime.js and other cool libraries

[@gomo8651]

Does this means, its legit to request some demo on Phazer or similar JS engines :D

[@tabrezrahi]

hi Traversy can you make a crash course or playlist on anime and tweenlite js libraries please they are good.

[@NicolaDiMarco]

can I use it with React?

[@randawg8712]

Awesome!! 👌