While going through this Codepen, I came across the following code:
var tmax_options = {
repeat: -1,
yoyo: true
};
var tmax_tl = new TimelineMax(tmax_options),
tween_options_to = {
css: {
transform: 'scale(0)',
transformOrigin: 'center center'
},
ease: Cubic.easeInOut,
force3D: true
};
// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > circle:nth-of-type(1)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(2)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(3)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(4)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(5)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(6)'), 1, tween_options_to, 0)
.to($('svg > circle:nth-of-type(7)'), 1, tween_options_to, 0)
Although I understand most of the JS code, I have one specific question about the unusual syntax - the options are assigned from two separate object literals like this:
var tmax_options = {
repeat: -1,
yoyo: true
};
This is followed by:
tween_options_to = {
css: {
transform: 'scale(0)',
transformOrigin: 'center center'
},
ease: Cubic.easeInOut,
force3D: true
};
I am wondering why the animation settings are loaded separately. Is there a reason these settings couldn't be included in a single object literal? I wanted to know if there is any specific rationale for having the settings split into two separate object literals.