ScrollTrigger animating along a pth

[LSchneiderman]

I want to animate ball01 along the svg path, starting from behind ball02, continuing along the line and stopping at ball04. I think the svg will need to be pinned for it to stay in view while the animation is taking place. I'm using 

See the Pen OJMRYbd by delwinh (@delwinh) on CodePen

 as my model. What needs to change in the code for the animation to work?

See the Pen mdmNaGq by lschneiderman (@lschneiderman) on CodePen

[Cassie]

 

Hey there LSchneiderman,
 

You have two scrollTriggers, which is unnecessary - you're also looking for a trigger element with an ID of SVG which doesn't exist.

I've got rid of the extra scrollTrigger, added that ID to the SVG and also added align: '.cls-1' to the motionPath tween.

The align value aligns the ball to the path. If you remove it you'll see it starts from the balls original coordinates.

See the Pen LYywqze?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps!

[LSchneiderman]

@Cassie

Thank you!!

 

I don't know if you can help me with this tweak, but when I incorporated the path into my larger project, the circle follows the path, but when it reaches the end, it jumps back to its original, beginning spot:

 

var action = gsap
      .timeline({
        defaults: { duration: 9 },
        scrollTrigger: {
          trigger: "#path-pin",
          start: "top top",
          end: "+=200%",
          pin: true,
          pinSpacing: true
        }
      })
      .to(".ball01", { duration: 0.01, autoAlpha: 1 })
      .from("#path", { drawSVG: 0 }, 0)
      .to(
        ".ball01",
        { motionPath: { path: "#path", align: '#path', alignOrigin: [0.5, 0.5] } },
        0
      );

 

How do I make that circle just stay at the end of the svg path once it has followed the path all the way?

 

[GreenSock]

I think that may be a bug we discovered that only affects MotionPathPlugin 3.7.1. Sorry about that! Here's a preview of the upcoming release with the fix in place: https://assets.codepen.io/16327/MotionPathPlugin.min.js - does that work better for you? 

[LSchneiderman]

@Jack Perfect! Thank you!

[LSchneiderman]

What if I have a dot on the line (ball03) and I only want it to appear when the line draws to that point?

 

See the Pen mdmNaGq?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[GreenSock]

You could just add GSDevTools temporarily so that you can scrub the animation and see the time at which that dot should be shown:

GSDevTools.create({animation: action});

It looked like 2.48 seconds in. Then I just added a .set() call into the timeline accordingly:

See the Pen WNONMXP?editors=0010 by GreenSock (@GreenSock) on CodePen

[mikel]

Hey,

 

Alternatively, you could use onUpdate of your scroll trigger to determine the desired position.

onUpdate: (self) => {
  console.log(self.progress) //  info for position
},

 

Happy tweening ...

Mikel

[LSchneiderman]

@mikel That's great! The set seems to be what I need. If I want to fade in the ball, would I set opacity to 0 in the css and then make the set phrase read:

set(".ball03",{opacity:"1"}, 2.48);

 

How would I set the number of seconds for the animation?

[GreenSock]

There are a bunch of ways to do this. Here's one: 

See the Pen WNONMXP?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Just create the ball animation up front and pause it. Then insert a callback into the timeline at the correct spot (2.48 seconds here) and then play() that animation if scrolling forward, or reverse() it if scrolling backward. 

 

For fun, I added a little scale animation and a more fun ease

 

Does that clear things up? 

[LSchneiderman]

@Jack 😁You're the man! Thank you!

[GreenSock]

Happy to help. Enjoy!

[mikel]

Hey @LSchneiderman,

 

The progress runs from 0 to 1.
If the scrubbed animation has a duration of 1 sec (a good option), the position is identical to the progress.

Discover the 'dancing trees'  at 0.665 (its period of time is very small here in relation to 1 sec of the main animation): 

 

See the Pen KKWNvNL?editors=1010 by mikeK (@mikeK) on CodePen

 

Another fun option: the use of GSAP Draggable.hitTest() (part of GSAP draggable):

 

See the Pen mdwyrZO by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[mikel]

 

... and if you want to determine a specific point on a long, curved path, use MotionPathPlugin.getPositionOnPath().

 

See the Pen OJbWrmr by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[GreenSock]

Those are excellent points, @mikel. I love that you come along and offer various other approaches! Not only can people learn from those, but they also may open up other opportunities or be more flexible for certain effects. 👍 

 

The reason I personally prefer the simplistic "find the spot by dragging the playhead on GSDevTools" solution is because it's much less costly performance-wise during the animation. Of course you'd never notice it in most cases but running the Draggable.hitTest() multiple times on every tick (so hundreds of times per second) is less than ideal. Sorry, I obsess about performance sometimes

[mikel]

Hey Jack,

 

GSAP Draggable.hitTest() might be a smart alternative for a little animation gimmick.

 

For a longer scrolling distance and some animations to be positioned,

I find the onUpdate/progress feature perfect for me and easy to use in the production phase.

 

Do not apologize, you are expected to always provide the most effective solution.

 

And ... thanks for the honor.

 

Happy positioning ...

Mikel