MotionPath Delay Conflict: BarbaJS Transition Issues

[runejensencom]

I'm currently in the process of setting up a slideshow utilizing timelines, morphSVG, and motionPath along with BarbaJS Page Transitions in Webflow.. Everything works flawlessly when I reload the page on all pages.

 

However, I've encountered an issue when navigating from the homepage, where I've incorporated motionPath with a delay, to the about page. It seems that this transition breaks all animations. Interestingly, when I remove the delay from the motionPath, the animations function smoothly without any errors during navigation between pages.

 

It appears that the delay within the motionPath is causing conflicts or disruptions during page transitions, leading to animation issues. 

 

If you have any insights or suggestions on how to resolve this issue, I would greatly appreciate your input. 

 

function slideshowAnimation(e) {
  let tween;

  function animateOnPath() {
    let progress = tween ? tween.totalProgress() : 0;
    tween && tween.revert();
    tween = gsap.timeline({
      repeat: -1
    });
    tween.to(".slideshow_item_large-5", {
        opacity: 1,
        duration: 0
      })
      .to(".slideshow_svg_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.5
        },
        duration: 0
      }, "<")
      .to(".slideshow_img_item_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.5
        },
        duration: 0,
      })
      .to(".slideshow_item_large-5", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 1,
        delay: 4
      })
      .to(".slideshow_svg_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_img_item_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_item_large-5", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 0,
        delay: 0.5
      }, "<")
      .to(".slideshow_item_large-1", {
        duration: 0.5,
        ease: "cubic.in",
        opacity: 1,
        delay: 0
      }, "-=1")
      .to(".slideshow_svg_large-1", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_img_item_large-1", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_svg_large-1", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 4
      })
      .to(".slideshow_img_item_large-1", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
     .to(".slideshow_item_large-1", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 0,
        delay: 0.5
      }, "<")
      .to(".slideshow_item_large-2", {
        duration: 0.5,
        ease: "cubic.in",
        opacity: 1,
        delay: 0
      }, "-=1")
     .to(".slideshow_svg_large-2", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_img_item_large-2", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_svg_large-2", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 4
      })
      .to(".slideshow_img_item_large-2", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
    .to(".slideshow_item_large-2", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 0,
        delay: 0.5
      }, "<")
     .to(".slideshow_item_large-3", {
        duration: 0.5,
        ease: "cubic.in",
        opacity: 1,
        delay: 0
      }, "-=1")
     .to(".slideshow_svg_large-3", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
     .to(".slideshow_img_item_large-3", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_svg_large-3", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 4
      })
      .to(".slideshow_img_item_large-3", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_item_large-3", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 0,
        delay: 0.5
      }, "<")
      .to(".slideshow_item_large-4", {
        duration: 0.5,
        ease: "cubic.in",
        opacity: 1,
        delay: 0
      }, "-=1")
      .to(".slideshow_svg_large-4", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
    .to(".slideshow_img_item_large-4", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
   .to(".slideshow_svg_large-4", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 4
      })
      .to(".slideshow_img_item_large-4", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.5,
          end: 0.8
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_item_large-4", {
        duration: 0.5,
        ease: "cubic.out",
        opacity: 0,
        delay: 0.5
      }, "<")
     .to(".slideshow_item_large-5", {
        duration: 0.5,
        ease: "cubic.in",
        opacity: 1,
        delay: 0
      }, "-=1")
     .to(".slideshow_svg_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<")
      .to(".slideshow_img_item_large-5", {
        motionPath: {
          path: "#path",
          align: "#path",
          alignOrigin: [0.5, 0.5],
          autoRotate: true,
          start: 0.2,
          end: 0.5
        },
        duration: 1,
        ease: "cubic.inOut",
        delay: 0
      }, "<");

    tween.totalProgress(progress);
  }
  animateOnPath();
  window.addEventListener("resize", animateOnPath);
}

 

[Rodrigo]

Hi,

 

That most likely stems from the fact that the path is not there when the _align method runs:

https://github.com/greensock/GSAP/blob/master/src/MotionPathPlugin.js#L113

 

Be sure to check if the path is there when the code runs. Check if the barba transition has completed when this code runs so the DOM elements are actually there, especially the path you're targeting in your MotionPath config.

 

Unfortunately without a minimal demo there is not a lot we can do to help.

 

Happy Tweening!

[runejensencom]

3 hours ago, Rodrigo said:

Hi,

 

That most likely stems from the fact that the path is not there when the _align method runs:

https://github.com/greensock/GSAP/blob/master/src/MotionPathPlugin.js#L113

 

Be sure to check if the path is there when the code runs. Check if the barba transition has completed when this code runs so the DOM elements are actually there, especially the path you're targeting in your MotionPath config.

 

Unfortunately without a minimal demo there is not a lot we can do to help.

 

Happy Tweening!

Thank you. I will try and look into that. If I can't figured it out, I will create a minimal demo and come back. 

Something I noticed: Once the slideshow completes all 5 images and repeat first time, transitioning to a different page does not trigger any errors. It only happens when transitioning to a new page before the initial 5 image cycle is completed.

[Rodrigo]

Hi,

 

Maybe you can use GSAP Context to wrap all your GSAP instances in it's scope and revert that particular Context instance using one of the hooks Barba has, preferably one when the out animation is complete:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

[runejensencom]

With the help of Slater. app AI for Webflow, asking the right questing and mention the _align code that gave trouble, like you said Rodrigo - it came with a solution that did all the magic and it works perfectly now with no errors. Thank you for pointing me in the right direction. It was this code.

  barba.hooks.leave(() => {
    if (tween) {
      tween.kill();
    }
  });