Repetitive gsap animation code and server load time

Question

I'm animating some elements that has a lot of common animation so i think it's very repetitive and it uses extra code

TweenLite.from('.port', 5, {
     opacity: 0,
     rotation: 180,
     marginLeft: '50vw',
     ease: Back.easeOut.config(1.7)
});
TweenLite.from('.folio', 5, {
     opacity: 0,
     rotation: 180,
     marginRight: '-50vw',
     ease: Back.easeOut.config(1.7)
});

the code above the only difference is the margin so is it better to make my code more clean and light to do something like that :

TweenLite.from('.port, .folio', 5, {
     opacity: 0,
     rotation: 180,
     marginLeft: '50vw',
     ease: Back.easeOut.config(1.7)
});
TweenLite.from('.folio', 5, {
     marginRight: '-50vw'
});

or what do you guy think in this case, i wanna make my code more light and clean since they have everything in common except the margin

Answer 1

Sure, it's possible as you did it, assuming that the behavior in this demo is what you're wanting.

Otherwise you could use a generic vars object and pass that into your tweens, using Object.assign to add values. Demo of that here.

var vars = {
  opacity: 0,
  rotation: 180,
  marginLeft: '50vw',
  ease: Back.easeOut.config(1.7)
};

TweenLite.from('.port', 5, vars);

TweenLite.from('.folio', 5, Object.assign({
  marginRight: '-50vw'
}, vars));

The next version of GSAP (yet to be released) will make what you're trying to do here even easier!

P.S. You're more likely to get help more quickly over on the GreenSock forums for these types of questions.