I want to nest 2 or more tweens in 1 master timeline instead of just sequencing them. If you sequence them you can add defaults to the timeline, like duration or ease and every tween in the sequence would inherit those defaults. If you nest the same tweens with the same defaults, these defaults seem to be ignored. I was wondering if this is indeed the way it should work. I like the idea of nesting but I also find defaults very useful in this case. In the nesting example I would have to add the duration and ease to each tween.
With sequencing: the defaults are inherited
let tl = gsap.timeline({
defaults: {
duration: 0.75,
ease: 'power2.inOut',
yoyoEase: 'sine.out',
},
repeat: -1,
yoyo: true,
});
tl
.fromTo(
'#Robot',
{
y: 2.5,
},
{
y: -5,
}
)
.to(
'#Shadow',
{
scale: 0.75,
},
'<'
);
With nesting: the defaults are ignored
function robotHover() {
var tl = gsap.timeline();
tl.fromTo(
'#Robot',
{
y: 2.5,
},
{
y: -5,
}
);
return tl;
}
function shadowPulse() {
var tl = gsap.timeline();
tl.to('#Shadow', {
scale: 0.75,
});
return tl;
}
let robotMaster = gsap.timeline({
defaults: {
duration: 0.75,
ease: 'power2.inOut',
yoyoEase: 'sine.out',
},
repeat: -1,
yoyo: true,
});
robotMaster.add(robotHover()).add(shadowPulse(), '<');
