Jump to content
Search Community

mr.x

Members
  • Posts

    30
  • Joined

  • Last visited

Posts posted by mr.x

  1. It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates.

     

    I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from:

    var masterTimeline = new TimelineLite();
    masterTimeline
      .add(box1Timeline)
      .add(box2Timeline) 
      .add(box3Timeline);
    

    to:

    var masterTimeline = new TimelineLite();
    masterTimeline
      .add(box1Timeline)
      .add(box2Timeline) // this won't animate when there's a duplicate below
      .add(box3Timeline)
      .add(box2Timeline); // comment this out and the earlier one will animate
    

    But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will.

     

    Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. 

     

    I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!

     

     

    See the Pen MaRoJB by xgraves (@xgraves) on CodePen

×
×
  • Create New...