liveBook · Manning

Exp function

As explained in Math for Web Design

Math.exp() is a JavaScript function that returns e raised to a specified power.

Math.exp(x) returns e raised to the power of x, where e is approximately 2.71828 and is the base of the natural logarithm. Use it when a value should grow exponentially rather than by equal fixed increments. section 3.2.4

For frontend work, CSS exp(x) provides the same calculation directly in a style rule. Math.exp() is the JavaScript equivalent when the calculation must support browsers lacking the newer CSS function. section 3.2.4

Exponential growth animation

Scale an element from 1 to exp(1) to exp(2). Each stage increases by an exponential calculation, producing a growth effect rather than a linear size progression. section 3.2.4

Listing 3.8 Simulating exponential growth with exp()
@keyframes exponential-growth {
    0% { transform: scale(1); }
    50% { transform: scale(exp(1)); }    #1
    100% { transform: scale(exp(2)); }    #2
}
.grow {
    animation: exponential-growth 2s linear infinite;
}

Inspect the keyframes to see exp(1) and exp(2) used as transform scale values. section 3.2.4

How Math for Web Design covers it

How deep it goes
Defines e and exponential output, then demonstrates exp() in a short scale animation without detailing JavaScript implementation.
Examples
Demonstrates keyframes scaling an element through scale(1), scale(exp(1)), and scale(exp(2)).
What it assumes
Introduces e in plain terms and defers logarithm background to the log() treatment.
What you can do after
Apply it via CSS exp() or Math.exp() to calculate exponential growth for an animation.
How it connects
Connects exponential growth with CSS transforms, animations, natural logarithms, and logarithms.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.