How to scroll a ball in a page following a specific path?

[Anthony Beaumecker]

Hello,

 

I am new to GSAP.

 

I am trying to make an animation with a ball that would follow a specific path when scrolling the page.
The start of the animation goes well, the ball follows the path that I indicate to it, but when I start to add several steps to my animation, the positioning that I indicated at the beginning does not correspond at all to what I want. initially wished.

I posted a video so that you can better visualize the subject of my request:

 

Here is also the code I have currently done which allowed me to do what you saw in the video above.

 

 ballAnimations() {


      let tlHome = new TimelineMax();

      tlHome.to('.ball', 0.3,{
        x: 0, y: 353, ease: "power2.out"
      }, 0)
      tlHome.to('.ball', 0.3,{
        x: 71, y: 409, ease: "power2.out"
      }, 0.68)

      
      const sceneHome = this.$scrollmagic.scene({
        triggerElement: '.hHome',
        triggerHook: 0,
        duration: 3000,
        reverse: true,
      })

        .setTween(tlHome)
        .addIndicators()
        .setPin('.hHome')

      this.$scrollmagic.addScene(sceneHome)

    }

 

[OSUblake]

Welcome to the forums @Anthony Beaumecker

 

Have you check out the ScrollTrigger demos? There's a good example of following a motion path.

 

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

 

[Anthony Beaumecker]

Thank you !
But, when I want to use Motion Path PLugin or Motion SVG PLugin, I get this error message that appears:

 

Is this a pay-per-use feature?

[Cassie]

It isn't - but you need to include and register the plugin 🔧

https://greensock.com/docs/v3/Installation?checked=core,motionPath,scrollTrigger