combine SplitText and MotionPath

[gaggo]

Hi there!

 

I have two questions regarding MotionPath, where I think I need help.

 

First, here is the demo:

 

 

I see two issues with this demo:

 

1. The animation stops for a second or so before it repeats itself
2. The letters are all being rotated at the same time – is there a way to change that? I'd like the word FOLLOWER being written vertically after it moves around the corner.

It's probably important to note that I'm drawing the path dynamically (using the function `drawPath` in the pen).

I'd be very grateful for any help! 🙏 

See the Pen abMwOxK?editors=0110 by rassohilber (@rassohilber) on CodePen

[gaggo]

So, I was able to hack something together:

See the Pen mdowPpv?editors=0110 by rassohilber (@rassohilber) on CodePen

 

I resorted to creating a timeline with a separate tween for each letter. It's working but it feels like maybe there is a cleaner solution available? 

 

Another very question would be if it's possible to change the width on the fly, when the window size changes?

 

Happy to hear about any tips and tricks

[Rodrigo]

Hi,

 

Just use a single tween with staggers. Also no need to create an array, just use GSAP toArray utility:

https://gsap.com/docs/v3/GSAP/UtilityMethods/toArray()

 

Something like this:

function animate() {
  const split = new SplitText(".follower", {
    type: "chars",
    charsClass: "letter letter--++"
  });
  const reversedChars = [].concat(split.chars);
  reversedChars.reverse();

  gsap.set(".letter", {
    transformOrigin: "50% 50%"
  });

  const t = gsap.to(reversedChars, {
    duration: 2,
    ease: "quint.inOut",
    motionPath: {
      path: (i) =>
      drawPath({
        letter: reversedChars[i],
        inset: 10,
        width: window.innerWidth - 100
      }),
      align: "self",
      autoRotate: true
    },
    stagger: 0.05,
    repeat: -1
  });
}

Here is a fork of your demo:

See the Pen gOERwpR by GreenSock (@GreenSock) on CodePen

 

Great setup by the way, nice, clean and effective! Nice job!

 

Hopefully this helps.

Happy Tweening!

[gaggo]

Oh wow!

 

Thanks for the cleaned-up code. 

 

I didn't know that `motionPath.path` could be a callback. Is this documented somewhere? 

[PointC]

Just another little FYI - if you don't want to reverse() the array for some reason with this type of animation, you can use a negative stagger value. Happy tweening.  

See the Pen 86b831b335e0f82913a126d5f358a93c by PointC (@PointC) on CodePen