Jump to content
Search Community

Vue and Greensock - roundProps conflict?

MSCAU 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

I have not been able to reproduce this in a simple example (or at least my simple example doesn't exhibit the same issue) so I'm just looking for someone who might be familiar with how roundProps works under the hood, or who might know enough about Vue + GSAP to provide a hint.

 

I have a Vue instance which displays a list of user comments. Each comment is defined as a component in Vue. Comments can either be "live" or "pending". As each pending comment is mounted(), I start a countdown, giving the user 60 seconds to edit their comments before the status is changed to "live". I use Greensock for the countdown, and display it inside the comment template. Certain user actions cause the countdown to reset.

 

Here's the thing, when I use roundProps (to keep the numbers tidy and simplify the template), resetting the countdown on one comment causes all other countdowns on the other pending comments to reset. When I comment out the roundProps line, I have no such problem - it works as you'd expect.

 

Here is the relevant (Vue method) code:

 

        countDown() {
          var _this = this;                
          _this.tween = TweenMax.to(_this, _this.seconds_left, { 
            age_now: 60, 
            // roundProps: ["age_now"],
            ease: Linear.easeNone,
            onComplete: function() {
                _this.comment.status = "live";
            }
          });
        },

It doesn't make any sense to me that the roundProps property by itself would create such havoc. It seems to be "dirtying" the counters in the other comments.

Link to comment
Share on other sites

Hi,

 

As Blake comments a demo should be helpful to notice the issue you're having.

 

Also as you mentioned I wasn't able to reproduce the error in this sample:

 

https://codesandbox.io/s/vue-gsap-powered-timer-6r5o2

 

I assume that we're on the same page, where every countdown component manages it's own state. As you can see resetting the timer on one instance doesn't affect the others, so perhaps there is something else in your code that could be causing the issue.

 

Happy Tweening!!

  • Like 4
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...