In "HTML5 Animation and Transition", you'll be learning how to develop rich, complex motion graphics using HTML5 APIs such as DOM, CSS3, Canvas, SVG, and WebGL, as well as the basic mathematical concepts behind complex animations—essential knowledge for any modern web developer.
In the "HTML5 Animation and Transition" video course, we will tackle everything that you need to know in order to become an expert at animating elements using the latest HTML5 APIs, starting from the most rudimentary methods such as using the DOM, to the most modern ones such as SVG, CSS3, Canvas, and WebGL. At the same time, you'll also be learning the mathematical concepts required to make complex animations.
Using the first chapters, you will learn (or refresh!) concepts such as vectors, vector operations, interpolations, and easing and acceleration. Then, you'll learn how to display static graphics on the screen using several rendering methods available in HTML5, such as DOM, CSS3, SVG, Canvas, or WebGL. Once you've learned how to display things on the screen, you'll dedicate entire chapters to implement several animation examples using every single rendering method.
In this video we’ll be discussing why you should learn how to make transitions and animations with HTML5 and how to get started
How do we find the difference between a transition and an animation?
Vectors are mathematical concepts that are usually represented graphically using arrows
Learn about vector addition, multiplication, and the dot product
How can you smooth out transitions or animations?
How do we prepare our code in order to get it ready to play an animation or transition?
What’s the proper way to render elements on a browser using the DOM?
How can you render things using the HTML5 Canvas object?
Can you display preexisting photos or pictures within the HTML5 Canvas object?
Is there a way to simplify working with SVG?
Can I display raster pictures with SVG?
What’s the best way to prepare a rendering scene that is ready to support animations or transitions?
How can I use the DOM to animate elements?
Is it possible to smoothen out the change between two CSS3 properties?
Is there a way to have a higher degree of control over how CSS3 animations are played?
Is it possible to animate elements using Raphaël?
How can I get started doing animations or transitions with the HTML5 Canvas object?
How can I make smooth animations or mimic acceleration using the HTML5 Canvas object?
How do I download and set up ThreeJS?
How do I configure a camera within the scene in ThreeJS?
How can I create a basic mesh in ThreeJS?
How can I do basic animations with ThreeJS?
Is it possible to use objects made with Blender within ThreeJS?
How are complex 3D objects made?
What is a spritesheet?
How can I animate objects using spritesheets?
What is a particle generator?
How can I simulate smoke?
How can we apply all the animation methods taught throughout the videos in practical examples?
How can I make a card flip with CSS3?
How can I make a working clock with CSS3?
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.