Mo.jsのGetting startedの実装

app-mojs.js

import mojs from "@mojs/core";

const bouncyCircle = new mojs.Shape({
    parent: '#bouncyCircle',
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000,
    width: 200,
    height: 200,
    isYoyo: true,
    isShowStart: true,
    easing: 'elastic.inout',
    repeat: 3,
});

bouncyCircle.play();

const spinner = new mojs.Shape({
    parent: '#spinner',
    shape: 'circle',
    stroke: '#FC46AD',
    strokeDasharray: '125, 125',
    strokeDashoffset: { '0': '-125' },
    strokeWidth: 4,
    fill: 'none',
    left: '50%',
    top: '50%',
    rotate: { '-90': '270' },
    radius: 20,
    isShowStart: true,
    duration: 2000,
    easing: 'back.in',
})
    .then({
        rotate: { '-90': '270' },
        strokeDashoffset: { '-125': '-250' },
        duration: 3000,
        easing: 'cubic.out',
    });

spinner.play();