Jump to content
Search Community

Rounding?

mimeartist test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hi Mime Artist,

 

You can tween some sort of proxy value, and then call the onUpdate function to set your image to the rounded values.

 

Here's 2 ways I came up with to do this using proxy values. The first involves setting the raw value to some attribute on your element. Pretty straightforward.

 

The second way is based on a question I just answered about using getters / setters to transform values. While not as cut and dry as the first method, I did add an interesting effect. Instead of calling an onUpdate function, I added the set tween to the proxy value. This will allow you to set the x value like this: image.x = 300, and it will actually move to 300.

 

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

  • Like 2
Link to comment
Share on other sites

Thanks for your help the both of you. I'll always go for the 'maths' version, as at least I can see logically something will work 'hopefully' across browsers... Thanks for the codeine

 

I'm actually going to see if I can not move the mesh, and just animate the images below it.

Link to comment
Share on other sites

  • Solution

Good solutions, guys. I wanted to chime in with a slight twist on Blake's suggestion - GSAP natively supports function name-based getters/setters, so you can just make up your own names like "getRoundedX()/setRoundedX()" and use the set one in your tween, and GSAP is smart enough to find its "get" equivalent. So you can do this:

 

http://codepen.io/anon/pen/ZYRMPe?editors=101

  • Like 5
Link to comment
Share on other sites

Very interesting. I did not know you could use functions. Will this work with overloaded functions, kind of like jQuery uses, 0 arguments = get, 1 argument = set?

 

There you go, IE8 problem solved. One nice thing about using a function for the setter is that you can add return this; and then you can chain your calls together.

image1
 .setRoundedX(300)
 .setRoundedY(300);

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

 

  • Like 2
Link to comment
Share on other sites

Yep, it'll work great with overloaded functions like the ones jQuery uses. In fact, this is exactly why it's possible to literally tween another tween or timeline! So, for example, let's say you've got a TimelineLite instance with a bunch of tweens in it. You can pause() it and then do this:

TweenLite.to(timeline, 2, {progress:1, ease:Linear.easeNone});

All that's doing is tapping into the progress() method. You could do the same for "time" or "totalTime" or even "timeScale" (mind-bending, right?). Initially, it gets the current value, and thereafter it sets it using the same method. It doesn't matter what you name your method either. Go crazy - there are all sorts of possibilities this adds, and it has been baked into GSAP from the very first JS version. :)

  • Like 2
Link to comment
Share on other sites

Wow! This actually helps explain a lot. I always wondered why tweening the timeScale in this

See the Pen LuIJj?editors=001 by GreenSock (@GreenSock) on CodePen

worked the way it did. Thanks for clearing this up. I don't remember seeing anything about this in the documentation, although today I looked around, and I found a mention of this on the colorProps plugin page.

Link to comment
Share on other sites

Yeah, that's one of our dilemmas - there are so many neat little things like that in the platform that don't always fit perfectly into a section in the docs, and we don't want to overwhelm people either. If you've got any ideas regarding where to put info like this, I'm all ears. 

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