We may earn an affiliate commission when you visit our partners.
Ali Alaa
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.
Read more
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.
Read more
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.
Register for this course and see more details by visiting:
OpenCourser.com/course/qksfer/modern
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.
UDEAFNULP2024
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.
Read more
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.
Read more
Before Watching the Course
Setting Up Our Project Folder
Introduction to CSS Transitions
Using CSS Transition with JavaScript
Using JavaScript Transition Events
Transition Behavior & Discrete Animations
Animating an Element from display: none to display: block
Using @starting-style rule
More on @starting-style
Timing Functions Boilerplate Code
Linear Timing Functions
Smooth Animations with Cubic Bezier Timing Functions
Animating in Jumps Using the Steps Timing Function
Introduction to CSS Animations
CSS Animations Properties
Adding Multiple Animations
Animation Composition
Animation Fill Mode
More on the @keyframe at-rule
Animations JavaScript Events
Discrete Animations
Animations Exercise (Part 1)
Animations Exercise (Part 2)
Animations Exercise (Part 3)
Animations Exercise (Part 4)
The Web Animations API
When to use the Web Animations API
Timeline, Animation Objects & Animation Effects
Creating our First Animation Using the Web Animations API
Another Way for Defining Keyframes
Quick Note!
Iteration Composite
Controlling Our Animation with Animation Object Methods
Updating Our Animation Effect (Keyframe Effect)
Getting Information About Our Animations
More on the currentTime Property
More on the startTime Property
Animation Pending State & Ready Promise
Finished Promise, Finish and Cancel Events
Getting All Animations in the Document or an Element
Persisting Filling Animations Styles with commitStyles
Automatic Animations Removal By Browsers
Web Animations API Exercise Overview
Exercise: Animating the Character
Animating the Street, Background and Foreground
Pausing the Entire Scene
Speeding Up And Slowing Down Our Character
Adding and Animating a Shadow to Our Character
Adding a Random Car to the Scene
Randomizing Our Car's Speed & Occurrence
Animating the Car Wheels
Scroll Driven Animations
An Overview to Scroll Based Animations
Named Scroll Progress Timelines
Anonymous Scroll Progress Timelines
Customizing the Animation Range
Timeline Scope
Named View Progress Timelines
View Timeline Inset
Anonymous View Progress Timelines
Named Timeline Ranges
Named Timeline Ranges Summary
Creating Scroll Progress Timelines using the Web Animations JS API
Creating View Progress Timelines using the Web Animations JS API
Exercise Overview
Assets Credits
[Exercise] Animating the SVG Logo Path
[Exercise] Animating the Header Backgroud
[Exercise] Animating the Hero Section (Part 1)
[Exercise] Animating the Hero Section (Part 2)
[Exercise] Animating the Features Section
[Exercise] Animating the Team Members Section (Part 1)
[Exercise] Animating the Team Members Section (Part 2)
[Exercise] Animating the Services Section (Part 1)
[Exercise] Animating the Services Section (Part 2)
[Exercise] Turning off the Animations According to the User Preference
[Exercise] Fixing Styles for Unsupported Browsers
View Transitions API
Introduction & Demo App
Getting Started with the View Transitions API
Customizing the Default Crossfade Animation
Isolating Elements For More Control on Our Transition Animation
Adding View Transition Name Dynamically
ViewTransition Object Methods & Promises
Using View Transition Promises to Scroll an Item Into View
Transforming the Thumbnail Image Into the Large Image
Transforming the Thumbnail Image Into the Large Image (Cont.)
Animating Grid Items with Dynamic View Transition Names
Changing Transition Animations For Users Who Prefers Reduced Motion
Animating the View Transitions Pseudo Elements with the Web Animations API
Note for the Next Lectures
[Words Game Exercise] Introduction
[Words Game Exercise] Assets Credits
[Words Game Exercise] Animating the Letters
[Words Game Exercise] Animating the lives & coins
[Words Game Exercise] Handling Duplicate Letters
[Words Game Exercise] Animating the Modal
Using View Transitions with JS Frameworks [ReactJS & Svelte Example]
Good to know
Good to know
Know what's good ,
what to watch for , 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
Save this course
Save Modern Web Animations to your list so you can find it easily later:
Save
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 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.
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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
Show steps
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:
For more career information including salaries, visit:
OpenCourser.com/course/qksfer/modern
Reading list
We haven't picked any books for this reading list yet.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/qksfer/modern
Share
Similar courses
Here are nine courses similar to
Modern Web Animations.
Creating Animations with Vue 2
OpenCourser.com/course/7z43yp/creating
Creating Animations with Vue 2
Most relevant
Vue 3 Animations
OpenCourser.com/course/s86p94/vue
Vue 3 Animations
Most relevant
Creative Advanced CSS & JavaScript Animations - 150 Projects
OpenCourser.com/course/i88t95/creative
Creative Advanced CSS & JavaScript Animations - 150...
Most relevant
Android Animations
OpenCourser.com/course/kjerxp/android
Android Animations
Most relevant
Building UIs with the Web Animations API
OpenCourser.com/course/3qs9iw/building
Building UIs with the Web Animations API
Most relevant
Create Animation Transitions in Unity (Intro to Animation 2)
OpenCourser.com/course/pt83ka/create
Create Animation Transitions in Unity (Intro to Animation...
Most relevant
Make Your Pick-Ups Look Cool in Unity (Intro to Animation 1)
OpenCourser.com/course/ter5cf/make
Make Your Pick-Ups Look Cool in Unity (Intro to Animation...
Most relevant
After Effects CC: Motion Graphics & Animation Principles
OpenCourser.com/course/6g4osl/after
After Effects CC: Motion Graphics & Animation Principles
Most relevant
HTML5 Animations Made Easy with Animate.css
OpenCourser.com/course/5kkpgl/html5
HTML5 Animations Made Easy with Animate.css
Effort
15 total hours
Via
Udemy
Instructor
Ali Alaa
Language
English
Good to know
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
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