Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
simoncoudeville

Nesting tweens don't inherit the defaults of the master timline

Recommended Posts

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(), '<');

 

See the Pen bGRqPWy by simoncoudeville (@simoncoudeville) on CodePen

Link to comment
Share on other sites

  • simoncoudeville changed the title to Nesting tweens don't inherit the defaults of the master timline

Welcome to the forums @simoncoudeville

 

Those are different timelines so you would need to supply them with the defaults. You could do it like this.

 

function robotHover(defaults) {
  var tl = gsap.timeline({ defaults });
  tl.fromTo(
    '#Robot',
    {
      y: 2.5,
    },
    {
      y: -5,
    }
  );
  return tl;
}

function shadowPulse(defaults ) {
  var tl = gsap.timeline({ defaults });
  tl.to('#Shadow', {
    scale: 0.75,
  });
  return tl;
}

let defaults = {
  duration: 0.75,
  ease: 'power2.inOut',
  yoyoEase: 'sine.out',
};

let robotMaster = gsap.timeline({
  defaults,
  repeat: -1,
  yoyo: true,
});

robotMaster.add(robotHover(defaults)).add(shadowPulse(defaults), '<');

 

  • Like 5
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.
×