animating multiple elements along an ellipse path simultaneously at different points (motionPath)
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
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
