How to use the animejs.remove 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 DefinitelyTyped / DefinitelyTyped / types / animejs / animejs-tests.ts View on Github external
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}
	],
github soulextract / soulextract.com / src / components / Menu / Menu.js View on Github external
componentWillUnmount () {
    const elements = this.element.querySelectorAll('a, b');
    anime.remove(elements);

    window.removeEventListener('route-change', this.onURLChange);
  }
github pluginjs / pluginjs / modules / adapt-text / src / main.js View on Github external
const mouseleaveHandle = () => {
      if (this.is('disabled')) {
        return
      }
      anime.remove(this.element)
      anime({
        targets: this.element,
        textIndent: 0,
        duration: this.options.scrollResetSpeed,
        easing: 'linear',
        complete: () => setStyle('textOverflow', 'ellipsis', this.element)
      })
    }
    compose(
github christiandavid / gatsby-theme-byfolio / @christiandavid / gatsby-theme-byfolio / src / components / skill / animate-item.js View on Github external
item => {
          anime.remove(item)
          anime({
            targets: item,
            translateX: 0,
            translateY: 0,
            rotateZ: 0,
            duration: 400,
            easing:
              type === "static" ? "easeInOutExpo" : "easeOutElastic(1, .5)",
            complete: () => {
              e.target.style.zIndex = 1
            },
          })
        },
        false
github dreambo8563 / vue-piece-slider / src / piece / index.js View on Github external
animateItems(options) {
    const o = extend(
      {
        easing: "linear",
        remove: true
      },
      options,
      { targets: this.getItems(options.items) }
    );
    if (o.remove) {
      anime.remove(o.targets);
    }
    anime(o);
  }
};
github soulextract / soulextract.com / src / components / Header / Header.js View on Github external
stop () {
    const shapes = this.svg.querySelectorAll('path');

    anime.remove(shapes);
    anime.remove(this.element);
  }
github soulextract / soulextract.com / src / components / Background / Background.js View on Github external
stopStandByAnimation () {
    const { classes } = this.props;
    const circuitLineLights = Array.from(
      this.circuitContainer.querySelectorAll('.' + classes.circuitLineLight)
    );

    clearTimeout(this.standByStartId);
    clearTimeout(this.standByAnimationId);

    anime.remove(circuitLineLights);
    circuitLineLights.forEach(circuitLineLight => {
      circuitLineLight.removeAttribute('style');
    });
    anime.set(circuitLineLights, { opacity: 0 });
  }
github soulextract / soulextract.com / src / components / Footer / Footer.js View on Github external
stop () {
    const shapes = this.svg.querySelectorAll('path');

    anime.remove(shapes);
    anime.remove(this.element);
  }
github piotte13 / SIMD-Visualiser / src / ASMComponents / SequentialComponent.js View on Github external
}
        else if (!this.props.play === true && nextProps.play && nextProps.shouldBeVisible) {
            if (this.childAnimation) {
                this.childAnimation.play()
            }
        }

        if (!nextProps.shouldBeVisible && this.props.shouldBeVisible) {
            //Component is being hidden. Rewind animation.
            this.setState({touchable: false});
            if (this.sequentialHighlight)
                this.sequentialHighlight.clear();
            this.animeRef.seek(0);
            if (this.childAnimation) {
                this.childAnimation.seek(0);
                anime.remove(this.childAnimation);
                this.childAnimation = this.component.current.getAnimation()
            }
        }
        if (nextProps.shouldBeVisible && !this.props.shouldBeVisible) {
            //Start Animation.
            this.animeRef.restart();
            //Highlight code to show user, which part of the code is being represented by this animation.
            this.sequentialHighlight = this.highlightCode();

        }
    }