Jump to content
Search Community

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

themepunch test
Moderator Tag

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 :

 

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 ! 

 

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

  • Thanks 1
Link to comment
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
Link to comment
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
Link to comment
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 ? 

Link to comment
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
Link to comment
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).

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

Link to comment
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? 

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

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