How to use the animejs 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 destefanis / destiny-medals / src / js / components / CharacterSelectList.js View on Github external
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]
    })
  }
github pbeshai / deckgl-point-animation / src / demo_DelayedPointLayer.js View on Github external
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;
}
github DefinitelyTyped / DefinitelyTyped / types / animejs / animejs-tests.ts View on Github external
translateY: '40px',
	color: [
		{ value: '#FF0000', duration: 2000 },
		{ value: '#00FF00', duration: 2000 },
		{ value: '#0000FF', duration: 2000 },
	],
	duration: () => {
		return 1000000000000;
	},
	update: callback,
	complete: callback
});

const someNodes = document.querySelector('button');

const test3 = anime({
	targets: someNodes,
	top: "-5000000em"
});

const tl = anime.timeline({
	loop: false,
	direction: 'normal'
});

tl.add({
	targets: ".tiny-divvy-div",
	scale: 10000000
});

const path = anime.path('#motionPath path');
github soulextract / soulextract.com / src / components / Button / Button.js View on Github external
exit () {
    const { energy } = this.props;
    const paths = this.svgElement.querySelectorAll('path');

    anime({
      targets: paths,
      strokeDashoffset: [0, getPathLength],
      easing: 'linear',
      duration: energy.duration.exit
    });
    anime({
      targets: this.backgroundElement,
      easing: 'linear',
      opacity: [1, 0],
      duration: energy.duration.enter
    });
  }
github pluginjs / pluginjs / modules / animate-text / src / effects / switchFade.js View on Github external
setupAnime() {
    anime(this.getContainerOptions())

    if (this.options.loop) {
      anime(
        Object.assign({}, this.getAnimeDefaultOptions(this.childrens), {
          loop: true,
          delay: (el, i) => i * this.options.duration
        })
      )
    } else {
      const childrens = this.childrens.map((el, index) => {
        if (index === this.childrens.length - 1) {
          return Object.assign(this.getAnimeDefaultOptions(el), {
            opacity: [[0, 1], 1],
            loop: false
          })
        }
        return Object.assign(this.getAnimeDefaultOptions(el), {
          loop: false
        })
github pluginjs / pluginjs / modules / animate-text / src / effects / charFadeDown.js View on Github external
return 60 * i
          }
        })
        .add({
          translateY: ['-0.7em', 0],
          easing: 'easeOutExpo',
          opacity: [0, 1],
          endDelay: 700
        })
        .add({
          translateY: [0, '0.4em'],
          easing: 'easeInExpo',
          opacity: [1, 0]
        })
    } else {
      anime({
        targets: this.chars,
        translateY: ['-0.7em', 0],
        opacity: [0, 1],
        easing: 'easeOutExpo',
        duration: this.options.duration,
        loop: false,
        delay(el, i) {
          return 60 * i
        }
      })
    }
  }
}
github helpscout / hsds-react / src / components / Animate / new.js View on Github external
getAnimationStyles (animationState = AnimationStates.ENTER) {
    const {
      duration,
      sequence
    } = this.props

    const animation = sequence.reduce((styles, seq) => {
      return Object.assign(
        styles,
        this.getAnimationStylesFromSequence(seq, animationState)
      )
    }, {})
    if (!Object.keys(animation).length) return null

    return anime(Object.assign(
      {
        targets: this.node,
        duration
      },
      animation))
  }
github pluginjs / pluginjs / modules / animate-text / src / effects / switchSlider.js View on Github external
setupAnime() {
    anime(this.getContainerOptions())

    if (this.options.loop) {
      anime(
        Object.assign({}, this.getAnimeDefaultOptions(this.childrens), {
          loop: true,
          delay: (el, i) => i * this.options.duration
        })
      )
    } else {
      const childrens = this.childrens.map((el, index) => {
        if (index === this.childrens.length - 1) {
          return Object.assign(this.getAnimeDefaultOptions(el), {
            opacity: [[0, 1], 1],
            translateY: [{ value: this.DOWNTOMID }, { value: 0 }],
            loop: false
          })
        }
        return Object.assign(this.getAnimeDefaultOptions(el), {
          loop: false
github soulextract / soulextract.com / src / components / SocialLinks / SocialLinks.js View on Github external
enter () {
    const { energy, sounds, animateY, onEnter } = this.props;
    const { duration } = energy;

    sounds.fade.play();

    anime({
      targets: this.element,
      easing: 'easeOutCubic',
      keyframes: [
        { opacity: 1, duration: duration.enter / 3 },
        { opacity: 0, duration: duration.enter / 5 },
        { opacity: 1, duration: duration.enter / 2 }
      ],
      complete: () => onEnter && onEnter()
    });

    if (animateY) {
      anime({
        targets: this.element,
        easing: 'easeOutCubic',
        translateY: [-10, 0],
        duration: duration.enter