Jump to content
Search Community

How to default settings for tween (not timeline)?

Aleksei test
Moderator Tag

Recommended Posts

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

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

 

 

  • Like 4
  • Thanks 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.
×
×
  • Create New...