Jump to content
Search Community

translating CSS cubic-bezier easing to GSAP

bonometric 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

In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible :)

 

Thanks!

Orry

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the forums.

 

The closest thing to css' timing function that I know of is the SlowMo ease, you can configure it with the values you require in order to achieve that initial and final acceleration.

 

I haven't played with it enough to tell you if you could set it up to match exactly css' bezier timing function.

 

Another choice could be to use the easeInOut property in order to give the animation an ease at the start and end

 

Take a look at the api reference for the SlowMo easing here:

http://api.greensock.com/js/com/greensock/easing/SlowMo.html

 

Here you can see all the easing functions the engine has to offer:

http://api.greensock.com/js/com/greensock/easing/package-detail.html

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

There isn't currently an EXACT match to those values, but Expo.easeOut and Power4.easeOut (or Strong.easeOut) are closest. I doubt you'd notice a difference visually in terms of the "feel". 

 

We do plan on creating a custom easing tool that'll allow you to build something like that, but it isn't ready yet. You can, of course, create your own ease if you want (with code, not visually). 

  • Like 1
Link to comment
Share on other sites

Hi,

 

I've made a simple sample of the SlowMo so you can see, at a very basic degree, how it works, you can see it here:

See the Pen tgEBn by rhernando (@rhernando) on CodePen

 

Jack this topic brought up a question I've had for some time now. Like you said is possible to achieve custom ease functions, but is it possible mix two different easing functions in the same tween?; for example let's say that I want a Back.easeIn and Bounce.easeOut for the same tween, could that be achieved?

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hmm...could you explain what you mean by using two eases in the same tween? Do you mean for different properties? If not, how would you imagine the two different eases would actually work together (because in my mind, it's a little bit like telling someone to walk fast and slow simultaneously which would be impossible, but I'm sure I just misunderstood your question). 

Link to comment
Share on other sites

Something like this:

TweenMax.to(element, time, {top:300, left:300, ease:Back.easeIn, ease:Bounce.easeOut});

Mix the ease functions, one for the start of the tween and a different one for the end, like telling someone to jump, then walk and finally do a little dance  :mrgreen:

 

Rodrigo,

Link to comment
Share on other sites

Oh, I see. Well, the short answer is "no". But you can easily accomplish that with 2 tweens. Not only would this type of feature add kb and slow things down due to the additional conditional logic that'd have to run on every frame, and it'd make the API more clunky, but also it could be awkward to handle the calculation of exactly WHERE in the animation the switch happens. Like would you just do half of the change with one tween and half with the other? If x is going from 0 to 100, would you just do a change of 50 for the first ease, and then 50 for the second? That might not be what the user wants because the "midpoint" of a linear ease is very different than a Strong.easeOut which is very different than an Elastic.easeIn, etc. With a Strong.easeIn normally halfway through the tween, x might only be at 15 whereas a linear would be 50 and an Elastic.easeOut might be 70. 

 

Anyway, the point is that it could get very messy, very fast. And since you can already accomplish this sort of thing by using 2 tweens, it doesn't seem wise to add a new feature to the API that slow things down and make things more complex. Make sense? 

  • Like 1
Link to comment
Share on other sites

Yep absolutely, never thought it like that actually.

 

In fact I've made timelines intended to be just one tween in order to achieve that; like you said the first tween of the line handles the ease intended for the start and the second one the ease for the end but, in case someone else is curious about this, with some easing functions (back, bounce and elastic) the total time of the timeline can't be short, over 1 second; another chance is to make the timeline a little longer and use a timescale bigger than 1 in order to "clearly see" both ease functions.

 

Thanks for the clarification Jack!!

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

  • 9 months later...
  • 3 weeks later...
  • 3 weeks later...

+1 too :)

 

[Edit] Solution:

 

Use the Ease plugin with this great js library: bezier-easing.js:

TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing.css.ease)});

(the default css's ease! @Mark)

 

or specify any cubic-bezier:

TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing(0.25, 0.1, 0.0, 1.0))});

Check also this: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ ;)

And this, if you want directly the approximations of the principals cubic-bezier easing functions (in easing.js): https://gist.github.com/mckamey/3783009

  • Like 5
Link to comment
Share on other sites

  • 3 months later...
  • 2 weeks later...

Hi, this thread seems relevant to the problem I am having right now.

GSAP has a bezier plugin but I don't quite get it.

http://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/

 

In CSS, I have a cubic-bezier of cubic-bezier(0.7,0,0.3,1)

In GSAP, how can I translate that? The API suggests a whole bunch of arguments that don't make any sense to me.

 

Cheers,

V.

Link to comment
Share on other sites

venn, BezierPlugin is a totally different thing - it's not for easing. It's for animating values along a Bezier path. Actually, you can use it for any property, but that's not what you care about here...

 

That cubic-beizer curve looks like it'd be almost identical to something like Power2.easeInOut or Power3.easeInOut. If you want it really strong, you can use Power4.easeInOut. Example:

TweenLite.to("#yourID", 1, {x:100, ease:Power3.easeInOut});
Link to comment
Share on other sites

  • 1 year later...

I know bezier-easing repository isn't maintained by GSAP or related to it anyhow.

 

But today when I am using it as I need a way to translate CSS bezier-easing to GSAP. It fails to work.

It keeps saying...

 

index.js:54 Uncaught ReferenceError: module is not defined

 

):

 

Is using this plugin the only way to do CSS bezier easing translation with GSAP?

https://www.google.com/design/spec/motion/duration-easing.html

 

What I am trying to achieve is to simulate the CSS bezier-curve in Google Material's motion page.

 

-

 

SOLVED: It seems that I need to run npm install to generate the dist folder. Within that folder it contains bezier-easing.js

 

Response by author:

 

bezier-easing aims to be used as a NPM module in a project using webpack / browserify.

that said, as you say we also have a standalone build. it is available here:

https://npmcdn.com/bezier-easing@2.0.3/dist/bezier-easing.js

and

https://npmcdn.com/bezier-easing@2.0.3/dist/bezier-easing.min.js

if you want such web standalone build

Link to comment
Share on other sites

  • 1 year later...

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