Using config() for custom Ease functions

[aotik]

Hello!

 

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.

 

[Jonathan]

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:

 

http://greensock.com/docs/#/HTML5/GSAP/Easing/

 

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

[GreenSock]

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!

[OSUblake]

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

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

Demo...

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

[aotik]

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) {
		super()
		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,
	ease
})