duquennoy

Thanks

yes ... sorry. Yeah I know it's not the best, so the explanation for that is : In my project I created some svg with inkscape which generated a really messy lines of code (just as you saw) with a lot of components that I want animate. So if I had to add manually a ref inside each tag it's a lot of work and potentially a source of errors whereas I can add some id directly from inkscape. So, to be as close as possible of my project I used id inside the Pen. That was exactly my mistake, thanks you. Sometimes a code which works nearly perfectly is more confusing that one with obvious mistakes. Thanks again, the subject is solved, does I need to make something to indicate ? EDIT : I put a solved tag ...

Thank's you to take so much time to answer (hum ... Maybe this sentence can be misinterpreted). I tried to made a simplified pen (but closer to my project that your very good example) : https://codepen.io/lo_du/pen/zYYvpdY So I probably make multiples mistakes cause I see some errors in the console that doesn't appear in my project (and the staggerTo not working). Nevertheless, same weird behaviour regarding the pause() . So maybe the error in my project is already in these lines of codes ...

My pen : here I didn't really succeed to manage with codepen, nothing appear ... But my code is there (modified a bit for codepen, the original code is assembled inside a single .vue file) and maybe will you see an obvious mistake.

Thank to answer, so I try to console.logging this.animeMatter and it look like a tween object, something heavy with many ramifications including getters and setters for active, delay, timescale ... the only thing that putting myself into question is the paused:true that I observe into the object. Since I fire the console.logging inside the stopAnimeMatter (and I precise that I made it before the this.animeMatter.pause()) should it not be on : paused:false ? I will try to make a codepen tomorrow.

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