How to use the @mathigon/boost.ease function in @mathigon/boost

To help you get started, we’ve selected a few @mathigon/boost examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mathigon / textbooks / content / polyhedra / components / anibutton.ts View on Github external
animate(p => {
      const s = p < 0.3 ? 0 : ease('elastic-out', 1.43 * p - 0.43);
      this.$text.css('transform', `scale(${s})`);
    }, 1000);
github mathigon / textbooks / content / shared / components / burst.ts View on Github external
await animate((p) => {
      const q = ease('sine-out', p);
      this.$ring.setAttr('r', radius[0] + 0.6 * q * radius[1]);
      this.$ring.setAttr('stroke-width', 0.25 * (1 - q) * radius[1]);

      const r = ease('exp-out', p);
      const r1 = radius[0] + (0.2 + 0.8 * r) * radius[1];
      const r2 = radius[0] + (0.55 + 0.45 * r) * radius[1];

      for (let i = 0; i < n; ++i) {
        const c = Math.cos(Math.PI * 2 * i / n);
        const s = Math.sin(Math.PI * 2 * i / n);
        this.$lines[i].setLine(
            {x: center[0] + c * r1, y: center[1] + s * r1},
            {x: center[0] + c * r2, y: center[1] + s * r2});
      }
    }, time).promise;
github mathigon / textbooks / content / shared / components / burst.ts View on Github external
await animate((p) => {
      const q = ease('sine-out', p);
      this.$ring.setAttr('r', radius[0] + 0.6 * q * radius[1]);
      this.$ring.setAttr('stroke-width', 0.25 * (1 - q) * radius[1]);

      const r = ease('exp-out', p);
      const r1 = radius[0] + (0.2 + 0.8 * r) * radius[1];
      const r2 = radius[0] + (0.55 + 0.45 * r) * radius[1];

      for (let i = 0; i < n; ++i) {
        const c = Math.cos(Math.PI * 2 * i / n);
        const s = Math.sin(Math.PI * 2 * i / n);
        this.$lines[i].setLine(
            {x: center[0] + c * r1, y: center[1] + s * r1},
            {x: center[0] + c * r2, y: center[1] + s * r2});
      }
    }, time).promise;