XQA
Back to JavaScript
2025-12-257 min read

Animation Curves (JavaScript)

Learn Animation Curves (JavaScript) step by step with clear examples and exercises.

Why This Matters

Animation curves are essential for creating dynamic, visually appealing, and interactive user interfaces in web development. They offer developers greater control over the speed, timing, and easing of animations throughout their duration, enhancing user experiences and storytelling across various digital mediums.

Prerequisites

To fully understand animation curves in JavaScript, it is important to have a strong foundation in the following topics:

  1. HTML and CSS for building basic web pages and styling elements.
  2. JavaScript fundamentals, including variables, functions, loops, conditionals, and events.
  3. Understanding of the Document Object Model (DOM) and manipulating elements using JavaScript.
  4. Familiarity with the requestAnimationFrame function for smooth animations in JavaScript.
  5. Basic understanding of mathematical functions and equations.
  6. Knowledge of common animation curves such as linear, ease-in, ease-out, and ease-in-out.
  7. Familiarity with a JavaScript animation library like GSAP (GreenSock Animation Platform) or Three.js for advanced animations.

Core Concept

At its core, an animation curve represents the relationship between time and an animation's progress or speed. This relationship can be visualized as a graph with time on the x-axis and the animation's progress or speed on the y-axis. The shape of the curve determines how the animation accelerates, decelerates, or maintains constant speed throughout its duration.

In JavaScript, we typically use mathematical functions to represent animation curves. Some common types of animation curves include:

  1. Linear (y = kx + b): Constant speed throughout the animation.
  2. Ease-in (Quadratic - y = ax² + bx + c): Slow start and then accelerates quickly.
  3. Ease-out (Quadratic - y = -ax² + bx + c): Fast start and then decelerates slowly.
  4. Ease-in-out (Cubic - y = a(t³) + b(t²) + c(t) + d): Slows down at the beginning and end, with a fast speed in the middle.
  5. Custom easing functions: Creating custom easing functions allows developers to create unique animation curves tailored to specific needs.

Worked Example

Let's dive deeper into creating an animation curve using GSAP (GreenSock Animation Platform). First, include the GSAP CDN in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
</head>
<body>
<!-- Your code here -->
<div id="box" class="animated-box">Box</div>
<style>
body {
height: 100vh;
margin: 0;
}

.animated-box {
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</body>
</html>

Now, let's create a simple animation using GSAP's TweenMax class and the linear, ease-in, and ease-out easing functions. We will also add an easing function that slows down at the beginning and end but accelerates in the middle:

// Your JavaScript code here
const box = document.getElementById('box');

// Linear animation
TweenMax.to(box, 2, { x: 300, ease: Linear.easeNone });

// Ease-in animation
TweenMax.to(box, 2, { x: 600, ease: Expo.easeIn });

// Custom easing function (Cubic - y = a(t³) + b(t²) + c(t) + d)
const customEase = CustomEase.create("custom", "0 0.25 1 0.75, 0.75 1 1 0.25");
TweenMax.to(box, 2, { x: -300, ease: customEase });

Creating a Custom Easing Function (Expanded)

To create a custom easing function in JavaScript, we can use the CustomEase class provided by GSAP. In this example, we'll create a cubic easing function that slows down at the beginning and end but accelerates in the middle:

// Creating a custom easing function (Cubic - y = a(t³) + b(t²) + c(t) + d)
const customEase = CustomEase.create("custom", "0 0.25 1 0.75, 0.75 1 1 0.25");

Common Mistakes

  1. Forgetting to include the GSAP library: Ensure you've included the GSAP CDN in your HTML file before using any of its functions.
  2. Incorrectly specifying easing functions: Verify that you use the correct easing function for each animation, and double-check their capitalization.
  3. Not understanding the relationship between time and progress: Remember that the x-axis represents time, and the y-axis represents the animation's progress or speed.
  4. Ignoring animation performance considerations: Be mindful of the number of animations running simultaneously and optimize them for better performance if necessary.
  5. Not using requestAnimationFrame for smooth animations: Instead of using setInterval or setTimeout, use requestAnimationFrame for smoother and more efficient animations in JavaScript.
  6. Creating complex easing functions without testing: Test your custom easing functions to ensure they produce the desired results before implementing them in your projects.
  7. Overcomplicating animations: Keep animations simple and intuitive, avoiding unnecessary complexity that may negatively impact performance or user experience.
  8. Not properly clearing timelines: When using GSAP's TimelineMax class, ensure you clear the timeline when it is no longer needed to prevent memory leaks.
  9. Ignoring browser compatibility: Be aware of browser compatibility issues with certain animation features and ensure that your animations work across multiple browsers.
  10. Not optimizing for accessibility: Ensure that your animations do not interfere with the usability of your web application for users who may have visual impairments or use assistive technologies.

Practice Questions

  1. Create a simple animation that moves an element from left to right using the ease-in-out easing function.
  2. Write code to create a bounce animation (ease-out with overshoot) for an element.
  3. Implement a custom easing function in JavaScript and use it to create a unique animation curve.
  4. Optimize the performance of an animation that has multiple elements moving simultaneously.
  5. Create a simple animation where an element grows and shrinks using the cubic ease-in-out easing function.
  6. Analyze the performance of your animations and identify potential bottlenecks or areas for optimization.
  7. Create a custom easing function that mimics the motion of a real-world object (e.g., a ball bouncing on a surface).
  8. Implement a scroll trigger animation where an element appears when the user scrolls to a specific section of the page.
  9. Create a parallax scrolling effect for a web application, where background images move at different speeds relative to the foreground content as the user scrolls.
  10. Design and implement an interactive loading screen with a progress bar and animations that provide visual feedback to users while your web application is loading.

FAQ

What is the difference between linear, ease-in, and ease-out animation curves?

Linear animations have constant speed throughout their duration, while ease-in and ease-out animations accelerate or decelerate at specific points during the animation.

Can I create custom easing functions in JavaScript?

Yes, you can create custom easing functions using mathematical equations that define the relationship between time and progress.

How do I optimize the performance of my animations in JavaScript?

Optimizing performance involves reducing the number of animations running simultaneously, minimizing the number of DOM manipulations, and using requestAnimationFrame instead of setInterval or setTimeout for smoother animations.

What is GSAP (GreenSock Animation Platform)?

GSAP is a popular JavaScript library that provides powerful tools for creating complex and high-performance animations and interactions in web applications.

How do I include the GSAP library in my HTML file?

You can include the GSAP library by adding the following CDN link to your HTML file: ``

How do I create a custom easing function using JavaScript?

To create a custom easing function in JavaScript, use the CustomEase class provided by GSAP and define the mathematical equation that represents your desired animation curve.

What is the purpose of requestAnimationFrame in JavaScript animations?

requestAnimationFrame provides a way to update an animation frame smoothly and efficiently, ensuring that the browser can handle other tasks without being overwhelmed by frequent updates.

How do I create a simple animation using CSS transitions instead of JavaScript?

You can create simple animations using CSS transitions by defining keyframe rules and specifying the transition properties for your elements.

What are some best practices for designing animations in web applications?

Best practices for designing animations include keeping animations simple, intuitive, and performance-optimized; ensuring accessibility for all users; and providing visual feedback to users during interactions.

How do I create a parallax scrolling effect using JavaScript and CSS?

To create a parallax scrolling effect using JavaScript and CSS, you can use multiple background images with different speeds of movement relative to the foreground content as the user scrolls. This can be achieved by modifying the position of each image based on the scroll position and time elapsed since the last frame update.

Animation Curves (JavaScript) | JavaScript | XQA Learn