D4mations.com

Animate Your Font Awesome Icons With JavaScript



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

d4mer

, , , , , , ,

37 responses to “Animate Your Font Awesome Icons With JavaScript”

  4. 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

  13. 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);
    }

  15. 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

  17. 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!

  20. 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);

  34. 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. 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

  37. @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 Reply