How to Learn JavaScript Properly

JavaScript a powerful programming language. It’s a must to know when creating anything web related. It is considered one of the big three in front end development which is HTML, CSS and JavaScript. JS can seem scary to beginners including myself, but there is always different paths to choose from when learning something new. I stumbled upon a course called “How to Learn JavaScript Properly“. It’s a 6-8 week road-map on how to learn JavaScript. I suggest you know some basic Html and Css when learning JavaScript to avoid getting lost and frustrated.  In this roadmap there are two books to choose from to guide you along the way. You will have to read through the chapters throughout the weeks. I went with “JavaScript: The Definitive Guide” by David Flanagan. It’s a really big book so you can either buy a paperback version or a digital copy (which is what i would recommend using the kindle cloud). javascript-the-definitive-guide

What is GSAP?

carl-schoff

I attended a free course at Noble Desktop with an introductory lesson to a new animation medium called GreenSock Animation PLatform  (GSAP). It’s a javascript library built to create animations that work smoothly across multi medias. In this session Carl Schooff (a former flash developer) showed us a few large companies using GSAP technology including McDonalds and Four Square as well as showed us some basic animation that was often created with flash in the past. Below is a preview of what we created with GSAP. I had to convert it into a video gif since i had some trouble attaching the styles and scripts to my page. No worries, you can check out a live preview in this codepen

ad-gsap

Here is a breakdown of the JavaScript. It’s very short and simple compared to some extensive code i’ve seen before for basic animation. Another reason why GSAP is great.

/*Here are the defined variables needed. Sizzle is a GSAP api*/
var $ = Sizzle,
$panel1 = $(“#panel1”),
$panel2 = $(“#panel2”),
$panel3 = $(“#panel3”),
$panel1Text = $(“#panel1 h1”),
$panel2Text = $(“#panel2 h2”),
$info = $(“#info”),
$list = $(“li”),
$orderNow = $(“#orderNow”),
tl;
var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2});
 
//Here is the actual code that creates magic.
tl.from(panel1, 0.5, {autoAlpha:0})
.from($panel1Text, 0.5, {scale:0.5, autoAlpha:0, ease:Back.easeOut})
 
.set($panel2, {top:0}, “+=2″)
.from($panel2, 0.2, {autoAlpha:0, scale:1.5})
.from($panel2Text, 0.2, {top:”+=62”}, “+=0.5″)
.to($panel2Text, 0.2, {top:”+=62”}, “+=2”)
 
.set($panel3, {top:0}, “final”)
.from($info, 0.5, {top:250}, “final”)
.to($panel2, 0.5, {backgroundPosition:”0px -60px”}, “final”)
.staggerFrom($list, 0.3, {autoAlpha:0, left:50}, 0.1, “+=0.2”)
.from($orderNow, 0.5, {scale:0, autoAlpha:0, ease:Back.easeOut});

Now if you look through the code carefully and play around with it, it’s pretty simple to see what’s actually going on. If you wanted to take things to the next level then you would have to spend more time learning Greensock and have a better understanding of JavaScript. Im going to use this as a template to create my own animation to help me get better.

GreenSock Showcase

These are some of the best interactive websites i’ve seen before.Take a look to see some of the capabilities and power of GSAP.mcdonalds-gsapafterearth-gsapfoursquare-gsapdisney-gsapmountain-dew-gsap

  • Thanks, for sharing seriously. I’m actually buying the book right now on Amazon.

    • No problem. That’s great let me know your progress. I’m working through the road-map myself.

  • Glad you enjoyed the GSAP seminar and got inspired by it. Thanks so much for sharing your experience and enthusiasm with others.

    Happy Tweening,

    Carl

    • Thanks for this great presentation! Straight forward and clear. Hope to attend another one.

  • Excellent post. Keep writing such kind of info on your page.

    Im really impressed by it.
    Hi there, You have performed an excellent job.
    I will definitely digg it and in my opinion recommend to my friends.
    I am confident they’ll be benefited from this website.

  • Wow, superb blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your web site is magnificent, let alone the content!