[Problem with pause()]

Just now, OSUblake said:

Good luck with your project. ? 

Thanks

[Problem with pause()]

 

39 minutes ago, OSUblake said:

You are missing the # for circle1.

yes ... sorry.

 

39 minutes ago, OSUblake said:

But it's better to use $refs instead. Using selector strings can cause problems if you use the same component more than once.

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.

 

39 minutes ago, OSUblake said:

You need to use parentheses to call the function, which will add the returned timeline to this.animeMatter.

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 ...

 

[Problem with pause()]

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) :

See the Pen zYYvpdY by lo_du (@lo_du) on CodePen

 

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 ...

 

 

 

 

[Problem with pause()]

My pen : 

See the Pen VwwvyJr by lo_du (@lo_du) on CodePen

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.

[Problem with pause()]

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.

[Problem with pause()]

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