Ash Williams
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Ash Williams
-
-
Hi everyone,
I have a simple problem to solve ( I'm sure that's something dum ): I have some points as bezier curve,
and I'm animating a Svg along that path.This is the code:
let flyMove = new TimelineMax({
ease: Linear.easeNone,
repeat: -1,
paused: true
});flyMove.to("#" + id, 12, {
ease: Linear.easeNone,
bezier: {
values: [
{ x: startPointX, y: startPointY },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: randomMove(xLimitMin, xLimitMax), y: randomMove(yLimitMin, yLimitMax) },
{ x: startPointX, y: startPointY }
]
}
});I'm trying to figure it out why the svg doesn't start again at the same point: can you help me?
Thanks in advance,
Simone
See the Pen JjoOagN by ashwilliams1992 (@ashwilliams1992) on CodePen
Close a bezier curve
in GSAP
Posted
Thanks for the quick response: I forgot to tell you about another step before the random bezier, but I think I figured out.
The square needs to have a short animation on start.
Like you said, the trick is .set the position after the animation, to have a starting point for the bezier!
Here the codepen:
Thanks