Jump to content

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

Using config() for custom Ease functions

Go to solution Solved by OSUblake,

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



I'm currently using TimelineMax() to create a timeline for a custom Easing function. The custom Ease is working as expected, so there are no problems with that.


However, I came across a part in the docs where it mentioned the config() method could be used with newer versions of Greensock instead of the standard extraParams method.


This is how I'm passing parameters at the moment:

new TimelineMax().to(box, springTiming, {
  delay: 1,
  x: 400,
  ease: new Ease(springFrame, [spring])

How would I be able to use the config() method to pass it the same way? Also, would it be beneficial in doing so?


Thanks in advance.


Link to comment
Share on other sites

Hello aotik, and welcome to the GreenSock Forum!


While we look into this feel free to look at the GreenSock Easing Visualizer. You will notice some of those predefined eases use config() like Back, Elastic, Rough, SlowMo and Stepped:




Also if possible can you please provide a limited codepen demo example so we can see your code in context. For example what does springFrame and spring reference in your code?


Here is a video tut on how to create a codepen dmeo example so we can see your code in context.



Thanks :)


Any additional info will be highly appreciated!


Thanks :0

  • Like 3
Link to comment
Share on other sites

You're welcome to write it either way. Totally up to you. But if it were me, I'd build in a config() method to pass in any variables so that it conforms more with the new API and is more streamlined. The modern API simply leverages a single parameter passed to getRatio() that's between 0 and 1, whereas the way you did it leverages a legacy function that accepts 4 parameters (plus your extraParams). Building it with a config() method would likely perform slightly better. 


For the record, this isn't something we document anywhere because we didn't plan to officially support 3rd party eases although it's totally fine if you want to build one (or more). There's a chance that the API will change eventually in version 2.x.x (but that won't be out for a while). Not sure though. Again, it's totally fine for you to build your custom ease - I just waned to offer the caveat.


Anyway, you can just add a config() method to your Ease class and have it accept whatever you want (meaning whatever custom parameters you need). Just store the variables as instance properties (or internal variables) that you then tap into in the getRatio() method to do whatever calculations your ease requires.  


Happy tweening!

  • Like 3
Link to comment
Share on other sites

  • Solution

I've always extended the Ease class. If you're using ES6, this is really simple.

class SpringEase extends Ease {  
  constructor(foo, bar) {
    this.foo = foo;
    this.bar = bar;
  static config(foo, bar) {
    return new SpringEase(foo, bar);
  getRatio(p) {
   // do stuff
   return p;


See the Pen 0ab4f5d0302c455d979e0a26388fe381?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks for the reply guys, really helped out a lot. In the end we decided to go with the class extension of Ease as that seemed like a clean way to do it.



Here is how it turned out.

class springEase extends Ease {
	constructor(tension, friction) {
		this.spring = new RK4({tension: tension, friction: friction});
		this.time = this.spring.time()

	getRatio(progress) {
		progress = this.spring.step();
		return progress

var ease = new springEase(200, 10)

new TimelineMax().to(box, ease.time, {
	delay: 1,
	x: 400,
	y: 400,
  • Like 1
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.