Web Enhanced Animation Graphics

About Course

Master the intersection of traditional animation artistry and modern web technology. This course guides students through the core principles of motion aligned with TESDA Animation NC II and III standards, while teaching the technical skills to implement these animations using CSS, SVG, and JavaScript. By the end of this course, you will be able to create high-performance, interactive, and visually stunning web experiences that go far beyond static layouts.

Master the 12 Principles of Animation and apply them to modern web interfaces.
Design and optimize SVG (Scalable Vector Graphics) for high-performance web use.
Create professional-grade CSS3 transitions and keyframe animations.
Implement advanced animation libraries like GSAP and LottieFiles (JSON animation).
Understand TESDA NC II & NC III standards for character rigging and clean-up.
Build a production-ready Interactive Scrollytelling capstone project.

Course Content

Foundations & The “Physics” of Motion
Lay the groundwork by mastering the laws of motion and the technical differences between digital graphic formats.

The 12 Principles of Animation (NC II Standards)

24:03
Quiz: The 12 Principles (NC II Standards)
Storyboarding & Scripting for the Web
Vector vs. Raster Graphics (The SVG Deep Dive)

Technical Asset Creation (NC II Standards)
Develop the hands-on skills required to illustrate and prepare professional-grade assets for digital animation.

Web Integration & Interaction
Transition from "videos" to "code" by learning how to trigger and control animations directly within a web browser.

Advanced Production (NC III Standards)
Level up your skills with complex character rigging and environmental effects aligned with NC III mastery.

Adding “juice” to your projects with particle systems and filters that maintain high performance and fast page load speeds.
Put your skills to the test by building a production-ready interactive project and preparing it for the live web.

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Foundations & The “Physics” of Motion
Lay the groundwork by mastering the laws of motion and the technical differences between digital graphic formats.

The 12 Principles of Animation (NC II Standards)

Quiz: The 12 Principles (NC II Standards)

Storyboarding & Scripting for the Web

Vector vs. Raster Graphics (The SVG Deep Dive)

Technical Asset Creation (NC II Standards)
Develop the hands-on skills required to illustrate and prepare professional-grade assets for digital animation.

Digital Illustration for Web Environments

Clean-up & In-betweening Techniques

Digital Color Theory: HEX, RGB, and HSLA

Web Integration & Interaction
Transition from "videos" to "code" by learning how to trigger and control animations directly within a web browser.

CSS3 Animations & Transitions

SVG Animation (SMIL & CSS)

Advanced Libraries: GSAP & LottieFiles

Introduction to WebGL & HTML5 Canvas

Advanced Production (NC III Standards)
Level up your skills with complex character rigging and environmental effects aligned with NC III mastery.

2D Digital Rigging & Bone Systems

Sound Engineering for Web Media

VFX for the Web: Particles & Filters

Adding “juice” to your projects with particle systems and filters that maintain high performance and fast page load speeds.
Put your skills to the test by building a production-ready interactive project and preparing it for the live web.

Interactive Web Narratives (Scrollytelling)

Performance Optimization & Deployment

Finals Essay

Earn a certificate

About Course

What Will You Learn?

Course Content

Foundations & The “Physics” of Motion Lay the groundwork by mastering the laws of motion and the technical differences between digital graphic formats.

The 12 Principles of Animation (NC II Standards)

Quiz: The 12 Principles (NC II Standards)

Storyboarding & Scripting for the Web

Vector vs. Raster Graphics (The SVG Deep Dive)

Technical Asset Creation (NC II Standards) Develop the hands-on skills required to illustrate and prepare professional-grade assets for digital animation.

Digital Illustration for Web Environments

Clean-up & In-betweening Techniques

Digital Color Theory: HEX, RGB, and HSLA

Web Integration & Interaction Transition from "videos" to "code" by learning how to trigger and control animations directly within a web browser.

CSS3 Animations & Transitions

SVG Animation (SMIL & CSS)

Advanced Libraries: GSAP & LottieFiles

Introduction to WebGL & HTML5 Canvas

Advanced Production (NC III Standards) Level up your skills with complex character rigging and environmental effects aligned with NC III mastery.

2D Digital Rigging & Bone Systems

Sound Engineering for Web Media

VFX for the Web: Particles & Filters

Adding “juice” to your projects with particle systems and filters that maintain high performance and fast page load speeds. Put your skills to the test by building a production-ready interactive project and preparing it for the live web.

Interactive Web Narratives (Scrollytelling)

Performance Optimization & Deployment

Finals Essay

Earn a certificate

Student Ratings & Reviews

Foundations & The “Physics” of Motion
Lay the groundwork by mastering the laws of motion and the technical differences between digital graphic formats.

Technical Asset Creation (NC II Standards)
Develop the hands-on skills required to illustrate and prepare professional-grade assets for digital animation.

Web Integration & Interaction
Transition from "videos" to "code" by learning how to trigger and control animations directly within a web browser.

Advanced Production (NC III Standards)
Level up your skills with complex character rigging and environmental effects aligned with NC III mastery.

Adding “juice” to your projects with particle systems and filters that maintain high performance and fast page load speeds.
Put your skills to the test by building a production-ready interactive project and preparing it for the live web.