How to use the animejs/lib/anime.es.js function in animejs

To help you get started, we’ve selected a few animejs 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 codecombat / codecombat / ozaria / engine / cinematic / CinematicLankBoss.js View on Github external
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) => {
github codecombat / codecombat / app / views / play / cinematic / CinematicLankBoss.js View on Github external
return new MoveLank(() => {
      if (resource) {
        this.addLank(key, this.loader.getThangType(resource))
      }
      pos = pos || {}
      // 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) {
        return new Noop()
      }
      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 rerender thang at new position.
        update: lankStateChanged,
        complete: lankStateChanged
      })

      return {
        lankStateChanged,
        animation,
        run: () => new Promise((resolve, reject) => {
github AlesTsurko / cells / site / src / App.js View on Github external
const updateSubtitle = () => {
        const wordPosition = Math.round(Math.random() * (words.length - 1));
        const index = Math.round(
            Math.random() * (words[wordPosition].length - 1)
        );

        let transition = subtitle[wordPosition];

        anime({
            duration: 4000,
            easing: 'easeInOutCirc',
            update: () => {
                transition = interpolateString(
                    transition,
                    words[wordPosition][index]
                );
                let nextSubtitle = [ ...subtitle ];
                nextSubtitle[wordPosition] = transition;
                setSubtitle(nextSubtitle);
            }
        }).finished.then(updateSubtitle);
    };