9 Trigonometry for web developers

Trigonometry, the mathematics of angles and triangles, might seem too esoteric of a subject to be of use in frontend web development. However, modern browsers now offer tools that enable anyone to make use of trigonometric concepts to create rich visual effects, dynamic layouts, and smooth animations. From using CSS to rotate or skew elements to using JavaScript to animate elements along a curved path, trig stalwarts such as sine, cosine, and tangent make these and other frontend effects easier to implement and customize to your design requirements.

9.1 The basics of trigonometry for web design

Before the code starts flying, it will help to first take a step back to understand a few fundamentals for implementing trigonometric calculations in front end web dev work.

9.1.1 Sine, cosine, and tangent

Trigonometry is all about the relationships that exist within a triangle, particularly a right-angled triangle, where one of the angles is 90°, as shown in figure 9.1. The trig workhorses in frontend work are the three primary trig functions of sine (sin), cosine (cos), and tangent (tan), each of which defines a relationship between an angle θ (theta) and the ratios of the triangle’s sides:

9.1.2 Trigonometric units

9.1.3 Converting between degrees and radians

9.1.4 The inverse trig functions

9.1.5 Trig functions in CSS and JavaScript

9.2 Circular layouts and animations

9.2.1 Creating a circular menu

9.2.2 Animating circular motion

9.2.3 Creating an animated spinner

9.3 Wave effects

9.3.1 Arranging elements along a wave path

9.3.2 Animating elements with a wave effect

9.3.3 Animating an element with a pendulum effect

9.4 Directional calculations

9.5 Solutions to Exercises

9.6 Summary