Jump to content
Search Community

Problem with pause()

duquennoy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hey duquennoy and welcome to the GreenSock forums. Your English is good!

 

Have you tried console.logging what this.animateMatter is inside of the stopAnimeMatter function to make sure it is pointing at the correct object? 

 

Based just on the code that you've shown there's nothing obviously wrong. 

 

I think it would be helpful to make a minimal reproduction of your error in a CodePen. I know it has at least basic Vue support. It's pretty hard for us to help when we can't see the part related to the error. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

4 hours ago, duquennoy said:

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 ?

 

No, that object doesn't change. You can use the same object for different timelines/animations. 

 

See the Pen f9e7d6adce57ac79600ea3677f7cff8d by osublake (@osublake) on CodePen

 

 

3 hours ago, duquennoy said:

I didn't really succeed to manage with codepen, nothing appear

 

Your pen wasn't loading any scripts, so that's part of the problem. And your SVG is rather messy, you should clean it up by running it through SVGOMG.

 

A really simple example.

 

See the Pen 375d28629a0e7e7ccafa15cae9301e2a by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

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

 

 

 

 

Link to comment
Share on other sites

24 minutes ago, duquennoy said:

I see some errors in the console that doesn't appear in my project

 

What errors do you see? I don't see any.

 

24 minutes ago, duquennoy said:

and the staggerTo not working

 

You are missing the # for circle1.

var boulessl =["circle1","#circle2"]; // bad
var boulessl =["#circle1","#circle2"]; // good

 

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

<svg id="svg"
 @mouseenter="startAnimeMatter"
 @mouseleave="stopAnimeMatter">
    <circle ref="circle1" cx="40" cy="40" r="20"></circle>
    <circle ref="circle2" cx="100" cy="40" r="20"></circle>
</svg>
var boulessl =[this.$refs.circle1, this.$refs.circle2]; 

 

24 minutes ago, duquennoy said:

Nevertheless, same weird behaviour regarding the pause()

 

This adds a function that gets called when you do this.animeMatter.play()

this.animeMatter.add(animeSphere);

 

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

this.animeMatter.add(animeSphere());

 

  • Like 2
Link to comment
Share on other sites

 

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

 

Edited by duquennoy
solved tag
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...