src/animation.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

export default class Animation {
  static calculateFinalState(element) {
    let finals = {}

    const margin = 50
    const ratio = element.naturalWidth / element.naturalHeight;
    const ww = window.innerWidth - 2*margin;
    const wh = window.innerHeight - 2*margin;

    if (element.naturalWidth > ww) {
      finals.width = ww;
      finals.height = ww / ratio;
      if (finals.height > wh) {
        finals.height = wh;
        finals.width = wh * ratio;
      }
    } else {
      finals.width = element.offsetWidth;
      finals.height = element.offsetHeight;
    }

    finals.top = (wh - finals.height) / 2 + window.scrollY + margin;
    finals.left = (ww - finals.width) / 2 + window.scrollX + margin;

    return finals;
  }

  static transformMatrix(element, starts, finals) {
    // Calculate scaling factors based on width and height interpolation
    const scaleX = finals.width / starts.width;
    const scaleY = finals.height / starts.height;

    // Calculate the center of the starting and final positions
    const startCenterX = starts.left + starts.width / 2;
    const startCenterY = starts.top + starts.height / 2;
    const finalCenterX = finals.left + finals.width / 2;
    const finalCenterY = finals.top + finals.height / 2;

    const translateX = finalCenterX - startCenterX;
    const translateY = finalCenterY - startCenterY;

    // Apply the transform with matrix (scale + translate)
    element.style.transform = `matrix(${scaleX}, 0, 0, ${scaleY}, ${translateX}, ${translateY})`;
  }

  static resetTransformMatrix(element) {
    element.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
  }
}