Aleksei Posted November 13, 2019 Share Posted November 13, 2019 Hi! In the new gsap v.3 I saw the possibility to set default settings for timeline object. Is there a way to set the same for gsap object for a case like this: gsap.to(masterElem, { duration: 1, // default scale: 1.1, ease: 'elastic' // default }); gsap.to(section, { duration: 1, // default scale: 1.2, ease: 'elastic' // default }); gsap.to(text, { duration: 1, // default rotation: 5, scale: 0.9, ease: 'elastic' // default }); Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted November 13, 2019 Share Posted November 13, 2019 Hi @Aleksei, You can use gsap.defaults() to pass along any default values you want to any tweens Happy tweening! See the Pen rNNZbqE by sgorneau (@sgorneau) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Aleksei Posted November 13, 2019 Author Share Posted November 13, 2019 Thank you! Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted November 13, 2019 Share Posted November 13, 2019 You're very welcome! Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 13, 2019 Share Posted November 13, 2019 Keep in mind that adding defaults to gsap.defaults() will affect all tweens 2 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted November 13, 2019 Share Posted November 13, 2019 1 minute ago, ZachSaucier said: Keep in mind that adding defaults to gsap.defaults() will affect all tweens Good point, @ZachSaucier! I was answering this within the scope of a few tweens, but neglecting to say that could certainly be problematic for more complex setups! Thanks for highlighting that. Link to comment Share on other sites More sharing options...
OSUblake Posted November 13, 2019 Share Posted November 13, 2019 You can also use JavaScript. Use Object.assign(). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign var defaults = { ease: "elastic.out(1, 0.3)", duration: 2, x: 100 }; gsap.to( '.item-1' , defaults); gsap.to( '.item-2' , defaults); gsap.to( '.item-3' , Object.assign({}, defaults, { duration: .5 })); gsap.to( '.item-4' , Object.assign({}, defaults, { x: 50, y: -50 })); See the Pen 448f6fe658540ab455c0dc305fb93056 by osublake (@osublake) on CodePen Or the spread syntax for es2018 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax var defaults = { ease: "elastic.out(1, 0.3)", duration: 2, x: 100 }; gsap.to( '.item-1' , defaults ); gsap.to( '.item-2' , defaults ); gsap.to( '.item-3' , { ...defaults, duration: .5 }); gsap.to( '.item-4' , { ...defaults, x: 50, y: -50 }); See the Pen 1ae68ebd25c1553780e93e449ddc57da by osublake (@osublake) on CodePen 4 1 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