Jump to content
GreenSock

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

Laggy - Jerky Animation - Pan Zoom Test V3 vs. V2

Recommended Posts

Hi Guys. We got some feedback from our customers that some of our Pan Zoom effect become very laggy, jerky since we updated to gsap3 from tweenmax 1.18.3.

I put an example together which shows clearly the situation.  (In the real life example is much more complex) so i tried to build up similar structure like in our plugin.

 

TweenMax 1.18.3 example:

See the Pen WNvGZXj by themepunch (@themepunch) on CodePen

 
GSAP3 example : https://codepen.io/themepunch/pen/vYOXJrQ

 

It is extrem if you scale on transform origin left/top  or right/bottom.  You can check how the pixels are "jumping" on gsap3 and how smooth it is on TweenMax.

Maybe i just missing something , or is there any idea what goes wrong?

 

Thanks a lot guys and really appreciate all your effort, help and hard work ! 

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Not sure, but it looks like v3 has less decimal precision, which might be making it more noticeable. Def something @GreenSock might wanna look at.

  • Like 1

Share this post


Link to post
Share on other sites

Yep, @OSUblake is exactly right - it's just a decimal precision thing. Typically it's just plain wasteful to have super long decimals when setting properties (nobody is gonna notice a difference between an "x" of 200.005 and 200.0048) and it helps keep the strings shorter. But you've got an edge case there where you've got tiny scale decimal differences, so I can add one more decimal for precision in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. That seems to fix it for me. 

 

Better?

  • Like 2

Share this post


Link to post
Share on other sites

In general it's a good idea to only scale between 0 and 1 when not using vector elements to prevent things from getting blurry. You might consider reconstructing the plugin to work that way, but I understand that doing so would limit your customer's ability in some cases as they would need larger assets in general.

  • Like 1

Share this post


Link to post
Share on other sites
11 hours ago, GreenSock said:

Better?

 

The Pan Zoom effect is better, however we have other issues now.


i.e. backgroundImage is not any more respected as attribute.

 

gsap.set('element',{backgroundImage:"url(yourimage.png)"})

will produce an:

Invalid property backgroundImage set to ...  

 

This was not a problem in gsap 3.1.1.   Is this maybe because of the Beta version ? 

Should i report other issues i find with this beta version, or should i wait for the official update ? 

Share this post


Link to post
Share on other sites
8 minutes ago, themepunch said:

Should i report other issues i find with this beta version, or should i wait for the official update ? 

 

Yeah. That url is always the current version.

 

But I don't see any problems with it.

 

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

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites

True story ! Wrong Alarm ! Sorry for the wrong feedback. Indeed it is working fine.

Seems that in our script somewhere the dynamic object converted to an array which as second parameter in gsap.set was accepted in GSAP3.1.1 but not any more in GSAP3.2.0  However this is a failure our side, so please ignore it.

 

The Fix for the Pan Zoom is brilliant and works now like a charm. Any other issues i will report if i see.

Thanks a lot guys for the extrem quick answer again ! You are simple the best ! 

 

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, themepunch said:

converted to an array which as second parameter in gsap.set was accepted in GSAP3.1.1 but not any more in GSAP3.2.0

Arrays can still work in GSAP 3, the elements in them just need to be of the same type (i.e. you can't mix a selector string with a jQuery object or something like that).

Share this post


Link to post
Share on other sites

@ZachSaucier I think he was talking about the vars parameter, not the "targets". But even that's not really supposed to be an Array - @themepunch can you provide sample code showing what you were trying to do with the "vars" object being an Array please? I'm just curious, as you said it worked in 3.1.1. 

Share this post


Link to post
Share on other sites
On 2/21/2020 at 5:52 PM, GreenSock said:

@ZachSaucier I think he was talking about the vars parameter, not the "targets". But even that's not really supposed to be an Array - @themepunch can you provide sample code showing what you were trying to do with the "vars" object being an Array please? I'm just curious, as you said it worked in 3.1.1. 

Sure Thing.  This was working :

 

See the Pen QWbdddq by themepunch (@themepunch) on CodePen

 

We define some parameters due PHP and unfortunately the vars get defined by Array instead of indexed Object. As you can see it works in 3.1.1 (why ever). But not in 3.2.0   This is not a big deal, since it was a "bug" from our side anyway, however i thought on first look that it may an issue in gsap. Sorry for the trouble ! 

  • Like 1

Share this post


Link to post
Share on other sites

Ah, okay. Thanks for the demo! Yeah, I wouldn't expect that to work. I'm rather surprised that it did in 3.1 :) 

 

Happy tweening!

  • Thanks 1

Share this post


Link to post
Share on other sites

That's strange. I would expect what you have to still work. An array is still an object.

  • Like 1

Share this post


Link to post
Share on other sites
9 minutes ago, GreenSock said:

Ah, okay. Thanks for the demo! Yeah, I wouldn't expect that to work. I'm rather surprised that it did in 3.1 :) 

 

I guess you would know better, but I swear I remember doing that in v1. Not as a recommended solution, but to show that arrays are just a special type of object.

Share this post


Link to post
Share on other sites

Yep, this was related to a fix for this issue: https://github.com/greensock/GSAP/issues/362 - basically if the target is an object with a "length" property, and you try animating it (meaning "length" is in the vars), it accommodates that. So in this case, if you pass an Array in as the vars, of course it'd have a "length" property, thus it passes that test. See what I mean? 

 

I could add some code to work around this, but I'm just not sure it's worth it. It really ain't much code - "&& !_isArray(vars)" but still. Do you see much benefit in allowing people to pass in an Array as the vars object? 

Share this post


Link to post
Share on other sites
32 minutes ago, OSUblake said:

but I'm wondering why this works when target isn't an array.

Two questions:

  1. Aren't we in agreement that folks defining vars as an Array probably isn't a good thing to allow? 
  2. I may be misunderstanding what you mean, but I guess I don't see why that wouldn't work. The array has 2 "properties", 0, and 1...so it's applying those to the Object. Did I miss something? 
  • Like 1

Share this post


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

Aren't we in agreement that folks defining vars as an Array probably isn't a good thing to allow? 

 

Right. I was just curious.

 

1 minute ago, GreenSock said:

I may be misunderstanding what you mean, but I guess I don't see why that wouldn't work. The array has 2 "properties", 0, and 1...so it's applying those to the Object. Did I miss something? 

 

Because the target doesn't have those properties. It just assumed they start at 0.

Share this post


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

Because the target doesn't have those properties. It just assumed they start at 0.

I think that's an overall good thing.

Share this post


Link to post
Share on other sites
11 minutes ago, ZachSaucier said:

I think that's an overall good thing.

 

I dunno. I would expect it to just set the value. I'm pretty sure that was the behavior in v2.

 

Share this post


Link to post
Share on other sites
3 minutes ago, OSUblake said:

I'm pretty sure that was the behavior in v2.

I think it's the same:

See the Pen WNvRJaW by GreenSock (@GreenSock) on CodePen

Share this post


Link to post
Share on other sites

No. Those values aren't being animated. Just set... although they are a string.

 

image.png.8a763a48b137e098ff434b6a410aca01.png

 

 

In v3 they are animating from 0, and again, as a string.

 

image.png.70d4fdbb24b9a829e5ac858aebb9b950.png

 

 

And I'm not saying this is an issue that needs to be addressed. It's just not what I was expecting.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, OSUblake said:

No. Those values aren't being animated. Just set... although they are a string.

I didn't look at the logged values, just that something was being logged. Whoops :) 

 

I think I'd side with Blake in just setting the values though I don't really care either way.

Share this post


Link to post
Share on other sites

If you're just curious about the "why", here ya go:

 

It loops through each property and the array has 0 and 1 property names, so it tries to get the starting values from the target object but of course those are "undefined". Internally GSAP checks to see if it's a number that's parsable and in this case it's not, so it skips the regular numeric logic and hands it off to the complex string parsing algorithm which defaults to a starting value of "0", thus it treats undefined like a complex string. I really don't see any problem with the way this is working, nor do I think I need to add extra logic into the core to accommodate this - do you? 

  • Like 2

Share this post


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

×