Rebuilding timeline, things getting overwritten.

[ajhalls]

I am feeling stumped. I have been working on formatting my data so that there can be 3 levels of timelines. The goal is to have one master timeline, then each item could have multiple individual tweens with multiple start times / durations, but also have groups of animations such as this one:

{
  "Animation": {
    "name": "flash",
    "sequence": [
      {
        "duration": "1",
        "vars": {
          "opacity": "0"
        }
      },
      {
        "duration": "4",
        "vars": {
          "opacity": "1"
        }
      },
      {
        "duration": "2",
        "vars": {
          "opacity": "0"
        }
      },
      {
        "duration": "3",
        "vars": {
          "opacity": "1"
        }
      }
    ]
  }
}

I had everything working great when it was only 2 levels deep, but now I can't figure out what I am doing wrong and can't get it working on even 2 levels again. I am appending the animation data above to a pre-existing object with this structure:

Slides[0]["layers"][0]

 

The code below should destroy any previous timelines and then loop through each layers animations and recreate the timeline:

function rebuildTimeline() {
        var L, G, S;
        mainTL = new TimelineLite({onUpdate: updateSlider,paused: true});
        mainTL.clear();
        groupTL = [];
        childTL = [];
        for (L = 0; L < Slides[0]["layers"].length; L++) {
          target = '.canvasItem[data-type="sliderLayer"][data-layer="'+ L +'"][data-slide="0"]';

          for (G = 0; G < Slides[0]["layers"][L]["animationgroup"].length; G++) {
          groupTL[G] = new TimelineLite({onUpdate: updateSlider,id: "Layer-" + L + "-AnimationGroup-" + G});

            for (S = 0; S < Slides[0]["layers"][L]["animationgroup"][G]["sequence"].length; S++) {
              childTL[S] = new TimelineLite({onUpdate: updateSlider,id:"Layer-" + L + "-AnimationGroup-" + G + "-Sequence" +S});
              duration = Slides[0]["layers"][L]["animationgroup"][G]["sequence"][S]["duration"];
              sequence = Slides[0]["layers"][L]["animationgroup"][G]["sequence"][S]["vars"];

              childTL[S].to(target, duration, sequence);
            }
              groupTL[G].groupStartTime = Slides[0]["layers"][L]["animationgroup"][G]["startTime"] / 1000;
            for (i = 0; i < childTL.length; i++) {
              console.log(childTL[i]);
                groupTL[G].add(childTL[i].childTimeline, 1);
            }              
               console.log(groupTL);
             
          }

        }

        for (i = 0; i < groupTL.length; i++) {
            //mainTL.add(groupTL[i].childTimeline, groupTL[i].childStartTime);
        }
    //mainTL.time(getPreviousTime).pause();

};

For some reason when I am doing the console.log(childTL); everything seems in order, but then when I get to console.log(groupTL); it only displays a duration of 4 seconds.

//childTL[0]
Object { vars: Object, _totalDuration: 1, _duration: 1, _delay: 0, _timeScale: 1, _active: false, data: undefined, _reversed: false, _startTime: 2.265, _timeline: Object, 12 more… }  timeline.js:396:15
//childTL[1]
Object { vars: Object, _totalDuration: 4, _duration: 4, _delay: 0, _timeScale: 1, _active: false, data: undefined, _reversed: false, _startTime: 2.265, _timeline: Object, 12 more… }  timeline.js:396:15
//childTL[2]
Object { vars: Object, _totalDuration: 2, _duration: 2, _delay: 0, _timeScale: 1, _active: false, data: undefined, _reversed: false, _startTime: 2.265, _timeline: Object, 12 more… }  timeline.js:396:15
//childTL[3]
Object { vars: Object, _totalDuration: 3, _duration: 3, _delay: 0, _timeScale: 1, _active: false, data: undefined, _reversed: false, _startTime: 2.265, _timeline: Object, 12 more… }

//groupTL[0]
Object { vars: Object, _totalDuration: 4, _duration: 4, _delay: 0, _timeScale: 1, _active: false, data: undefined, _reversed: false, _startTime: 1.7080000000000002, _timeline: Object, 18 more… }

Then if I do a console.log in the browser after everything is done on the childTL object, I get an array of 4 items, but items 1-3 have a duration of 0, and the last will have whatever the last one was supposed to have.

 

I haven't actually gotten to the point of being able to try adding it to the mainTL. My organization that I am thinking is like this:

MainTL
    GroupTL
        childTL
    GroupTL
        childTL
        childTL
        childTL
        childTL
    GroupTL
        childTL
        childTL

 which would be created by this type of workflow:

childTL[0].to($box, 1, {x:50,y:0})
childTL[1].to($box, 1, {x:50,y:50})
childTL[2].to($box, 1, {x:-50,y:50})
childTL[3].to($box, 1, {x:-50,y:0});    

groupTL[0].add(childTL[0], startTime);
groupTL[0].add(childTL[1], startTime);
groupTL[0].add(childTL[2], startTime);
groupTL[0].add(childTL[3], startTime);

MainTL.add(groupTL[0], groupStartTime);

What am I missing here about the workflow that things are being overwritten? I tried to get a codepen going to show the issue, as you can see it skips the first 2 and jumps to the last.

http://codepen.io/ajhalls/pen/NdMOPr?editors=1111

See the Pen NdMOPr?editors=1111 by ajhalls (@ajhalls) on CodePen

[ajhalls]

I should also mention, if I use TweenLight instead of TimelineLite like below, the duration on the first 3 childTL items don't get erased, but it doesn't seem to get me any closer, and it is different than how I had it working before.

for (S = 0; S < Slides[0]["layers"][L]["animationgroup"][G]["sequence"].length; S++) {
   //childTL[S] = new TimelineLite({onUpdate: updateSlider,id:"Layer-" + L + "-AnimationGroup-" + G + "-Sequence-" +S});
   duration = Slides[0]["layers"][L]["animationgroup"][G]["sequence"][S]["duration"];
   sequence = Slides[0]["layers"][L]["animationgroup"][G]["sequence"][S]["vars"];
   childTL[S] = new TweenLight.to(target, duration, sequence);
}

[PointC]

Hi ajhalls 

 

I didn't have time to dig into your pen and figure out what's supposed to be happening, but your second post does have a typo. It should be 'TweenLite' instead of 'TweenLight'.

 

Someone else may be able to get you an answer on your original question. 

 

Happy tweening.

[Carl]

Sorry, I just don't understand your issue at all. 

 

 I have no idea what code like what you provided below is actually supposed to look like in terms of animation or visual effect:

 

for (setting in animatelayers[G]){
      for (S = 0; S < animatelayers[G][setting]["sequence"].length; S++) {
        childTL[S] = new TimelineLite();
        
console.log(animatelayers[G][setting]["sequence"].length);
        duration = animatelayers[G][setting]["sequence"][S]["duration"];
        sequence = animatelayers[G][setting]["sequence"][S]["vars"];
        childTL[0].to(".target" , duration, sequence);
        $(".results").append("childTL["+S+"].to('.target', " + duration +", " + JSON.stringify(sequence) +");<br>");
       console.log(duration, sequence);
      }
  }

When creating a demo it would be much better if you removed all the looping through your data.

It would be much better if you just created a timeline with some tweens with hardcoded values and perhaps added some comments.

 

When I ran your demo I saw the text grow big, shrink and grow again (to 35px, 5px and then 55px)

 

Is that the expected behaviour? if not can, you please explain in more detail?

 

What is troubling is that in this code here:

childTL[0].to($box, 1, {x:50,y:0})
childTL[1].to($box, 1, {x:50,y:50})
childTL[2].to($box, 1, {x:-50,y:50})
childTL[3].to($box, 1, {x:-50,y:0});    


groupTL[0].add(childTL[0], startTime);
groupTL[0].add(childTL[1], startTime);
groupTL[0].add(childTL[2], startTime);
groupTL[0].add(childTL[3], startTime);

you are creating 4 tweens that are trying to tween $box to an x:-50 all at the same time of startTime.

That is going to cause an overwrite situtation, which will kill the conflicting tweens. 

You should try overwrite:"none" in that case

 

 

childTL[0].to($box, 1, {x:50,y:0, overwrite:"none"})

childTL[1].to($box, 1, {x:50,y:50, overwrite:"none"})

childTL[2].to($box, 1, {x:-50,y:50, overwrite:"none"})

childTL[3].to($box, 1, {x:-50,y:0, overwrite:"none"

[ajhalls]

Thanks Carl, I realized that I was doing that while on a date with my wife Saturday night... I spent no less than 6 hours on this Friday and just needed to take a step back to see where I was wrong.  When I got into work this morning I updated it to not create so many timelines, which would each need their own start time - which was why the demo worked. I also updated the data for all my Animate.css ports that I had done a couple years ago to the newer format.

 

It is great to know about the overwrite command, sorry for my lapse. I started this project a couple years ago and had made some good progress in my understanding, some of which got lost when I got sidetracked running my other businesses till I could come back.

 

If anyone wants the data for the animations, I posted them over here: https://greensock.com/forums/topic/11874-full-animationcss-port-to-gsap-83-prepackaged-animations/