guiferviz Posted December 1, 2020 Share Posted December 1, 2020 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 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 1, 2020 Solution Share Posted December 1, 2020 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 1 Link to comment Share on other sites More sharing options...
guiferviz Posted December 3, 2020 Author Share Posted December 3, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now