Designing multiple timelines?

[ajhalls]

This is a bit complicated for codepen, so to start take a look at this URL: http://alan.coursesaver.com/slider.php

 

You can right click on the little div in the top left corner and select "Open Animation Panel". Then you can drag animations left to right to apply them to the object (sorry they aren't better organized yet). You can add as many as you want and they will just animate sequentially.

 

After that, reposition that div and you can click the button "Add Div" to get another object to right click on and go through the same sequence. when you click play, they don't start at the same time, they go one after another.

 

You will see off to the right the object that contains all the properties of every layer. Since everything is dynamically generated, I am trying to figure out how to design this to get them to start at the same time. Later I was hoping to add a modal that will allow you to open each animation template and customize it adding more properties, changing timing, delays and so on but for now I am wondering what to do to get each item to start from 0?

 

Here is a sample of how I put together the timeline:

$('.playAnimations').click(function(e) {
        tl.clear();
        for (S = 0; S < Slides.length; S++) {        
            for (L = 0; L < Slides[currentSlide]["layers"].length; L++) {
                var targetItem = "$(\"[data-type='sliderLayer'][data-layer='"+L+"'][data-slide='"+S+"']\")";
                console.log(targetItem);
                parseAnimation(targetItem, Slides[currentSlide]["layers"][currentLayer]["keyframes"])
            }
        }
 });

function parseAnimation(targetItem, sequence){
  function parseAni(targetItem, sequence){
    aniMation = "";
    duration = sequence["duration"];
    aniSequence = sequence["tween"];
      aniMation += '.to('+targetItem+', ' + duration + ', ' + JSON.stringify(aniSequence) + ')';
          console.log(aniMation);
    return(aniMation);
  }

  $.each(sequence, function(index, aniArray) {
    var TIMELINE = parseAni(targetItem, aniArray);
    TLS = "";
    var TLS = "tl" + TIMELINE;
    eval(TLS);
  });
}

See the Pen by slider.php (@slider.php) on CodePen

[Carl]

Sorry, I'm having difficulty deciphering the code. 

 

From what you describe it sounds like you just need to put multiple timelines into a parent timeline at the same position.

 

Although I don't see it in the code snippet above, it sounds like you are doing something to make them all play in sequenece.

 

Please read up on the position parameter: http://greensock.com/position-parameter

 

When used with add() you can nest multiple timelines like so

var main = new TimelineLite();
main.add(timeline1)
.add(timeline2, 0) // inserted at a time of 0 seconds
.add(timeline3, 0); // inserted at a time of 0 seconds

timeline1, timeline2 and timeline3 were all created elsewhere, perhaps stored in an Array somewhere.

 

If this doesn't help please provide a reduced case codepen. We don't need to see how multiple timelines are being built via an intricate interface, we just need to see how you are creating the timelines and telling them to start.

[ajhalls]

Thanks Carl, I am not trying to make it complicated, I just wanted you to have a vision of what I am working on in case you knew of a better way. I think I need to either dynamically create tweens, or timelines and then insert them into the timeline. I came up with a simple Pen to illustrate how that might be done, but after I add things to the `main` timeline, nothing happens. I have tried main.play(), but it doesn't work. You can swap out the line

main.add(tl[S+Layer],0);

for

eval(tl[S+Layer],0);

and it works fine, so maybe it isn't a big deal, but it would be nice to understand what I am doing wrong when adding to a main timeline so I can use the timeline controls on the main timeline instead of individual ones.

 

See the Pen KpXzeQ by ajhalls (@ajhalls) on CodePen

[Carl]

Ah, perfect example. Thank you. Very helpful.

 

The solution is that you need to eval that expression inside the add() like so

 

main.add(eval(tl[s + Layer]),0);

 

http://codepen.io/GreenSock/pen/VLMagv?editors=001

 

Please keep us posted on the progress of your tool, it looks very powerful. 

[ajhalls]

Ahh, that makes sense, thanks again Carl.

[ajhalls]

Just to share, and of course it isn't done - but it is working, here is the code I am using to insert my stuff into the JSON object using the Jquery Nestable menu:

function ddAni(item,destination){
    var serializedData = $('[data-list="ACTIVE"]').nestable('serialize');
    var tween = $(item).attr('data-tween');
    var name = $(item).attr('data-name');
    var itemParent = $(item).parent().parent().attr('data-id');
    var status = $(destination).attr('data-list');
    var neighbors = $(item).parent().children("li");
    var neighborOrder = [];
    var flat = serializedData;
    Slides[currentSlide]["layers"][currentLayer]["keyframes"] = [];
    var KEYFRAME = Slides[currentSlide]["layers"][currentLayer]["keyframes"];
    for (var setting in serializedData){
        if (serializedData[setting]["id"] == "ACTIVE"){
        }else{
            var indexVal= KEYFRAME.length-1;
            var tweenseparate = serializedData[setting]["tween"].replace(/},{/gi, "}SPLIT{");
            var tween =tweenseparate.split('SPLIT');
            var TempArray =[];
            for (var property in tween) {
            TempArray.push(JSON.parse(tween[property]));    
                for (var property in TempArray) {
                    duration = TempArray[property]["duration"];
                    delete TempArray[property]["duration"];
                    aniSequence = TempArray[property];
                }
                KEYFRAME.push({});
                var indexVal= KEYFRAME.length-1;
                KEYFRAME[indexVal]["duration"] = duration;
                KEYFRAME[indexVal]["tween"] = aniSequence;
                console.log(name);
            }
        }
    };
};

And here is what I use to add it to the timeline:

    $('.playAnimations').click(function(e) {
        main.clear();
        for (S = 0; S < Slides.length; S++) {        
            for (L = 0; L < Slides[currentSlide]["layers"].length; L++) {
                
                parseAnimation(targetItem, S, L, Slides[S]["layers"][L]["keyframes"])
                
            }
        }
        
    });

var tl={};
var TLS = "";
var targetItem = ""
var aniMation = "";
var fullTween= "";
var sequence="";
var TIMELINE = "";
function parseAnimation(targetItem, S, L, sequence){
aniMation = "";
  function parseAni(targetItem, S, L, sequence){
    duration = sequence["duration"];
    aniSequence = sequence["tween"];
    aniMation += '.to('+targetItem+', ' + duration + ', ' + JSON.stringify(aniSequence) + ')';
    return(aniMation);
  }

  $.each(sequence, function(index, aniArray) {
    var targetItem = "$(\"[data-type='sliderLayer'][data-layer='"+L+"'][data-slide='"+S+"']\")";
    TIMELINE = parseAni(targetItem, S, L, aniArray);
    TLS = "";
    TLS = "tl["+S+"-"+L+"] = new TimelineMax();tl["+S+"-"+L+"]" + TIMELINE;
    main.add(eval(TLS),0);
  });
 

}

I am looking at integrating it all with a visual timeline tool like https://github.com/zz85/timeliner and so will probably need to reorganize the way I store things. Hope some of this helps someone.

[Carl]

Thanks for the update and the link to the Timeliner Tool. Pretty interesting stuff in there.