We may earn an affiliate commission when you visit our partners.
Leon Revill

This course will teach you best practices for adding visually appealing animations to any web app. You’ll learn how to use the Web Animations API to make these sophisticated animations in JavaScript, without CSS or third-party libraries.

Read more

This course will teach you best practices for adding visually appealing animations to any web app. You’ll learn how to use the Web Animations API to make these sophisticated animations in JavaScript, without CSS or third-party libraries.

Animation is essential for creating top-notch user experiences, but it’s difficult to create complex animations that perform smoothly. In this course, Building UIs with the Web Animations API, you'll learn how to use JavaScript to create complex and efficient web animations. First, you’ll explore some best practices for creating animations in any web app. Next, you’ll use this knowledge to examine how the Web Animations API allows developers to unlock the browser’s animation engine to create performant animations in JavaScript without CSS or third-party libraries. Finally, you'll discover how to use the Web Animations API and Custom Elements to build two UI components that use animations to create an enjoyable experience for the user. When you've finished this course, you'll know how to use the Web Animations API to effortlessly create sophisticated animations that work great even on low powered devices.

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Syllabus

Course Overview
Introduction
The Basics of Animation on the Web
Web Animations API in Depth
Read more
Creating an Animated Search Input
Creating an Animated Share Button

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches the essential Web Animations API—a skill that can lead to producing more advanced and complex animations
Taught by Leon Revill, who is recognized for their expertise in web animations
Develops core skills in using JavaScript to create high-performing and engaging web animations

Save this course

Save Building UIs with the Web Animations API to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Building UIs with the Web Animations API with these activities:
Review Web Animation Basics
Reviewing the basics of web animation will help you understand the concepts covered in this course more easily.
Browse courses on Web Development
Show steps
  • Read articles and blog posts about web animation basics.
  • Watch tutorials on YouTube or other video platforms.
  • Experiment with different animation techniques in your own code.
Review the DOM and Animations
Revisit the fundamental concepts of how webpages are structured and animated to establish a solid base for this course.
Browse courses on DOM
Show steps
  • Read articles or documentation about the DOM.
  • Experiment with CSS animations using an online editor or framework.
Follow Web Animations API Tutorials
Following tutorials on the Web Animations API will help you learn how to use it to create complex and efficient web animations.
Show steps
  • Find tutorials on the Web Animations API from reputable sources.
  • Follow the tutorials step-by-step and experiment with the code.
  • Build your own animations using the techniques you learn.
Nine other activities
Expand to see all activities and additional details
Show all 12 activities
Create Animated SVGs
Enhance your understanding of animations by practicing the creation of dynamic SVG graphics, which are commonly used in web design and application development.
Show steps
  • Find online tutorials and examples on SVG animation.
  • Use a drawing tool to create your own SVG graphics.
  • Add animations to your SVG graphics using code.
  • Experiment with different animation timing and effects.
JavaScript Animation Challenges
Sharpen your JavaScript animation skills by solving coding challenges that test your understanding of different animation techniques and concepts.
Show steps
  • Find online JavaScript animation challenges or coding problems.
  • Set aside dedicated time for solving the challenges.
  • Work through the challenges methodically.
  • Test your solutions and debug any errors.
Peer Review of Animated Projects
Engage with your peers to provide and receive constructive feedback on your web animation projects, fostering a collaborative learning experience.
Browse courses on Peer Review
Show steps
  • Develop an animation project.
  • Find a peer or group for review.
  • Present your project and receive feedback.
  • Provide feedback to your peers.
  • Iterate on your project based on the feedback received.
Seek Guidance from Experienced Web Animators
Finding a mentor who can answer your questions and provide feedback can help you accelerate your learning.
Show steps
  • Attend industry events and meetups.
  • Reach out to web animators on LinkedIn or other professional networking platforms.
Explore JavaScript Animation Libraries
Expand your knowledge beyond the Web Animations API discussed in the course by investigating popular JavaScript animation libraries such as Anime.js or GreenSock.
Browse courses on Web Development Tools
Show steps
  • Research and compare different JavaScript animation libraries.
  • Follow tutorials or documentation to learn the basics of your chosen library.
  • Build a small project using the library to apply your learning.
Attend a Web Development Workshop
Immerse yourself in a learning environment by attending a web development workshop led by industry experts to gain hands-on experience and insights.
Browse courses on Networking
Show steps
  • Research and find a relevant workshop.
  • Register and prepare for the workshop.
  • Actively participate in the workshop.
  • Follow up with the organizers or speakers after the workshop.
Contribute to Open Source Web Animation Projects
Contributing to open source projects can help you learn from others and gain practical experience with the Web Animations API.
Show steps
  • Find open source web animation projects on GitHub or other platforms.
  • Identify an issue or feature that you can contribute to.
  • Submit a pull request with your changes.
Design an Animated User Interface
Apply the principles learned in this course to create a user interface that incorporates engaging and functional animations, fostering a better user experience.
Browse courses on User Interface Design
Show steps
  • Identify a UI element or page that benefits from animation.
  • Storyboard the animation sequence.
  • Implement the animations using the Web Animations API.
  • Test and iterate on your design for usability and performance.
Contribute to an Open-Source Animation Project
Enhance your understanding of animation principles and best practices by contributing to an open-source animation project on platforms like GitHub.
Browse courses on Open Source
Show steps
  • Find an open-source animation project that aligns with your interests.
  • Review the project's documentation and codebase.
  • Identify areas where you can contribute.
  • Create a pull request with your proposed changes or contributions.
  • Respond to feedback and iterate on your contributions.

Career center

Learners who complete Building UIs with the Web Animations API will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers create and maintain websites and web applications. They work with a variety of programming languages and technologies to design, develop, and test web applications. This course will help you develop the skills you need to become a Web Developer by teaching you how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your web applications.
Front-End Developer
Front-End Developers are responsible for the design and implementation of the user interface of a website or web application. They work with designers to create visually appealing and user-friendly interfaces. This course will help you develop the skills you need to become a Front-End Developer by teaching you how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your web applications.
UI Designer
UI Designers are responsible for the visual design of a website or web application. They work with developers to create interfaces that are visually appealing and user-friendly. This course will help you develop the skills you need to become a UI Designer by teaching you how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your web applications.
UX Designer
UX Designers are responsible for the user experience of a website or web application. They work with developers to create interfaces that are easy to use and navigate. This course will help you develop the skills you need to become a UX Designer by teaching you how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your web applications.
Interaction Designer
Interaction Designers are responsible for the design of the interactions between users and a website or web application. They work with developers to create interfaces that are easy to use and navigate. This course may be helpful for Interaction Designers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your web applications.
Software Engineer
Software Engineers design, develop, and maintain software systems. They work with a variety of programming languages and technologies to create software that meets the needs of users. This course may be helpful for Software Engineers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your software applications.
Mobile Developer
Mobile Developers design, develop, and maintain mobile applications. They work with a variety of programming languages and technologies to create apps that are useful and engaging. This course may be helpful for Mobile Developers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your mobile apps.
Game Developer
Game Developers design, develop, and maintain video games. They work with a variety of programming languages and technologies to create games that are fun and engaging. This course may be helpful for Game Developers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will enhance the user experience of your games.
Product Manager
Product Managers are responsible for the development and launch of new products. They work with a variety of stakeholders to define the product vision, develop the product roadmap, and manage the product launch. This course may be helpful for Product Managers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you prototype new products and communicate your product vision.
Data Scientist
Data Scientists use data to solve problems and make predictions. They work with a variety of programming languages and technologies to analyze data and develop models. This course may be helpful for Data Scientists who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you visualize data and communicate your findings.
Technical Writer
Technical Writers create and maintain documentation for software products. They work with a variety of stakeholders to gather information, write documentation, and publish documentation. This course may be helpful for Technical Writers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you create engaging and informative documentation.
Animator
Animators create and edit animations for a variety of purposes. They work with a variety of software and technologies to create animations that are both visually appealing and technically proficient. This course may be helpful for Animators who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that can be used for a variety of purposes.
Instructional Designer
Instructional Designers create and develop educational materials. They work with a variety of stakeholders to identify learning needs, develop learning materials, and evaluate learning outcomes. This course may be helpful for Instructional Designers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you create engaging and effective learning materials.
Researcher
Researchers conduct research to answer questions and solve problems. They work with a variety of methods and technologies to collect data, analyze data, and publish findings. This course may be helpful for Researchers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you visualize data and communicate your findings.
Teacher
Teachers create and deliver instruction to students. They work with a variety of students and stakeholders to create lesson plans, deliver instruction, and assess learning. This course may be helpful for Teachers who want to learn how to create visually appealing animations using the Web Animations API. With this knowledge, you can build complex and efficient animations that will help you create engaging and effective learning materials.

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Building UIs with the Web Animations API.
Serves as a practical guide to the fundamentals of animation, covering topics such as drawing, movement, and character design.
Offers a behind-the-scenes look at the history and techniques behind Disney animation, providing valuable insights into the art and craft of animation.
Provides guidance on the principles and best practices of designing animations, helping learners create effective and engaging user experiences.
Explores the principles and techniques of responsive web design, ensuring that animations are accessible and work well on all devices.
Shares insights into the creative process and organizational culture at Pixar, fostering a mindset conducive to innovation and excellence in animation.
Offers insights into the thought processes and techniques of experienced programmers, providing valuable perspectives on software development and animation.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Building UIs with the Web Animations API.
Vue 3 Animations
Most relevant
Creating Animations with Vue 2
Most relevant
Modern Web Animations
Most relevant
Beyond Basic CSS: Typography, Color, Effects, & Animation
Most relevant
The Geolocation API: Using Maps and Location in Your Web...
Most relevant
Creative Advanced CSS & JavaScript Animations - 150...
Most relevant
Creating Interactive Experiences Using HTML APIs
Most relevant
Deno 1: Getting Started
Most relevant
Building CRUD Actions in a JavaScript REST API
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser