How to use animejs - 10 common examples

console.log("I wonder if anyone will ever actually read this.");
});

const usesEnums = anime({
	targets: ".usingEnumsIsAReallyHandyThing",
	direction: "reverse",
	easing: "inoutexpo",
	someProperty: "+=4000"
});

const bezier = anime.bezier(0, 0, 100, 100);
// anime.speed = 100000000;
(anime as any).speed = 4000;
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
const runningAnims = anime.running;
anime.remove(".tiny-divvy-div");

anime.timeline().add({
	targets: [],
	duration: 1000,
	easing: "linear",
}, 0);

anime({
	targets: ".mizi",
	keyframes: [
    {translateY: -40, delay: 123},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},
		{translateY: 0}
	],

tl.finished.then(() => {
	console.log("I wonder if anyone will ever actually read this.");
});

const usesEnums = anime({
	targets: ".usingEnumsIsAReallyHandyThing",
	direction: "reverse",
	easing: "inoutexpo",
	someProperty: "+=4000"
});

const bezier = anime.bezier(0, 0, 100, 100);
// anime.speed = 100000000;
(anime as any).speed = 4000;
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
const runningAnims = anime.running;
anime.remove(".tiny-divvy-div");

anime.timeline().add({
	targets: [],
	duration: 1000,
	easing: "linear",
}, 0);

anime({
	targets: ".mizi",
	keyframes: [
    {translateY: -40, delay: 123},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},
		{translateY: 0}

test2.reverse();
test3.pause();
tl.seek(4000);

tl.finished.then(() => {
	console.log("I wonder if anyone will ever actually read this.");
});

const usesEnums = anime({
	targets: ".usingEnumsIsAReallyHandyThing",
	direction: "reverse",
	easing: "inoutexpo",
	someProperty: "+=4000"
});

const bezier = anime.bezier(0, 0, 100, 100);
// anime.speed = 100000000;
(anime as any).speed = 4000;
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
const runningAnims = anime.running;
anime.remove(".tiny-divvy-div");

anime.timeline().add({
	targets: [],
	duration: 1000,
	easing: "linear",
}, 0);

anime({
	targets: ".mizi",
	keyframes: [
    {translateY: -40, delay: 123},

tl.finished.then(() => {
	console.log("I wonder if anyone will ever actually read this.");
});

const usesEnums = anime({
	targets: ".usingEnumsIsAReallyHandyThing",
	direction: "reverse",
	easing: "inoutexpo",
	someProperty: "+=4000"
});

const bezier = anime.bezier(0, 0, 100, 100);
// anime.speed = 100000000;
(anime as any).speed = 4000;
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
const runningAnims = anime.running;
anime.remove(".tiny-divvy-div");

anime.timeline().add({
	targets: [],
	duration: 1000,
	easing: "linear",
}, 0);

anime({
	targets: ".mizi",
	keyframes: [
    {translateY: -40, delay: 123},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},

return new MoveLank(() => {
      if (resource) {
        this.addLank(key, this.loader.getThangType(resource), thang)
      }
      if (!this.lanks[key]) {
        throw new Error('You are using a lank that hasn\'t been created yet, in setup!')
      }
      // normalize parameters
      pos.x = pos.x !== undefined ? pos.x : this.lanks[key].thang.pos.x
      pos.y = pos.y !== undefined ? pos.y : this.lanks[key].thang.pos.y
      if (this.lanks[key].thang.pos.x === pos.x && this.lanks[key].thang.pos.y === pos.y) {
        console.warn('Are you accidentally not moving the Lank?')
      }
      const lankStateChanged = () => { this.lanks[key].thang.stateChanged = true }
      const animation = anime({
        targets: this.lanks[key].thang.pos,
        x: pos.x,
        y: pos.y,
        duration: ms,
        autoplay: false,
        delay: 500, // Hack to provide some time for lank to load.
        easing: 'easeInOutQuart',
        // Inform update engine to render thang at new position.
        update: lankStateChanged,
        complete: lankStateChanged
      })

      return {
        lankStateChanged,
        animation,
        run: () => new Promise((resolve, reject) => {

componentDidMount(props) {
    let membershipId = this.state.membershipId;

    // If the user reloads or visits this page with a copied address,
    // then use the query parameters for our requests.
    if (this.props.membershipId === '') {
      let parsed = queryString.parse(this.props.location.search);
      membershipId = parsed.membershipId;
      this.fetchCharacterData(parsed.platform, parsed.membershipId);
    } else {
      this.fetchCharacterData(this.props.platform, this.props.membershipId);
    }

    const characterList = document.querySelector('.character-select');
    anime({
      targets: characterList,
      duration: 1000,
      easing: 'easeInOutQuart',
      opacity: [0, 1],
      translateY: [20, 0]
    })
  }

async function animateLibraries(deck) {
  // create a tween from enterProgress=0 to enterProgress=1
  const animation = anime({
    duration: librariesAnimation.duration,
    targets: librariesAnimation,
    enterProgress: 1,
    easing: 'linear',
    update() {
      // each tick, update the DeckGL layers with new values
      updateLayers(deck);
    },
  });

  updateLayers(deck);

  // wait for the animation to finish
  await animation.finished;
}

componentDidUpdate () {
    // Because we are re-rendering animated elements every time the component
    // is updated, we need to re-start the animations or reset the elements.
    this.startStandByAnimation();
    anime.set(this.dotLinesContainer.childNodes, { strokeDasharray: '3 7' });
  }

private async handleMouseEnter(value: string, uid: number) {
    if (this.disableMouseEnter) {
      // 键盘 up 和 down 操作会自动处理滚动条
      // 当滚动条改变后如果鼠标还在语言范围内会再次触发 mouseenter 事件
      // 为了避免视觉抖动执行 up 和 down 操作时不要执行原逻辑
      this.disableMouseEnter = false;
    } else {
      if (anime.running.length > 0) {
        // 动画过程中设置 selectedValue 会导致动画卡顿
        await Promise.all(anime.running.map(x => x.finished));
        await sleep(100);
      }
      this.selectedValue = value;
      this.selectedOptionId = uid;
    }
  }

function clear() {
    // stop all animations, clear shapes
    stoppedAnimations.length = 0;
    anime.running.forEach(a => a.pause());
    anime.running.length = 0;
    traverse('onTrigger', 'clear');
  }