animation

.gitignore

@@ -11,4 +11,5 @@ app.py
 unused.py
 unused-css-master
 
-other
\ No newline at end of file
+other
+src/components/resources

src/App/App.tsx

 import { useState, useEffect } from "react";
 import "./App.css";
+import '../components/test.css'
 import "../contents/example.css"
 import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';

src/components/seclarations.ts

@@ -34,3 +34,5 @@ interface Datawrapper {
   dependencyPromises?: any;
 }
 
+
+

src/components/test.css

+
+  
+  .ball01 {
+    fill: red;
+  }
+  
+  .ball02 {
+    fill: blue;
+  }
+  
+  .ball03 {
+    fill: green;
+  }
+  
+  .line {
+    stroke: black;
+  }
+  
+  .theLine {
+    visibility: hidden;
+  }
+  
+  .theLine2 {
+    visibility: hidden;
+  }
+  
+  .theLine3 {
+    visibility: hidden;
+  }
+  
+  .vector {
+    height: 100px;
+    width: 100px;
+    background-color: white;
+  }
+  
+  #payload {
+    height: 100px;
+    width: 100px;
+    float: left;
+  }
+  
+  .firstSpacingBlock {
+    background-color: violet;
+    height: 50vh;
+    text-align: center;
+  }
+  
+  .secondSpacingBlock {
+    margin-bottom: 160%;
+  }
+  
+  #firstCircle {
+    background-color: yellow;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid blue;
+  }
+  
+  
+  #secondCircle {
+    background-color: blue;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid yellow;
+    margin-bottom: 10%;
+  }
+  
+  #thirdCircle {
+    background-color: black;
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    border: 2px solid yellow;
+    margin-bottom: 80%;
+  }
\ No newline at end of file

src/components/testsvganimation.tsx

-
-import './App.css';
-import vectorImg from "./resources/vector.png"
-import payloadImg from "./resources/payload.png"
-import inhalatorImg from "./resources/inhalator.png"
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
 import { useGSAP } from '@gsap/react';
 import { useRef } from 'react';
-import { MotionPathPlugin } from 'gsap/all';
+import MotionPathPlugin from "gsap/dist/MotionPathPlugin";
 
 function TestSVG() {
 
@@ -61,26 +56,26 @@ function TestSVG() {
       
       <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
         
-        <path class="theLine" d="
+        <path className="theLine" d="
         M 50 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 0 4000 540 4000 L 540 4500"
-        file="none" stroke="white" stroke-width="10px"></path>
+        /* file="none" */ stroke="white" stroke-width="10px"></path>
 
         
 
-        <path class="theLine2" d="
+        <path className="theLine2" d="
         M 1030 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 540 4000 L 540 3500"
-        file="none" stroke="white" stroke-width="10px"></path>
+        /* file="none" */ stroke="white" stroke-width="10px"></path>
 
 
 
-        <path class="theLine3" d="
+        <path className="theLine3" d="
         M 2000 600 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 -100 4000 L -100 4200"
-        file="none" stroke="white" stroke-width="10px"></path>
+        /* file="none" */ stroke="white" stroke-width="10px"></path>
 
       </svg>
-      <img ref={vectorRef} src={vectorImg} alt="vectorImg"/>
-      <img ref={payloadRef} src={payloadImg} alt="payloadImg"/>
-      <img ref={inhalatorRef} src={inhalatorImg} alt="inhalatorImg"/>
+      <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>
+      <img ref={payloadRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg" alt="payloadImg"/>
+      <img ref={inhalatorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg" alt="inhalatorImg"/>
     </div>
   );
 }

src/contents/example.tsx

 import { TimelineItem } from "../components/My-Timeline";
 import SimpleSlider from "../components/slider";
-
+import TestSVG from "../components/testsvganimation";
 
 
 export function Example() {
     return (
       <>
+        <TestSVG></TestSVG>
         <div className="col">
             <h3 className="example">Exercises</h3>
             <i><h6>By Your name</h6></i>
@@ -57,6 +58,7 @@ export function Example() {
                 date='How to SynBio'
                 tag='Workshop Session I.'
                 color='var(--text-primary)'
+                csstag="Workshop"
                 >
                 Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
                 </TimelineItem>

src/utils/gsap/MotionPathPlugin.ts

+/*!
+ * MotionPathPlugin 3.12.5
+ * https://gsap.com
+ *
+ * @license Copyright 2008-2024, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license or for
+ * Club GSAP members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+import { getRawPath, cacheRawPathMeasurements, getPositionOnPath, pointsToSegment, flatPointsToSegment, sliceRawPath, stringToRawPath, rawPathToString, transformRawPath, convertToPath as _convertToPath } from "./dist/paths.js";
+import { getGlobalMatrix } from "./dist/matrix.js"
+
+type GSAP = any; // Placeholder for GSAP type
+type PropTweenType = any; // Placeholder for PropTween type
+
+let _xProps = "x,translateX,left,marginLeft,xPercent".split(","),
+    _yProps = "y,translateY,top,marginTop,yPercent".split(","),
+    _DEG2RAD = Math.PI / 180,
+    gsap: GSAP | undefined,
+    PropTween: PropTweenType,
+    _getUnit: (value: string) => string,
+    _toArray: (value: any) => any[],
+    _getStyleSaver: (target: any, style: string) => any,
+    _reverting: () => boolean,
+    _getGSAP = function _getGSAP(): GSAP | undefined {
+  return gsap || (typeof window !== "undefined" && (gsap = (window as any).gsap) && gsap.registerPlugin && gsap);
+},
+
+  _populateSegmentFromArray = function _populateSegmentFromArray(segment: number[], values: any[], property: string, mode: number) {
+  // mode: 0 = x but don't fill y yet, 1 = y, 2 = x and fill y with 0.
+  let l = values.length,
+      si = mode === 2 ? 0 : mode,
+      i = 0,
+      v;
+
+      for (; i < l; i++) {
+        segment[si] = v = parseFloat(values[i][property]);
+        mode === 2 && (segment[si + 1] = 0);
+        si += 2;
+      }
+    
+      return segment;
+    },
+    _getPropNum = function _getPropNum(target: any, prop: string, unit: string) {
+      return parseFloat(target._gsap.get(target, prop, unit || "px")) || 0;
+    },
+        _relativize = function _relativize(segment: number[]) {
+      let x = segment[0],
+          y = segment[1],
+          i;
+    
+      for (i = 2; i < segment.length; i += 2) {
+        x = segment[i] += x;
+        y = segment[i + 1] += y;
+      }
+    },
+    // feed in an array of quadratic bezier points like [{x: 0, y: 0}, ...] and it'll convert it to cubic bezier
+// _quadToCubic = points => {
+// 	let cubic = [],
+// 		l = points.length - 1,
+// 		i = 1,
+// 		a, b, c;
+// 	for (; i < l; i+=2) {
+// 		a = points[i-1];
+// 		b = points[i];
+// 		c = points[i+1];
+// 		cubic.push(a, {x: (2 * b.x + a.x) / 3, y: (2 * b.y + a.y) / 3}, {x: (2 * b.x + c.x) / 3, y: (2 * b.y + c.y) / 3});
+// 	}
+// 	cubic.push(points[l]);
+// 	return cubic;
+// },
+_segmentToRawPath = function _segmentToRawPath(plugin, segment, target, x, y, slicer, vars, unitX, unitY) {
+  if (vars.type === "cubic") {
+    segment = [segment];
+  } else {
+    vars.fromCurrent !== false && segment.unshift(_getPropNum(target, x, unitX), y ? _getPropNum(target, y, unitY) : 0);
+    vars.relative && _relativize(segment);
+    var pointFunc = y ? pointsToSegment : flatPointsToSegment;
+    segment = [pointFunc(segment, vars.curviness)];
+  }
+
+  segment = slicer(_align(segment, target, vars));
+
+  _addDimensionalPropTween(plugin, target, x, segment, "x", unitX);
+
+  y && _addDimensionalPropTween(plugin, target, y, segment, "y", unitY);
+  return cacheRawPathMeasurements(segment, vars.resolution || (vars.curviness === 0 ? 20 : 12)); //when curviness is 0, it creates control points right on top of the anchors which makes it more sensitive to resolution, thus we change the default accordingly.
+},
+    _emptyFunc = function _emptyFunc(v) {
+  return v;
+},
+    _numExp = /[-+\.]*\d+\.?(?:e-|e\+)?\d*/g,
+    _originToPoint = function _originToPoint(element, origin, parentMatrix) {
+  // origin is an array of normalized values (0-1) in relation to the width/height, so [0.5, 0.5] would be the center. It can also be "auto" in which case it will be the top left unless it's a <path>, when it will start at the beginning of the path itself.
+  var m = getGlobalMatrix(element),
+      x = 0,
+      y = 0,
+      svg;
+
+  if ((element.tagName + "").toLowerCase() === "svg") {
+    svg = element.viewBox.baseVal;
+    svg.width || (svg = {
+      width: +element.getAttribute("width"),
+      height: +element.getAttribute("height")
+    });
+  } else {
+    svg = origin && element.getBBox && element.getBBox();
+  }
+
+  if (origin && origin !== "auto") {
+    x = origin.push ? origin[0] * (svg ? svg.width : element.offsetWidth || 0) : origin.x;
+    y = origin.push ? origin[1] * (svg ? svg.height : element.offsetHeight || 0) : origin.y;
+  }
+
+  return parentMatrix.apply(x || y ? m.apply({
+    x: x,
+    y: y
+  }) : {
+    x: m.e,
+    y: m.f
+  });
+},
+    _getAlignMatrix = function _getAlignMatrix(fromElement, toElement, fromOrigin, toOrigin) {
+  var parentMatrix = getGlobalMatrix(fromElement.parentNode, true, true),
+      m = parentMatrix.clone().multiply(getGlobalMatrix(toElement)),
+      fromPoint = _originToPoint(fromElement, fromOrigin, parentMatrix),
+      _originToPoint2 = _originToPoint(toElement, toOrigin, parentMatrix),
+      x = _originToPoint2.x,
+      y = _originToPoint2.y,
+      p;
+
+  m.e = m.f = 0;
+
+  if (toOrigin === "auto" && toElement.getTotalLength && toElement.tagName.toLowerCase() === "path") {
+    p = toElement.getAttribute("d").match(_numExp) || [];
+    p = m.apply({
+      x: +p[0],
+      y: +p[1]
+    });
+    x += p.x;
+    y += p.y;
+  } //if (p || (toElement.getBBox && fromElement.getBBox && toElement.ownerSVGElement === fromElement.ownerSVGElement)) {
+
+
+  if (p) {
+    p = m.apply(toElement.getBBox());
+    x -= p.x;
+    y -= p.y;
+  }
+
+  m.e = x - fromPoint.x;
+  m.f = y - fromPoint.y;
+  return m;
+},
+    _align = function _align(rawPath, target, _ref) {
+  var align = _ref.align,
+      matrix = _ref.matrix,
+      offsetX = _ref.offsetX,
+      offsetY = _ref.offsetY,
+      alignOrigin = _ref.alignOrigin;
+
+  var x = rawPath[0][0],
+      y = rawPath[0][1],
+      curX = _getPropNum(target, "x"),
+      curY = _getPropNum(target, "y"),
+      alignTarget,
+      m,
+      p;
+
+  if (!rawPath || !rawPath.length) {
+    return getRawPath("M0,0L0,0");
+  }
+
+  if (align) {
+    if (align === "self" || (alignTarget = _toArray(align)[0] || target) === target) {
+      transformRawPath(rawPath, 1, 0, 0, 1, curX - x, curY - y);
+    } else {
+      if (alignOrigin && alignOrigin[2] !== false) {
+        gsap.set(target, {
+          transformOrigin: alignOrigin[0] * 100 + "% " + alignOrigin[1] * 100 + "%"
+        });
+      } else {
+        alignOrigin = [_getPropNum(target, "xPercent") / -100, _getPropNum(target, "yPercent") / -100];
+      }
+
+      m = _getAlignMatrix(target, alignTarget, alignOrigin, "auto");
+      p = m.apply({
+        x: x,
+        y: y
+      });
+      transformRawPath(rawPath, m.a, m.b, m.c, m.d, curX + m.e - (p.x - m.e), curY + m.f - (p.y - m.f));
+    }
+  }
+
+  if (matrix) {
+    transformRawPath(rawPath, matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+  } else if (offsetX || offsetY) {
+    transformRawPath(rawPath, 1, 0, 0, 1, offsetX || 0, offsetY || 0);
+  }
+
+  return rawPath;
+},
+    _addDimensionalPropTween = function _addDimensionalPropTween(plugin, target, property, rawPath, pathProperty, forceUnit) {
+  var cache = target._gsap,
+      harness = cache.harness,
+      alias = harness && harness.aliases && harness.aliases[property],
+      prop = alias && alias.indexOf(",") < 0 ? alias : property,
+      pt = plugin._pt = new PropTween(plugin._pt, target, prop, 0, 0, _emptyFunc, 0, cache.set(target, prop, plugin));
+  pt.u = _getUnit(cache.get(target, prop, forceUnit)) || 0;
+  pt.path = rawPath;
+  pt.pp = pathProperty;
+
+  plugin._props.push(prop);
+},
+    _sliceModifier = function _sliceModifier(start, end) {
+  return function (rawPath) {
+    return start || end !== 1 ? sliceRawPath(rawPath, start, end) : rawPath;
+  };
+};
+
+export var MotionPathPlugin = {
+  version: "3.12.5",
+  name: "motionPath",
+  register: function register(core, Plugin, propTween) {
+    gsap = core;
+    _getUnit = gsap.utils.getUnit;
+    _toArray = gsap.utils.toArray;
+    _getStyleSaver = gsap.core.getStyleSaver;
+
+    _reverting = gsap.core.reverting || function () {};
+
+    PropTween = propTween;
+  },
+  init: function init(target, vars, tween) {
+    if (!gsap) {
+      console.warn("Please gsap.registerPlugin(MotionPathPlugin)");
+      return false;
+    }
+
+    if (!(typeof vars === "object" && !vars.style) || !vars.path) {
+      vars = {
+        path: vars
+      };
+    }
+
+    var rawPaths = [],
+        _vars = vars,
+        path = _vars.path,
+        autoRotate = _vars.autoRotate,
+        unitX = _vars.unitX,
+        unitY = _vars.unitY,
+        x = _vars.x,
+        y = _vars.y,
+        firstObj = path[0],
+        slicer = _sliceModifier(vars.start, "end" in vars ? vars.end : 1),
+        rawPath,
+        p;
+
+    this.rawPaths = rawPaths;
+    this.target = target;
+    this.tween = tween;
+    this.styles = _getStyleSaver && _getStyleSaver(target, "transform");
+
+    if (this.rotate = autoRotate || autoRotate === 0) {
+      //get the rotational data FIRST so that the setTransform() method is called in the correct order in the render() loop - rotation gets set last.
+      this.rOffset = parseFloat(autoRotate) || 0;
+      this.radians = !!vars.useRadians;
+      this.rProp = vars.rotation || "rotation"; // rotation property
+
+      this.rSet = target._gsap.set(target, this.rProp, this); // rotation setter
+
+      this.ru = _getUnit(target._gsap.get(target, this.rProp)) || 0; // rotation units
+    }
+
+    if (Array.isArray(path) && !("closed" in path) && typeof firstObj !== "number") {
+      for (p in firstObj) {
+        if (!x && ~_xProps.indexOf(p)) {
+          x = p;
+        } else if (!y && ~_yProps.indexOf(p)) {
+          y = p;
+        }
+      }
+
+      if (x && y) {
+        //correlated values
+        rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray(_populateSegmentFromArray([], path, x, 0), path, y, 1), target, x, y, slicer, vars, unitX || _getUnit(path[0][x]), unitY || _getUnit(path[0][y])));
+      } else {
+        x = y = 0;
+      }
+
+      for (p in firstObj) {
+        p !== x && p !== y && rawPaths.push(_segmentToRawPath(this, _populateSegmentFromArray([], path, p, 2), target, p, 0, slicer, vars, _getUnit(path[0][p])));
+      }
+    } else {
+      rawPath = slicer(_align(getRawPath(vars.path), target, vars));
+      cacheRawPathMeasurements(rawPath, vars.resolution);
+      rawPaths.push(rawPath);
+
+      _addDimensionalPropTween(this, target, vars.x || "x", rawPath, "x", vars.unitX || "px");
+
+      _addDimensionalPropTween(this, target, vars.y || "y", rawPath, "y", vars.unitY || "px");
+    }
+  },
+  render: function render(ratio, data) {
+    var rawPaths = data.rawPaths,
+        i = rawPaths.length,
+        pt = data._pt;
+
+    if (data.tween._time || !_reverting()) {
+      if (ratio > 1) {
+        ratio = 1;
+      } else if (ratio < 0) {
+        ratio = 0;
+      }
+
+      while (i--) {
+        getPositionOnPath(rawPaths[i], ratio, !i && data.rotate, rawPaths[i]);
+      }
+
+      while (pt) {
+        pt.set(pt.t, pt.p, pt.path[pt.pp] + pt.u, pt.d, ratio);
+        pt = pt._next;
+      }
+
+      data.rotate && data.rSet(data.target, data.rProp, rawPaths[0].angle * (data.radians ? _DEG2RAD : 1) + data.rOffset + data.ru, data, ratio);
+    } else {
+      data.styles.revert();
+    }
+  },
+  getLength: function getLength(path) {
+    return cacheRawPathMeasurements(getRawPath(path)).totalLength;
+  },
+  sliceRawPath: sliceRawPath,
+  getRawPath: getRawPath,
+  pointsToSegment: pointsToSegment,
+  stringToRawPath: stringToRawPath,
+  rawPathToString: rawPathToString,
+  transformRawPath: transformRawPath,
+  getGlobalMatrix: getGlobalMatrix,
+  getPositionOnPath: getPositionOnPath,
+  cacheRawPathMeasurements: cacheRawPathMeasurements,
+  convertToPath: function convertToPath(targets, swap) {
+    return _toArray(targets).map(function (target) {
+      return _convertToPath(target, swap !== false);
+    });
+  },
+  convertCoordinates: function convertCoordinates(fromElement, toElement, point) {
+    var m = getGlobalMatrix(toElement, true, true).multiply(getGlobalMatrix(fromElement));
+    return point ? m.apply(point) : m;
+  },
+  getAlignMatrix: _getAlignMatrix,
+  getRelativePosition: function getRelativePosition(fromElement, toElement, fromOrigin, toOrigin) {
+    var m = _getAlignMatrix(fromElement, toElement, fromOrigin, toOrigin);
+
+    return {
+      x: m.e,
+      y: m.f
+    };
+  },
+  arrayToRawPath: function arrayToRawPath(value, vars) {
+    vars = vars || {};
+
+    var segment = _populateSegmentFromArray(_populateSegmentFromArray([], value, vars.x || "x", 0), value, vars.y || "y", 1);
+
+    vars.relative && _relativize(segment);
+    return [vars.type === "cubic" ? segment : pointsToSegment(segment, vars.curviness)];
+  }
+};
+_getGSAP() && gsap.registerPlugin(MotionPathPlugin);
+export { MotionPathPlugin as default };
\ No newline at end of file

src/utils/gsap/dist/matrix.ts

+/*!
+ * matrix 3.12.5
+ * https://gsap.com
+ *
+ * Copyright 2008-2024, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license or for
+ * Club GSAP members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var _doc,
+    _win,
+    _docElement,
+    _body,
+    _divContainer,
+    _svgContainer,
+    _identityMatrix,
+    _gEl,
+    _transformProp = "transform",
+    _transformOriginProp = _transformProp + "Origin",
+    _hasOffsetBug,
+    _setDoc = function _setDoc(element) {
+  var doc = element.ownerDocument || element;
+
+  if (!(_transformProp in element.style) && "msTransform" in element.style) {
+    //to improve compatibility with old Microsoft browsers
+    _transformProp = "msTransform";
+    _transformOriginProp = _transformProp + "Origin";
+  }
+
+  while (doc.parentNode && (doc = doc.parentNode)) {}
+
+  _win = window;
+  _identityMatrix = new Matrix2D();
+
+  if (doc) {
+    _doc = doc;
+    _docElement = doc.documentElement;
+    _body = doc.body;
+    _gEl = _doc.createElementNS("http://www.w3.org/2000/svg", "g"); // prevent any existing CSS from transforming it
+
+    _gEl.style.transform = "none"; // now test for the offset reporting bug. Use feature detection instead of browser sniffing to make things more bulletproof and future-proof. Hopefully Safari will fix their bug soon.
+
+    var d1 = doc.createElement("div"),
+        d2 = doc.createElement("div"),
+        root = doc && (doc.body || doc.firstElementChild);
+
+    if (root && root.appendChild) {
+      root.appendChild(d1);
+      d1.appendChild(d2);
+      d1.setAttribute("style", "position:static;transform:translate3d(0,0,1px)");
+      _hasOffsetBug = d2.offsetParent !== d1;
+      root.removeChild(d1);
+    }
+  }
+
+  return doc;
+},
+    _forceNonZeroScale = function _forceNonZeroScale(e) {
+  // walks up the element's ancestors and finds any that had their scale set to 0 via GSAP, and changes them to 0.0001 to ensure that measurements work. Firefox has a bug that causes it to incorrectly report getBoundingClientRect() when scale is 0.
+  var a, cache;
+
+  while (e && e !== _body) {
+    cache = e._gsap;
+    cache && cache.uncache && cache.get(e, "x"); // force re-parsing of transforms if necessary
+
+    if (cache && !cache.scaleX && !cache.scaleY && cache.renderTransform) {
+      cache.scaleX = cache.scaleY = 1e-4;
+      cache.renderTransform(1, cache);
+      a ? a.push(cache) : a = [cache];
+    }
+
+    e = e.parentNode;
+  }
+
+  return a;
+},
+    // possible future addition: pass an element to _forceDisplay() and it'll walk up all its ancestors and make sure anything with display: none is set to display: block, and if there's no parentNode, it'll add it to the body. It returns an Array that you can then feed to _revertDisplay() to have it revert all the changes it made.
+// _forceDisplay = e => {
+// 	let a = [],
+// 		parent;
+// 	while (e && e !== _body) {
+// 		parent = e.parentNode;
+// 		(_win.getComputedStyle(e).display === "none" || !parent) && a.push(e, e.style.display, parent) && (e.style.display = "block");
+// 		parent || _body.appendChild(e);
+// 		e = parent;
+// 	}
+// 	return a;
+// },
+// _revertDisplay = a => {
+// 	for (let i = 0; i < a.length; i+=3) {
+// 		a[i+1] ? (a[i].style.display = a[i+1]) : a[i].style.removeProperty("display");
+// 		a[i+2] || a[i].parentNode.removeChild(a[i]);
+// 	}
+// },
+_svgTemps = [],
+    //we create 3 elements for SVG, and 3 for other DOM elements and cache them for performance reasons. They get nested in _divContainer and _svgContainer so that just one element is added to the DOM on each successive attempt. Again, performance is key.
+_divTemps = [],
+    _getDocScrollTop = function _getDocScrollTop() {
+  return _win.pageYOffset || _doc.scrollTop || _docElement.scrollTop || _body.scrollTop || 0;
+},
+    _getDocScrollLeft = function _getDocScrollLeft() {
+  return _win.pageXOffset || _doc.scrollLeft || _docElement.scrollLeft || _body.scrollLeft || 0;
+},
+    _svgOwner = function _svgOwner(element) {
+  return element.ownerSVGElement || ((element.tagName + "").toLowerCase() === "svg" ? element : null);
+},
+    _isFixed = function _isFixed(element) {
+  if (_win.getComputedStyle(element).position === "fixed") {
+    return true;
+  }
+
+  element = element.parentNode;
+
+  if (element && element.nodeType === 1) {
+    // avoid document fragments which will throw an error.
+    return _isFixed(element);
+  }
+},
+    _createSibling = function _createSibling(element, i) {
+  if (element.parentNode && (_doc || _setDoc(element))) {
+    var svg = _svgOwner(element),
+        ns = svg ? svg.getAttribute("xmlns") || "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml",
+        type = svg ? i ? "rect" : "g" : "div",
+        x = i !== 2 ? 0 : 100,
+        y = i === 3 ? 100 : 0,
+        css = "position:absolute;display:block;pointer-events:none;margin:0;padding:0;",
+        e = _doc.createElementNS ? _doc.createElementNS(ns.replace(/^https/, "http"), type) : _doc.createElement(type);
+
+    if (i) {
+      if (!svg) {
+        if (!_divContainer) {
+          _divContainer = _createSibling(element);
+          _divContainer.style.cssText = css;
+        }
+
+        e.style.cssText = css + "width:0.1px;height:0.1px;top:" + y + "px;left:" + x + "px";
+
+        _divContainer.appendChild(e);
+      } else {
+        _svgContainer || (_svgContainer = _createSibling(element));
+        e.setAttribute("width", 0.01);
+        e.setAttribute("height", 0.01);
+        e.setAttribute("transform", "translate(" + x + "," + y + ")");
+
+        _svgContainer.appendChild(e);
+      }
+    }
+
+    return e;
+  }
+
+  throw "Need document and parent.";
+},
+    _consolidate = function _consolidate(m) {
+  // replaces SVGTransformList.consolidate() because a bug in Firefox causes it to break pointer events. See https://gsap.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800
+  var c = new Matrix2D(),
+      i = 0;
+
+  for (; i < m.numberOfItems; i++) {
+    c.multiply(m.getItem(i).matrix);
+  }
+
+  return c;
+},
+    _getCTM = function _getCTM(svg) {
+  var m = svg.getCTM(),
+      transform;
+
+  if (!m) {
+    // Firefox returns null for getCTM() on root <svg> elements, so this is a workaround using a <g> that we temporarily append.
+    transform = svg.style[_transformProp];
+    svg.style[_transformProp] = "none"; // a bug in Firefox causes css transforms to contaminate the getCTM()
+
+    svg.appendChild(_gEl);
+    m = _gEl.getCTM();
+    svg.removeChild(_gEl);
+    transform ? svg.style[_transformProp] = transform : svg.style.removeProperty(_transformProp.replace(/([A-Z])/g, "-$1").toLowerCase());
+  }
+
+  return m || _identityMatrix.clone(); // Firefox will still return null if the <svg> has a width/height of 0 in the browser.
+},
+    _placeSiblings = function _placeSiblings(element, adjustGOffset) {
+  var svg = _svgOwner(element),
+      isRootSVG = element === svg,
+      siblings = svg ? _svgTemps : _divTemps,
+      parent = element.parentNode,
+      container,
+      m,
+      b,
+      x,
+      y,
+      cs;
+
+  if (element === _win) {
+    return element;
+  }
+
+  siblings.length || siblings.push(_createSibling(element, 1), _createSibling(element, 2), _createSibling(element, 3));
+  container = svg ? _svgContainer : _divContainer;
+
+  if (svg) {
+    if (isRootSVG) {
+      b = _getCTM(element);
+      x = -b.e / b.a;
+      y = -b.f / b.d;
+      m = _identityMatrix;
+    } else if (element.getBBox) {
+      b = element.getBBox();
+      m = element.transform ? element.transform.baseVal : {}; // IE11 doesn't follow the spec.
+
+      m = !m.numberOfItems ? _identityMatrix : m.numberOfItems > 1 ? _consolidate(m) : m.getItem(0).matrix; // don't call m.consolidate().matrix because a bug in Firefox makes pointer events not work when consolidate() is called on the same tick as getBoundingClientRect()! See https://gsap.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800
+
+      x = m.a * b.x + m.c * b.y;
+      y = m.b * b.x + m.d * b.y;
+    } else {
+      // may be a <mask> which has no getBBox() so just use defaults instead of throwing errors.
+      m = new Matrix2D();
+      x = y = 0;
+    }
+
+    if (adjustGOffset && element.tagName.toLowerCase() === "g") {
+      x = y = 0;
+    }
+
+    (isRootSVG ? svg : parent).appendChild(container);
+    container.setAttribute("transform", "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + (m.e + x) + "," + (m.f + y) + ")");
+  } else {
+    x = y = 0;
+
+    if (_hasOffsetBug) {
+      // some browsers (like Safari) have a bug that causes them to misreport offset values. When an ancestor element has a transform applied, it's supposed to treat it as if it's position: relative (new context). Safari botches this, so we need to find the closest ancestor (between the element and its offsetParent) that has a transform applied and if one is found, grab its offsetTop/Left and subtract them to compensate.
+      m = element.offsetParent;
+      b = element;
+
+      while (b && (b = b.parentNode) && b !== m && b.parentNode) {
+        if ((_win.getComputedStyle(b)[_transformProp] + "").length > 4) {
+          x = b.offsetLeft;
+          y = b.offsetTop;
+          b = 0;
+        }
+      }
+    }
+
+    cs = _win.getComputedStyle(element);
+
+    if (cs.position !== "absolute" && cs.position !== "fixed") {
+      m = element.offsetParent;
+
+      while (parent && parent !== m) {
+        // if there's an ancestor element between the element and its offsetParent that's scrolled, we must factor that in.
+        x += parent.scrollLeft || 0;
+        y += parent.scrollTop || 0;
+        parent = parent.parentNode;
+      }
+    }
+
+    b = container.style;
+    b.top = element.offsetTop - y + "px";
+    b.left = element.offsetLeft - x + "px";
+    b[_transformProp] = cs[_transformProp];
+    b[_transformOriginProp] = cs[_transformOriginProp]; // b.border = m.border;
+    // b.borderLeftStyle = m.borderLeftStyle;
+    // b.borderTopStyle = m.borderTopStyle;
+    // b.borderLeftWidth = m.borderLeftWidth;
+    // b.borderTopWidth = m.borderTopWidth;
+
+    b.position = cs.position === "fixed" ? "fixed" : "absolute";
+    element.parentNode.appendChild(container);
+  }
+
+  return container;
+},
+    _setMatrix = function _setMatrix(m, a, b, c, d, e, f) {
+  m.a = a;
+  m.b = b;
+  m.c = c;
+  m.d = d;
+  m.e = e;
+  m.f = f;
+  return m;
+};
+
+export var Matrix2D = /*#__PURE__*/function () {
+  function Matrix2D(a, b, c, d, e, f) {
+    if (a === void 0) {
+      a = 1;
+    }
+
+    if (b === void 0) {
+      b = 0;
+    }
+
+    if (c === void 0) {
+      c = 0;
+    }
+
+    if (d === void 0) {
+      d = 1;
+    }
+
+    if (e === void 0) {
+      e = 0;
+    }
+
+    if (f === void 0) {
+      f = 0;
+    }
+
+    _setMatrix(this, a, b, c, d, e, f);
+  }
+
+  var _proto = Matrix2D.prototype;
+
+  _proto.inverse = function inverse() {
+    var a = this.a,
+        b = this.b,
+        c = this.c,
+        d = this.d,
+        e = this.e,
+        f = this.f,
+        determinant = a * d - b * c || 1e-10;
+    return _setMatrix(this, d / determinant, -b / determinant, -c / determinant, a / determinant, (c * f - d * e) / determinant, -(a * f - b * e) / determinant);
+  };
+
+  _proto.multiply = function multiply(matrix) {
+    var a = this.a,
+        b = this.b,
+        c = this.c,
+        d = this.d,
+        e = this.e,
+        f = this.f,
+        a2 = matrix.a,
+        b2 = matrix.c,
+        c2 = matrix.b,
+        d2 = matrix.d,
+        e2 = matrix.e,
+        f2 = matrix.f;
+    return _setMatrix(this, a2 * a + c2 * c, a2 * b + c2 * d, b2 * a + d2 * c, b2 * b + d2 * d, e + e2 * a + f2 * c, f + e2 * b + f2 * d);
+  };
+
+  _proto.clone = function clone() {
+    return new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f);
+  };
+
+  _proto.equals = function equals(matrix) {
+    var a = this.a,
+        b = this.b,
+        c = this.c,
+        d = this.d,
+        e = this.e,
+        f = this.f;
+    return a === matrix.a && b === matrix.b && c === matrix.c && d === matrix.d && e === matrix.e && f === matrix.f;
+  };
+
+  _proto.apply = function apply(point, decoratee) {
+    if (decoratee === void 0) {
+      decoratee = {};
+    }
+
+    var x = point.x,
+        y = point.y,
+        a = this.a,
+        b = this.b,
+        c = this.c,
+        d = this.d,
+        e = this.e,
+        f = this.f;
+    decoratee.x = x * a + y * c + e || 0;
+    decoratee.y = x * b + y * d + f || 0;
+    return decoratee;
+  };
+
+  return Matrix2D;
+}(); // Feed in an element and it'll return a 2D matrix (optionally inverted) so that you can translate between coordinate spaces.
+// Inverting lets you translate a global point into a local coordinate space. No inverting lets you go the other way.
+// We needed this to work around various browser bugs, like Firefox doesn't accurately report getScreenCTM() when there
+// are transforms applied to ancestor elements.
+// The matrix math to convert any x/y coordinate is as follows, which is wrapped in a convenient apply() method of Matrix2D above:
+//     tx = m.a * x + m.c * y + m.e
+//     ty = m.b * x + m.d * y + m.f
+
+export function getGlobalMatrix(element, inverse, adjustGOffset, includeScrollInFixed) {
+  // adjustGOffset is typically used only when grabbing an element's PARENT's global matrix, and it ignores the x/y offset of any SVG <g> elements because they behave in a special way.
+  if (!element || !element.parentNode || (_doc || _setDoc(element)).documentElement === element) {
+    return new Matrix2D();
+  }
+
+  var zeroScales = _forceNonZeroScale(element),
+      svg = _svgOwner(element),
+      temps = svg ? _svgTemps : _divTemps,
+      container = _placeSiblings(element, adjustGOffset),
+      b1 = temps[0].getBoundingClientRect(),
+      b2 = temps[1].getBoundingClientRect(),
+      b3 = temps[2].getBoundingClientRect(),
+      parent = container.parentNode,
+      isFixed = !includeScrollInFixed && _isFixed(element),
+      m = new Matrix2D((b2.left - b1.left) / 100, (b2.top - b1.top) / 100, (b3.left - b1.left) / 100, (b3.top - b1.top) / 100, b1.left + (isFixed ? 0 : _getDocScrollLeft()), b1.top + (isFixed ? 0 : _getDocScrollTop()));
+
+  parent.removeChild(container);
+
+  if (zeroScales) {
+    b1 = zeroScales.length;
+
+    while (b1--) {
+      b2 = zeroScales[b1];
+      b2.scaleX = b2.scaleY = 0;
+      b2.renderTransform(1, b2);
+    }
+  }
+
+  return inverse ? m.inverse() : m;
+}
+export { _getDocScrollTop, _getDocScrollLeft, _setDoc, _isFixed, _getCTM }; // export function getMatrix(element) {
+// 	_doc || _setDoc(element);
+// 	let m = (_win.getComputedStyle(element)[_transformProp] + "").substr(7).match(/[-.]*\d+[.e\-+]*\d*[e\-\+]*\d*/g),
+// 		is2D = m && m.length === 6;
+// 	return !m || m.length < 6 ? new Matrix2D() : new Matrix2D(+m[0], +m[1], +m[is2D ? 2 : 4], +m[is2D ? 3 : 5], +m[is2D ? 4 : 12], +m[is2D ? 5 : 13]);
+// }
\ No newline at end of file

src/vite-env.d.ts

@@ -10,4 +10,6 @@ interface ImportMetaEnv {
     readonly env: ImportMetaEnv;
   }
 
-  
\ No newline at end of file
+  declare module "gsap/all.js" {
+    export default any;
+  }
\ No newline at end of file