Change existing vars in plugin

[guiferviz]

Hello,

I am starting a personal project: a framework for making computer science animations. GSAP seems like a great option for this.

I want to work with objects so that I don't have to worry about low-level things like the exact position of the screen. I would like to use something like:

 

timeline.to(element, {
  layout: center(scene),
})

 

Instead of:

timeline.to(element, {
  x: scene.width/2 - element.width/2,
  y: scene.height/2 - element.height/2,
})

 

My idea is to preprocess the vars object {layout: center(scene),} and return {  x: scene.width/2 - element.width/2,  y: scene.height/2 - element.height/2,} and let GSAP do its magic as always.

I've tried creating a plugin but I don't know how to modify the existing vars. I did a codepen trying to change the original opacity value of 0 to 0.6 (the text shouldn't completely disappear):

 

Of course I can do that preprocessing without using a GSAP plugin, but it would be more reusable to have it as a plugin.

 

Any other approach is more than welcome.

Thanks a lot!

See the Pen YzGXmrK by guiferviz (@guiferviz) on CodePen

[ZachSaucier]

Hey guiferviz and welcome to the GreenSock forums.

 

GSAP plugins tend to be for animating a specific property. If I were tasked with doing what you are trying to do I might just create some functions that return an object with the necessary vars. Then you can concat that object with another object if necessary. Something like this:

See the Pen qBaOBZX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You might also be interested in the knowledge that GreenSock is soon to be releasing a FLIP plugin that makes transitioning between states a breeze. It's likely going to be a Shockingly Green or greater Club GreenSock membership. There's going to be a private beta starting soon so sign up for a Shockingly Membership today to be sure to get access to it as soon as possible  

[guiferviz]

Thank you Zack!

 

Yeah, I think I'll do that. Thanks for the working example, Object.assign is an useful function.

 

Keep up the good work!