Modern Web Animations from Udemy

Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.

CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control.

Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser's animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.

In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.

Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.

In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.

So join now if you want to bring your websites to life.

What's inside

Learning objectives

Learn about css animations & transitions.
Learn about the new javascript web animations api.

Discover scroll driven animations in details.
Create impressive page transitions with the view transitions api.

Learn about css animations & transitions.
Learn about the new javascript web animations api.
Discover scroll driven animations in details.
Create impressive page transitions with the view transitions api.

Syllabus

In this section we are going to discuss animations in the browser using only CSS. This section can be optional if you are already familiar with CSS animations and transitions.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Develops web animation skills using industry standard techniques and technologies

Taught by Ali Alaa, a recognized expert in web animation

Provides hands-on labs and interactive materials for practical experience

Examines new APIs and features for modern web animation, making it highly relevant to industry

Develops advanced skills in web animation, such as scroll driven animations and page transitions

Provides a comprehensive understanding of CSS Animations & Transitions, Web Animations API, scroll driven animations, and View Transitions API

Reviews summary

Mastering modern web animations with browser apis

According to students, this course offers a deep dive into modern web animation techniques, focusing exclusively on browser APIs without external libraries. Learners consistently praise the instructor's clear and insightful explanations, particularly for complex topics like the Web Animations API (WAAPI), scroll-driven animations, and the View Transitions API. The course is lauded for its practical examples and engaging hands-on exercises that reinforce concepts and are directly applicable to real-world projects. However, a significant number of reviews indicate that while comprehensive, the course requires a strong JavaScript foundation, making it challenging for absolute beginners despite the initial CSS overview.

Hands-on projects reinforce learning, apply to real-world tasks.

"The exercises were hands-on and perfectly reinforced the concepts. Highly recommend."

"The demos are excellent and you really feel like you're building something useful."

"The exercises are engaging and directly applicable to real-world projects."

Emphasizes core browser APIs, empowering deeper understanding.

"I loved that it focused purely on browser APIs, no heavy libraries, which is exactly what I was looking for."

"The 'no libraries' approach is a huge plus as it gives you a deeper understanding of the core APIs."

"A gem of a course! The 'no library' approach is truly refreshing and empowers you to write highly optimized animations."

Covers cutting-edge animation APIs in depth.

"Solid content, especially the sections on scroll-driven animations and the WAAPI."

"The View Transitions API part was particularly insightful – it demystifies a topic that felt really complex."

"The detailed coverage of WAAPI and View Transitions is exactly what I needed to upgrade my skills."

Instructor excels at demystifying complex animation concepts.

"The instructor explains complex topics like the Web Animations API and View Transitions API with incredible clarity."

"The instructor's ability to explain the nuances of browser animation engines is remarkable."

"I appreciate the practical examples; they are well-designed and challenging in a good way."

Pace can be fast in advanced sections, requiring re-watches.

"My only minor gripe is that sometimes the pace felt a bit quick in certain exercise sections, making me re-watch parts."

"Sometimes the project setups felt a bit rushed, but overall, it's a valuable resource."

"I struggled to keep up even after completing the prerequisite CSS sections."

Difficulty increases, requires solid JS knowledge.

"I feel like a stronger JavaScript foundation is really necessary to get the most out of this course. It's not a beginner-friendly course."

"Found this course quite difficult. The jump from basic CSS to complex JavaScript APIs was too steep for me."

"It assumes you are comfortable with JavaScript."

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 Modern Web Animations with these activities:

Join a Study Group

Show steps

Engage with fellow students in a study group to exchange knowledge, discuss concepts, and support each other's learning.

Show steps

Find or create a study group with other students in the course.
Meet regularly to discuss course material, work on assignments, and provide support.

Read 'CSS Animations and Transitions'

Show steps

Build a strong foundation in CSS animations and transitions to enhance your comprehension of the course material.

View CSS Secrets on Amazon

Show steps

Read chapters 1-4 of the book.
Experiment with the provided examples to practice the concepts.
Create a simple animation using CSS transitions or animations.

Review CSS Animations and Transitions

Show steps

Review the fundamentals of CSS Animations and Transitions to ensure a strong foundation for the course material.

Browse courses on CSS Animations

Show steps

Read through the documentation on CSS Animations and Transitions.
Create a few practice animations using CSS Animations and Transitions.

11 other activities

Expand to see all activities and additional details

Show all 14 activities

Practice CSS animations and transitions

Show steps

Reinforce your grasp of CSS animations and transitions through repetitive exercises and drills.

Browse courses on CSS Animations

Show steps

Create a variety of animations using CSS animations and transitions.
Practice controlling animations with JavaScript.
Experiment with different animation properties and values.

Explore the Web Animations API

Show steps

Deepen your understanding of the Web Animations API by following tutorials and experimenting with its features.

Show steps

Find a few tutorials on the Web Animations API.
Follow the tutorials and create a few animations using the API.
Experiment with the API on your own to explore its capabilities.

Follow tutorials on Web Animations API

Show steps

Enhance your understanding of the Web Animations API by exploring practical tutorials and examples.

Show steps

Find tutorials on the Web Animations API from reputable sources.
Follow along with the tutorials, experimenting with the code and concepts.
Create a simple animation using the Web Animations API.

Attend a Web Animation Workshop

Show steps

Gain practical experience and insights by attending a workshop focused on web animation techniques.

Browse courses on Animations

Show steps

Find a web animation workshop that aligns with your interests.
Register for the workshop and attend all sessions.
Actively participate in the workshop activities and discussions.

Collaborate on an animation project

Show steps

Gain valuable insights and perspectives by working with peers on an animation project.

Browse courses on CSS Animations

Show steps

Find a partner or group of peers to collaborate with.
Decide on a project idea that utilizes the techniques covered in the course.
Plan and divide the work among team members.
Implement the animations and provide feedback to each other.

Create Scroll-Driven Animations

Show steps

Practice creating scroll-driven animations to enhance your understanding of their implementation and effects.

Browse courses on Animations

Show steps

Create a simple webpage with some scrolling content.
Add scroll-driven animations to the webpage using JavaScript.
Experiment with different scroll-driven animation effects.

Build an animated landing page

Show steps

Apply your knowledge by creating an interactive and visually appealing landing page using animations covered in the course.

Browse courses on CSS Animations

Show steps

Plan the design and animations for your landing page.
Implement the animations using CSS animations, transitions, and the Web Animations API.
Add scroll-driven animations and transitions using the View Transitions API.
Test and refine the animations for optimal performance.

Become a Mentor

Show steps

Enhance your understanding of the course material by teaching and assisting other students in their learning journey.

Browse courses on Mentoring

Show steps

Identify opportunities to mentor other students, such as through online forums or study groups.
Share your knowledge and experience with others.
Provide guidance, support, and encouragement to help others succeed.

Contribute to an open-source animation project

Show steps

Enhance your skills and contribute to the community by participating in open-source animation projects.

Browse courses on CSS Animations

Show steps

Identify an open-source animation project that aligns with your interests.
Review the project's documentation and codebase.
Suggest improvements or propose new features based on your learning in the course.
Collaborate with the project maintainers and contribute code or documentation.

Build an Animated Portfolio Website

Show steps

Apply your knowledge and skills to create a functional animated portfolio website that showcases your abilities.

Browse courses on Animations

Show steps

Plan the design and layout of the website.
Create the HTML and CSS structure of the website.
Implement animations using CSS, JavaScript, or a combination of both.
Add content and polish the website.

Create an Animation Tutorial

Show steps

Share your knowledge and skills by creating a tutorial that teaches others about a specific animation technique.

Show steps

Choose an animation technique or concept to focus on.
Create a video or written tutorial that explains the technique in a clear and engaging way.
Share your tutorial with others online or through your own channels.

Career center

Learners who complete Modern Web Animations will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Modern Web Animations

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Mastering modern web animations with browser apis

Activities

Career center

Reading list

Share

Similar courses