Building UIs with the Web Animations API from Pluralsight

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.

What's inside

Syllabus

Course Overview

Introduction

The Basics of Animation on the Web

Web Animations API in Depth

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

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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.

See salaries and explore the career path for Web Developer

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.

See salaries and explore the career path for Front-End Developer

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.

See salaries and explore the career path for UI Designer

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.

See salaries and explore the career path for UX Designer

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.

See salaries and explore the career path for Interaction Designer

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.

See salaries and explore the career path for Software Engineer

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.

See salaries and explore the career path for Mobile Developer

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.

See salaries and explore the career path for Game Developer

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.

See salaries and explore the career path for Product Manager

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.

See salaries and explore the career path for Data Scientist

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.

See salaries and explore the career path for Technical Writer

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.

See salaries and explore the career path for Animator

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.

See salaries and explore the career path for Instructional Designer

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.

See salaries and explore the career path for Researcher

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.

See salaries and explore the career path for Teacher

Building UIs with the Web Animations API

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses