How to use the animejs.set 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 soulextract / soulextract.com / src / components / Background / Background.js View on Github external
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' });
  }
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 / Menu / Menu.js View on Github external
animateNormalEnter () {
    const { energy, onEnter } = this.props;
    const { duration } = energy;

    const divisors = this.element.querySelectorAll('b');
    const links = this.element.querySelectorAll('a');

    anime.set(links, { opacity: 1 });

    anime({
      targets: divisors,
      easing: 'easeOutCubic',
      scaleY: [0, 1],
      duration: duration.enter,
      delay: (divisor, index) => index * duration.stagger,
      complete: () => onEnter && onEnter()
    });
  }
github soulextract / soulextract.com / src / components / Footer / Footer.js View on Github external
reset () {
    const { energy } = this.props;
    const show = energy.entering || energy.entered;
    const shapes = Array.from(this.svg.querySelectorAll('path'));

    this.setState({ show });

    shapes.forEach(shape => {
      shape.removeAttribute('style');
      shape.removeAttribute('stroke-dasharray');
      shape.removeAttribute('stroke-dashoffset');
    });

    anime.set(this.element, { translateY: 0 });
    anime.set(shapes, { opacity: show ? 1 : 0 });
  }
github soulextract / soulextract.com / src / components / Footer / Footer.js View on Github external
reset () {
    const { energy } = this.props;
    const show = energy.entering || energy.entered;
    const shapes = Array.from(this.svg.querySelectorAll('path'));

    this.setState({ show });

    shapes.forEach(shape => {
      shape.removeAttribute('style');
      shape.removeAttribute('stroke-dasharray');
      shape.removeAttribute('stroke-dashoffset');
    });

    anime.set(this.element, { translateY: 0 });
    anime.set(shapes, { opacity: show ? 1 : 0 });
  }
github soulextract / soulextract.com / src / components / Header / Header.js View on Github external
reset () {
    const { energy } = this.props;
    const show = energy.entering || energy.entered;
    const shapes = Array.from(this.svg.querySelectorAll('path'));

    this.setState({ show });

    shapes.forEach(shape => {
      shape.removeAttribute('style');
      shape.removeAttribute('stroke-dasharray');
      shape.removeAttribute('stroke-dashoffset');
    });

    anime.set(this.element, { translateY: 0 });
    anime.set(shapes, { opacity: show ? 1 : 0 });
  }
github soulextract / soulextract.com / src / components / Background / Background.js View on Github external
          begin: () => anime.set(path, { opacity: 1 }),
          change: anim => {
github soulextract / soulextract.com / src / components / Footer / Footer.js View on Github external
enter () {
    const shapes = Array.from(this.svg.querySelectorAll('path'));
    const [ground, line1, slash1, line2, line3, slash2, line4] = shapes;
    const duration = this.getDurationEnter();

    anime.set(shapes, { opacity: 0 });

    this.playSound();

    anime({
      targets: this.element,
      translateY: ['100%', 0],
      easing: 'easeOutCubic',
      duration,
      complete: () => this.stopSound()
    });

    anime({
      targets: ground,
      opacity: [0, 1],
      easing: 'easeOutCubic',
      duration,
github soulextract / soulextract.com / src / components / Header / Header.js View on Github external
const durationGroup2 = duration * scaleGroup2;

    anime.set(shapesGroup2, { opacity: 1 });
    anime({
      targets: shapesGroup2,
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'linear',
      delay: durationGroup1,
      duration: durationGroup2
    });

    const shapesGroup3 = [line2, line3];
    const scaleGroup3 = shapesGroup3[0].getTotalLength() / this.element.offsetWidth;
    const durationGroup3 = duration * scaleGroup3;

    anime.set(shapesGroup3, { opacity: 1 });
    anime({
      targets: shapesGroup3,
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'linear',
      delay: durationGroup1,
      duration: durationGroup3
    });
  }