Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
duquennoy

Problem with pause()

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

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Sanity checks.

 

methods: {
  startAnimeMatter() {
    this.animeMatter.play();
    console.log("playing", this.animeMatter.isActive())
  },
  stopAnimeMatter() {
    this.animeMatter.pause();
    console.log("paused", this.animeMatter.paused())
  }
}

 

Share this post


Link to post
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 ...

 

 

 

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
1 minute ago, duquennoy said:

Thanks again, the subject is  solved, does I need to make something to indicate ?

 

No.

 

Good luck with your project. 😀 

Share this post


Link to post
Share on other sites
Just now, OSUblake said:

Good luck with your project. 😀 

Thanks :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×