• Friday , 29 May 2020

Animate Your Font Awesome Icons With JavaScript

Code Canyon



In this video we will create some animated font-awesome effects using vanilla JavaScript setTimeout and setInterval function. This is a simple project but I thought a cool one to share. I am really liking creating things with plain JS lately.

CODE: Code for this video
http://www.traversymedia.com/downloads/animicons.zip

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

Original source

3d Ocean

Related Posts

37 Comments

  1. LYNE AKBI
    May 9, 2019 at 17:41

    Thanks for this tutorial. Amazing!

  2. Sunny Chao
    May 9, 2019 at 17:41

    why do you have to include "&#x"? is this a font awesome thing?

  3. Geof Mira
    May 9, 2019 at 17:41

    Really love it, thanks !

  4. Kushal Gopee
    May 9, 2019 at 17:41

    I really hope you read this…I'm working as a digital marketer and I must say your videos that relate to digital marketing especially this one and the mailchimp one were amazing please carry on with these videos I promise you when day when I'm rich I will give you money cause you are awesome

  5. Myles Gmail
    May 9, 2019 at 17:41

    Good video!!!

  6. Rahul K
    May 9, 2019 at 17:41

    thumps up

  7. Antony Moss
    May 9, 2019 at 17:41

    The best voice | teacher EVER!

  8. موسي احمد
    May 9, 2019 at 17:41

    ♥very awsome ..thanks

  9. welkflingers
    May 9, 2019 at 17:41

    Spelt brake wrong. Its Break. Clean up ya code. Just joking. You're an awesome teacher.

  10. Songtao
    May 9, 2019 at 17:41

    Awesome and fun vid haha!

  11. spicytuna08
    May 9, 2019 at 17:41

    this was the most fun tutorial i ever saw. i cannot believe that programming can be fun.

  12. Zubair Hashmi VLOGS
    May 9, 2019 at 17:41

    Brad can we console.log the icon via using hexacode??

  13. Who's Asking
    May 9, 2019 at 17:41

    Suggestion: You can improve the code where you duplicate set interval for battery charging to this loop

    // set dynamic innerHTML value for battery. Seconds for setTimeout are a generated series of [1000,2000,3000,4000]
    for (let index = 3; index >= 0; index–) {
    setTimeout(() => {
    battery.innerHTML = "&#xf24" + index + ";";
    }, (4 – index) * 1000);
    }

  14. Roro Rima
    May 9, 2019 at 17:41

    U r awesome

  15. Armin B
    May 9, 2019 at 17:41

    Can anyone please explain why at minute 8:00 in setInterval function, brakeChain function is being called without the '( )'. I tried to call it like I normally call functions: brakeChain() and it doesn-t work

  16. Lucas Sosa
    May 9, 2019 at 17:41

    Thanks for the great videos, Brad!

  17. Iqbal Syed
    May 9, 2019 at 17:41

    This is great. If I ask for your expert opinion, what would you consider more for a simple animation like broken chain or say for example an animated bouncing arrow, would you prefer a javascript animation like this or CSS3 based transform animation? How should we see it from a viewer's/visitor's perspective as far as cross browser compatibility or JS/CSS3 support is concerned? I have watched dozens of your tutorials and always find them very useful. Today, I have also susbcribed to your channel and I feel so glad for doing it. Cheers!

  18. Ode To Awesomeness
    May 9, 2019 at 17:41

    Awesome thanks 😍

  19. Stanced Polestar*
    May 9, 2019 at 17:41

    adds some fun interactivity to your projects! awesome mini-tutorial!

  20. Saud Qureshi
    May 9, 2019 at 17:41

    to do the same via fa-link/fa-chain-broken class instead of unicodes

    let chain = document.querySelector('#chain');
    chain.classList.remove('fa-chain-broken');
    chain.classList.add('fa-link');

    setTimeout(function(){
    chain.classList.remove('fa-link');
    chain.classList.add('fa-chain-broken');
    }, 1000);

  21. Johan Cleve
    May 9, 2019 at 17:41

    Very nice tutorial. I used it to make a 'site coming soon' page on codepen https://codepen.io/JohannesCleve/pen/VQMEoB/

  22. Rinat Valiullov
    May 9, 2019 at 17:41

    Cool! Thank you, man.

  23. Daniel K
    May 9, 2019 at 17:41

    Another awesome video! Thanks!

  24. Alexander
    May 9, 2019 at 17:41

    Hey Brad, i found this website with some of animations of icons http://fontawesome.io/examples/#

  25. Osher Ezra
    May 9, 2019 at 17:41

    @Traversy Media Thanks for this great channel, keep it up. how can you make a fontawesome animate after you click. is it easier with the fontawesome 5 cheers,

  26. אדם פרי
    May 9, 2019 at 17:41

    This probably won't work for FontAwesome 5

  27. حسين sh
    May 9, 2019 at 17:41

    Thank you, but why not doing it with array ?

  28. Tapio Pelkonen
    May 9, 2019 at 17:41

    Nice tutorial!

    I recommend to use DRY (Don’t Repeat Yourself) code: with battery you could’ve used a list of unicode strings and a for loop.

  29. webcelt
    May 9, 2019 at 17:41

    Is there a way to stop an animation after a set number of times rather than go on indefinitely?

  30. Stewart Wilson
    May 9, 2019 at 17:41

    great stuff. code every day check learn something new every day check. thanks

  31. Walid Noori
    May 9, 2019 at 17:41

    Awesome 🙂 keep it up man

  32. Trinh Tung Anh
    May 9, 2019 at 17:41

    Hey check out this lastest font Awesome 5 https://groupbuydesign.pro/downloads/2-5-font-awesome-5-pro/

  33. Tsigie Kumssa
    May 9, 2019 at 17:41

    Great animation. Thanks!

  34. Braden Best
    May 9, 2019 at 17:41

    I know this is just a tutorial, but still, you should never encourage repetitive code with lots of hard-coded values.

    Take chargeBattery, for example

    function chargeBattery(){
    let battery = document.getElementById("battery");
    battery.innerHTML = "";
    setTimeout(function(){
    battery.innerHTML = "&#xf243";
    }, 1000);
    setTimeout(function(){
    battery.innerHTML = "&#xf242";
    }, 2000);
    setTimeout(function(){
    battery.innerHTML = "&#xf241";
    }, 3000);
    setTimeout(function(){
    battery.innerHTML = "&#xf240";
    }, 4000);
    }

    Would be better-written as:

    function chargeBattery(){
    let battery = document.getElementById("battery");
    let charval = 0xf244;
    let interval = null;

    interval = setInterval(function(){
    battery.innerHTML = "&#x" + charval.toString(16);

    if(–charval < 0xf240)
    clearInterval(interval);
    }, 1000);
    }

    Alternatively, you could store the values in an array, ["&#xf244", …], and step through using an iterator one scope higher than the callback.

    Another improvement to be made would be to get rid of the IDs altogether and use querySelector + classes (e.g. document.querySelector(".battery")). Classes are better than IDs for various reasons, but the two biggest reasons are:

    1. IDs are clunky. The page will automatically create global variables referring to the element if the ID happens to also be a valid name token. This is an unreliable and stupid feature because it pollutes the global namespace unless you defensively name the ID in such a way to prevent that (notice how every ID in a YouTube page has at least one hyphen, for instance). This will result in bugs, if, say, you forgot to declare a variable, or maybe misspelled something.

    function f(sum, amount){
    return sum / amout;
    }
    // Where there exists a <p id="amout">

    Rather than throw an error about amout being undeclared, the function will work without emitting any errors, returning NaN. Further, because JavaScript is a very "do not fail" language, this NaN will continue to poison other number values downstream until something breaks, meaning you'll have a difficult-to-trace bug on your hands, and you'll only notice it later on, after that function has long since escaped your attention.

    2. classes can be stacked. IDs can't. Meaning ".animal.mammal" is a valid CSS selector. In HTML, you just separate the class names with spaces, e.g. <p class="animal mammal">. The element can be found with .animal, .mammal, or .animal.mammal. Meaning you can safely add the class without interfering with any existing library mechanisms that might use classes.

  35. Surin Farmwest
    May 9, 2019 at 17:41

    Brad,

    Friday 21:00, tough week, watched this and felt at peace. Time for a cup of tea, shower and bed, thank you! I will try to play with this tomorrow if they don't shut the village electricity off again.

    West

  36. Moussa Ibrahem
    May 9, 2019 at 17:41

    nice tutorial keep going bro

  37. boo yah
    May 9, 2019 at 17:41

    @Traversy Media – Brad, You mention "needing" Emmet to auto-insert chunks of code, but it looks like you're using Atom, if so, you really don't need Emmet, you can use Atom's built-in snippets[1]. In fact, most editors have snippet support these days[2]. Most of these have built in snippets, packages of snippets (e.g. "React" snippets), and allow users to create entirely custom snippets.

    Pawel Grzybek even built a tool making it even easier to create your own, custom snippets – https://pawelgrzybek.com/i-built-a-thing-snippet-generator-for-vs-code-sublime-text-and-atom/

    [1] http://flight-manual.atom.io/using-atom/sections/snippets/
    [2] VS Code – https://code.visualstudio.com/docs/editor/userdefinedsnippets
    Sublime – http://sublimetext.info/docs/en/reference/snippets.html

Leave A Comment

You must be logged in to post a comment.