I have this animation on GSAP with morphSVG: https://codepen.io/asssc/pen/VwopGqL
document.querySelector('.buttons_start').addEventListener('click', () => {
// Green - Online
gsap.to(".test.is-online path", { duration: 1, overwrite: true, morphSVG: "M.5,5.5C3.36,5.5,2.41,1,6.21,1s3.8,9,5.71,9,0-4.5,4.76-4.5S21.43,1,24.29,1s1.9,4.5,4.76,4.5" });
// Red - Online
gsap.to(".test.is-offline path", { duration: 1, overwrite: true, morphSVG: "M.5,5.5c2.85,0,1.9,3.16,5.71,3.16S10.01,1.88,14.77,1.88s4.4,6.64,8.76,6.77c2.85,0,2.65-3.16,5.51-3.16" });
})
document.querySelector('.buttons_stop').addEventListener('click', () => {
// Geen - Offline
gsap.to(".test.is-online path", { duration: 0.5, overwrite: true, morphSVG: "M.5,5.5H29.04" });
// Red - Offline
gsap.to(".test.is-offline path", { duration: 0.5, overwrite: true, morphSVG: "M.5,5.5H29.04" });
})
I need to use Anime.js, but I can’t start it smoothly, how do I make this animation exactly the same as on GSAP?
Anime.js example: https://codepen.io/asssc/pen/ExqWpbv
const onlinePath = "M.5,5.5C3.36,5.5,2.41,1,6.21,1s3.8,9,5.71,9,0-4.5,4.76-4.5S21.43,1,24.29,1s1.9,4.5,4.76,4.5";
const offlinePath = "M.5,5.5H29.04";
const offlinePathRed = "M.5,5.5c2.85,0,1.9,3.16,5.71,3.16S10.01,1.88,14.77,1.88s4.4,6.64,8.76,6.77c2.85,0,2.65-3.16,5.51-3.16";
document.querySelector('.buttons_start').addEventListener('click', () => {
anime({
targets: '.test.is-online path',
d: [{ value: onlinePath }],
duration: 1000,
easing: 'easeInOutQuad'
});
anime({
targets: '.test.is-offline path',
d: [{ value: offlinePathRed }],
duration: 1000,
easing: 'easeInOutQuad'
});
});
document.querySelector('.buttons_stop').addEventListener('click', () => {
anime({
targets: '.test.is-online path',
d: [{ value: offlinePath }],
duration: 500,
easing: 'easeInOutQuad'
});
anime({
targets: '.test.is-offline path',
d: [{ value: offlinePath }],
duration: 500,
easing: 'easeInOutQuad'
});
});