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)
}