First of all, thank you for the futures answers and sorry for the language, I'm french ...
My code is a bit long and not easy to deal with a codepen demo (at least I assume).
But simply explainable I think :
I have a svg that I want anime, play if hover but paused otherwise:
<svg
@mouseenter="startAnimeMatter"
@mouseleave="stopAnimeMatter"
So, I have two functions in my methods part (I work with vueJS) :
startAnimeMatter(){
console.log("play");
this.animeMatter.play();
},
stopAnimeMatter(){
console.log("pause");
this.animeMatter.pause();
},
And animeMatter is defined in my mounted part and look like that :
this.animeMatter = new TimelineMax({paused:true});
this.animeMatter.add(animeSphere);
animeSphere is a function defined in my mounted part and is composed of a staggerTo with an option repeat(-1).
So Everything work fine except that the animation doesn't pause when my cursor leave the svg (but "pause" appear in the console which means that the function have been call ... I tried with something more "directly" with a button but even there, no effect.
Thank's you a lot if you take time to help me.
Loïc