animating multiple elements along an ellipse path simultaneously at different points (motionPath)

[___studio.y]

Hi everyone! I'm trying to animate multiple numbers along an ellipse path with motionPath while the user scrolls. They each start at different stages of the ellipse. I've almost got it working but there's some strange behaviour happening for the scroll down the page. The scroll back up the page seems to be working fine. Been scratching my head over this for a while... what am I missing?! 

See the Pen rNRGwem by rrosegregoryy (@rrosegregoryy) on CodePen

[___studio.y]

Okay I made some adjustments and managed to get it working okay. But now there are these moments of slower and faster movement along the ellipse, I guess as the numbers are getting to the end of each path segment. Any ideas how I can smooth this out?  

 

[mvaneijgen]

Hi @___studio.y welcome to the forum!

 

I'm not sure what the code you had just was suppose to do, but I've given the path in your SVG an id and used that as the path to move things along, no need to create new paths if it is already accessible! 

 

Before using a plugin it is always best to just read the docs, sounds boring, but you'll be surprised how much you'll learn and find features you didn't even knew you needed https://gsap.com/docs/v3/Plugins/MotionPathPlugin/. For instance here I've used the start and end property to have the items start somewhere else along the path.

 

As you can see in the demo below, there is no ScrollTrigger, that because he best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

When you want to use ScrollTrigger it is best not to use sticky or set the section to some weird height, just let ScrollTrigger handle that for you. Use the pin: true to make the element sticky and increase the end trigger for the height. Hope it helps and happy tweening! 

 

See the Pen yLwzXqX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[PointC]

Another option when adding multiple targets to a motionPath: You can stagger the start times and advance the tweens  to the full duration or add individual tween to a master timeline. This would be in lieu of using the start/end values. in the motionPath object.

 

Just my two cents to keep your code DRY. Happy tweening.  

 

See the Pen ExVzqdm by PointC (@PointC) on CodePen

 

See the Pen pojmBKJ by PointC (@PointC) on CodePen

[Rodrigo]

Hi,

 

On top of Mitchel's great advice, the problem was basically that you had all the elements being added at the start of the timeline, so the final instance for each number was overwriting the previous two:

numberAnimation.add(gsap.to(".number.is-1", {
  motionPath: {
    path: firstThirdEllipse,
    align: "self"
  }
}), 0) // Start at 0 seconds in the timeline
.add(gsap.to(".number.is-1", {
  motionPath: {
    path: secondThirdEllipse,
    align: "self"
  }
}), 0) 
.add(gsap.to(".number.is-1", {
  motionPath: {
    path: thirdThirdEllipse,
    align: "self"
  }
}), 0);

You have to add them one after the other in order to make it work. But Mitchel's approach is the best in these cases, just use the same path and offset the start and end points in the MotionPath Plugin's config in order to make it work.

 

Happy Tweening!

[___studio.y]

Thanks @mvaneijgen for your quick and helpful response! And for your great input too @PointC and @Rodrigo 

You're absolutely right re checking the docs! I've been using them more to progress in this animation. Also your tips about ScrollTrigger have been very helpful. 

I noticed when replacing the CSS sticky setup with the ScrollTrigger end relative number I lose the ability to have the animation continuing to finish while the section becomes unpinned and scrolls up the page. Is there a way to define a separate end point for the animation and the pinning? I checked the docs, but couldn't find anything about this.

Note: best to view the codepen in it's own tab to be able to see the animation.

 

See the Pen jOJagKG by rrosegregoryy (@rrosegregoryy) on CodePen

 

[GreenSock]

5 minutes ago, ___studio.y said:

Is there a way to define a separate end point for the animation and the pinning? I checked the docs, but couldn't find anything about this.

A ScrollTrigger can only have one start and one end, so no. But you can definitely create one ScrollTrigger for the pinning, and a separate one for the animation so that you can get whatever effect you want. And if you want the animation to last shorter than the pinning, you could technically just use a timeline that has extra (empty) space on one end or the other. 

 

Good luck! 

[___studio.y]

Okay thanks @GreenSock, I'll give that a go!