zarausto

OMG I can't believe this is a free support! Thank you so much Jack!

Thank you so much @GreenSock I knew it won't be a problem for you guys. I just wanna know something, is it possible to make it smothier when I quickly change buttons? If you click on 1 and then 5 the animation starts from the end =( I've updated the Codepen using timeline: https://codepen.io/faustortoloi/pen/JjBgXQJ But now the buttons doesn't work -=( Again, thank you so much.

Simple SVG <svg> <path id="guiaPista" d="m101,227.72C243.56,171.41,427.73,56.28,530.04,56.28s286.7,79.31,115.65,160.64c-171.06,81.33-295.52,243.89-62.33,260.82,233.19,16.93,281.64-134.95,421.75-149.37,140.11-14.42,252.71,19.08,222.05,102.98-30.67,83.9-195.11,127.53-276.41,207.96-45.44,86.25,155.47,116.29,219.25,102.23,151.76-26.14,295.53-157.51,458.02-137.34,347.87,106.05-37.39,234.42-187.59,301.58" style="fill: none; stroke: #d83e8e; stroke-miterlimit: 10; stroke-width: 0px;"/> <circle id="ball" cx="50" cy="50" r="50" fill="#d83e8e"/> </svg> Simple buttons <button id="b1" >1</button> <button id="b2" >2</button> With the code above, I need to #ball move along #guiaPistato 20% when click #b1 and 60% when click #b2 using Gsap and MotionPathPlugin. I'll have more five buttons, but with this simple question I can handle after. I know it's pretty simple for you guys, but I ended with animations starting over and not getting back from 60% to 20%. Can someone give me a light? ? thanks a lot!