Learn animation using CSS3, Javascript and HTML5
4.0 (56 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,471 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn animation using CSS3, Javascript and HTML5 to your Wishlist.

Add to Wishlist

Learn animation using CSS3, Javascript and HTML5

Master the art of animation for the web. Easy to follow videos. Source code included.
4.0 (56 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,471 students enrolled
Created by Matt Wallace
Last updated 3/2015
English
Current price: $10 Original price: $40 Discount: 75% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create animations and transitions using CSS, Javascript and HTML
  • Use popular javascript libraries to help create animations
View Curriculum
Requirements
  • To code along with this course you will just need a text editor and a browser.
  • Following along will be easier if you have a basic understanding of html, css and javascript.
Description

In this course you will learn how to create animations and transitions in CSS3 and Javascript. The easy to follow along tutorials will have you animating in no time.

Master the art of adding animation to your websites and pick the right tools for the job.

  • Create animations and transitions using CSS3
  • Learn the building blocks of how animation works in Javascript
  • See how different techniques can add life to your animations
  • Leverage animation frameworks that take care of the hard work and let you animate quickly.
  • Follow along with the included source code


    We'll learn the basics of animating all the way through complex sequenced animations.

    You'll learn how to use CSS3 syntax to create quick and smooth animations without needing javascript. Next I'll show you the building blocks of animating in javascript using setInterval and requestAnimationFrame in the canvas. Then you will learn how to leverage jQuery's animation methods, events, and properties to get animating quickly. Last but not least we'll cover GSAP (Greensock animation platform) where you'll learn the basics all the way through complex sequenced animations. This course comes complete with working code samples so you can work along side the instructor and modify to create your own animations. The full course can be completed in just over 2 hours.
Who is the target audience?
  • This Animation course it meant for beginner to advanced developers who want to broaden their understanding of animation and the tools to create animations.
  • A basic understanding of html, css and javascript is nice to have but not required.
  • This course is focused specifically on animations for HTML, CSS and Javascript. It's not intended to be a full web development course
Students Who Viewed This Course Also Viewed
Curriculum For This Course
18 Lectures
02:21:11
+
Animation and Transitions with CSS3
5 Lectures 56:12

Learn how to use the CSS transition property for quick and easy transtions

Preview 07:50

See how to add transforms to your transitions for 3d and other effects

CSS3 Transitions with transforms
11:54

Quick and easy animations using only CSS

CSS3 Animation Basics
11:54

Make your CSS animations interactive!

CSS3 Interaction with Animation
10:20

Add a lot of life to you r animation using CSS transforms

CSS3 Animation with Transforms
14:14
+
Animating with Javascript
2 Lectures 15:51

Learn the building blocks of Javascript animation using setInterval

Animating using setInterval
10:07

Learn how to use requestAnimtionFrame for high performance animation

Animating using requestAnimationFrame
05:44
+
Animating with Jquery
4 Lectures 30:28

See how jQuery makes animation super easy using only one short line of code.

Preview 05:39

make your animations more life-like using different easing effects

Easing
08:08

See how to use events during different parts of your animation

Events
06:49

Learn how to use jQuery's effects for quick animation shortcuts

Effects
09:52
+
Animating with GSAP (Greensock animation platform)
7 Lectures 38:40

An introduction to the feature packed GSAP framework

Intro to GSAP and TweenMax
05:50

Use easing to add life to your tweens

Easing with GSAP
04:55

Learn GSAP's special properties for time saving techniques

Preview 04:03

Control your tweens just like you can control video!

Animation Controls
02:49

Add 3d effects and more using transform properties!

Animation with CSS3 and transforms
07:53

Learn how to respond to different states of your tweens

Animation Events
05:01

See how Timelinemax can easily help you create complex, sequenced animations!

Animating with TimelineMax
08:09
About the Instructor
Matt Wallace
4.0 Average rating
56 Reviews
1,471 Students
1 Course
Professional Web Developer

Matt Wallace is a professional Web Developer with over 15 years experience. He's worked at leading Agencies including Razorfish and Crispin Porter and has been freelancing for the last 5 years. A few of the Brands he's worked on include: Mercedes-AMG, Volkwagen, Burger King, HBO, Scion, Toyota, Axe, and Estee Lauder.