mrstevejobs

Which default animation does TweenLite uses?

Recommended Posts

If I animate a path like this:

 

var g_1 = TweenLite.to('#path', 0.5, {
  attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')}
});

 

Which animation is TweenLite using by default?  Linear? Ease? EaseOutCubic?
It seems to me that the end part is a bit slower than the begining, but I do not mange to find this info in the docs. 

 

Thanks!

Share this post


Link to post
Share on other sites

Yup, the default ease is Power1.easeOut which makes objects slow down a bit as they come to their final resting position (as they would in real life).

 

https://greensock.com/docs/TweenLite/static.defaultEase

 

if you want another as the default just use: 

 

 

TweenLite.defaultEase = whateverEaseYouWant

 

or in your tween you can do:

 

var g_1 = TweenLite.to('#path', 0.5, {
  attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')}, ease:Linear.easeNone
});

 

 

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the answer!

I guess there's no easy way to take that same ease outside of tweenlite?
I'm playing with other animations on my own outside Tweenlite and I would like to apply the exact same easing effect so it can look similar to the tweenlite ones I use in the same page.

Share this post


Link to post
Share on other sites
Quote

I guess there's no easy way to take that same ease outside of tweenlite?

 

Not really sure what that means. What are you using for your other animations? 

Share this post


Link to post
Share on other sites

I mean getting the function for it, like this:

 

easeInOutQuad: function (t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (t, b, c, d) {
    return c*(t/=d)*t*t + b;
},
easeOutCubic: function (t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
},

 

Share this post


Link to post
Share on other sites

It looks like you are just using the traditional Penner Eases.

GreenSock's eases create the same results in a more optimized fashion and don't use the typical t,b,c,d parameters.

 

The power eases with the numbers just make it easier to understand which eases are stronger than others. They are each mapped to one of the traditional curves.

 

Power1 = Quad

Power 2 = Cubic

Power3 = Quart

Power4 = Quint

 

 

To match your easeInOutQuad just use GSAP's Quad.easeInOut or  Power1.easeInOut the results will be virtually identical.

 

 

GSAP also has access to Circ an Sine and of course proprietary eases.

Please see the full list.

https://greensock.com/docs/Easing

  • Like 1

Share this post


Link to post
Share on other sites

What about the beizer parameters?
Is it possible to know which ones is using?

 

For example here are some equivalents with the beizer parameters:

 


[0.250, 0.460, 0.450, 0.940], /* outQuad */
[0.215, 0.610, 0.355, 1.000], /* outCubic */
[0.165, 0.840, 0.440, 1.000], /* outQuart */
[0.230, 1.000, 0.320, 1.000], /* outQuint */
[0.390, 0.575, 0.565, 1.000], /* outSine */
[0.190, 1.000, 0.220, 1.000], /* outExpo */
[0.075, 0.820, 0.165, 1.000], /* outCirc */
[0.175, 0.885, 0.320, 1.275], /* outBack */

 

Useful tool:

https://matthewlein.com/tools/ceaser

Share this post


Link to post
Share on other sites

You can convert bezier values to CustomEase. Please see the second video on this page: https://greensock.com/customease 

You should watch the whole thing, but the bezier value part is around 8:52

 

GreenSock doesn't use bezier values for eases natively as they are so limiting. With only 2 control points it's impossible to do elastic, bounce or more expressive eases. The first video on the page above should give you a better idea of how important it is to have more easing options.

 

Share this post


Link to post
Share on other sites

And just to be clear, it's impossible to replicate most of the eases using a single Cubic Bezier. They require at least two segments. If you need those parameters (like to be used for CustomEase), just let me know and I can find those for you. Those ones on the matthewlein.com site are pretty loose approximations. 

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.