How to use the animejs.path 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 BulletTrainHQ / bullet-train-frontend / web / components / animations / FeatureFlagsHero.js View on Github external
componentDidMount() {
        const path = anime.path('#track-2');

        const easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'];

        const motionPath = anime({
            targets: '.square',
            translateX: path('x'),
            translateY: path('y'),
            rotate: path('angle'),
            //   easing: function (el, i) {
            //   return easings[i];
            // },
            easing: 'spring(1, 5, 10, 0)',
            duration: 4500,
            loop: true,
            direction: 'forward',
            delay: 1500,
github DefinitelyTyped / DefinitelyTyped / types / animejs / animejs-tests.ts View on Github external
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');

test1.play();
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"
});
github vuetifyjs / vuetify / src / components / VMorph / VMorph.js View on Github external
leave: (e, done) => {
            console.log('leaving')
            const path = animejs.path('#morphPath #forward')
            const timeline = animejs.timeline()
            const icon = Array.from(e.children).filter(c => c.className === 'btn__content')

            timeline
              .add({
                targets: icon,
                opacity: 0,
                duration: 50,
                offset:0
              })

              .add({
                targets: e,
                opacity: 0,
                translateX: path('x'),
                translateY: path('y'),
github vuetifyjs / vuetify / src / components / VMorph / morphs.js View on Github external
function enterButton (el, done) {
  const timeline = anime.timeline()
  const path = anime.path('#morphPath #reverse')
  el.style.opacity = 0
  el.querySelector('.icon').style.opacity = 0

  timeline
    .add({
      targets: el,
      translateX: path('x'),
      translateY: path('y'),
      easing: 'easeOutSine',
      offset: 200,
      duration: 300
    })
    .add({
      targets: el,
      opacity: 1,
      duration: 1,
github vuetifyjs / vuetify / src / components / VMorph / morphs.js View on Github external
function leaveButton (el, done) {
  const timeline = anime.timeline()
  const path = anime.path('#morphPath #forward')

  timeline
    .add({
      targets: el,
      translateX: path('x'),
      translateY: path('y'),
      easing: 'easeOutSine',
      duration: 300
    })
    .add({
      targets: el.querySelector('.icon'),
      offset: 0,
      opacity: 0,
      duration: 50
    })
    .add({
github vuetifyjs / vuetify / src / components / VMorph / VMorph.js View on Github external
enter: (e, done) => {
            const path = animejs.path('#morphPath #reverse')
            const timeline = animejs.timeline()

            timeline
              .add({
                targets: e,
                translateX: path('x'),
                translateY: path('y'),
                easing: 'linear',
                duration: 1000,
                complete: done
              })
          },
          leave: (e, done) => {