ajhalls

I am working on retooling the animations from animate.css to greensock. I currently have this stored in the database: fadeOutDownBig = [{ "duration": ".2", "vars": { "opacity": "1" } }, { "duration": ".2", "vars": { "opacity": "0", "transform": "translate3d(0, 2000px, 0)" } }] In response to: https://greensock.com/forums/topic/11874-full-animationcss-port-to-gsap-83-prepackaged-animations/#entry48567 I am trying to retool them to remove the transform and transform3d, but the issue I am dealing with is that when creating timeline events you have to submit them as an object, but some things can't be stored as objects (that I know of). I have the 80 animations stored in the database which using a foreach loop create a drop down with the tween info stored as each options value. I then use jQuery to grab the value and use JSON.parse() to convert it into an object, which Greensock needs. <select id="preDefined"> <option value="[{'duration':'.8','vars':{'opacity':0,'y':'2000px'}}]"> fadeInDownBig</option> </select> newTween = JSON.parse($("#preDefined").val()); That works, but if I want to actually have it start from the edge of the screen instead of 2000px above, since if it isn't low on the screen the opacity effect is not apparent and just looks like a slide in, then I need to use a javascript function to calculates the position, which would work if I typed it in without quotes like this: TimelineLite.to(target, 1, {'opacity':0, 'y':calculatePosition(element).top * -1}}) But doesn't work because JSON.parse() fails to do it without quotes, but of course then it doesn't execute to return the position info. Thanks to OSUBlake, we have an excellent way of finding all that info:http://codepen.io/osublake/pen/WwgQEV Any tips on how I can use the JSON object data storage requirements along with Greensock's requirements to allow including functions? ========= As a side note, most of the examples I see here don't use quotes to define vars, which would be fine if it parsed strings. In my application, I threw in a manual add text box that users can copy and paste code from here into the application to get the desired results, but of course to define it as an object you have to do JSON.parse, which requires it to have quotes. To solve that, I put together a fun little regular expression to fix data. goodJSON=badJSON.replace(/(['"])?([a-zA-Z#0-9_]+)(['"])?\s*:\s*(['"])?([a-zA-Z#0-9_+=]+)(['"])?/g, '"$2":"$5"');

Not sure why I couldn't make the example work either, but I had a bunch of tooltips and wanted it to find the nearest one and make it visible. Then if you click a different one, it will fade any previous ones and bring in the current. $(".ExpandingTipsLink").unbind('click').click(newOptionsTooltip); function newOptionsTooltip(e) { TweenLite.to(".ExpandingTips", 0.1, {scale:0.5, autoAlpha:0}); var tooltip = $(this).parent().parent().parent().find(".ExpandingTips"); if (tooltip.attr("data-visibility") === "1"){ tooltip.attr("data-visibility", 0); TweenLite.to(tooltip, 0.3, {y:20, scale:0.5, autoAlpha:0}); }else{ tooltip.attr("data-visibility", 1); TweenLite.to(tooltip, 0.3, {y:-20, scale:1, autoAlpha:1}); } }

The above post needs to be updated / deleted but the site won't let me. When I click edit, it just gives me a blank box without the option of editing. I will post a corrected version later.

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/

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); }

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

Thanks guys, sometimes I forget to google for the easy way of doing things. I was so stuck on what I already knew that I forgot that there was probably an easy way to do it. Turns out I just needed to know about the basic javascript .assign() function, or as Blake noted Underscore has a method, as soes jQuery and many others to merge two arrays. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign I am embarrased to admit I actually went through the trouble of rebuildin the process on my own before I got home and even thought about googling for a way to assign a new object to an existing object var assembleTween = "{"; for (N = 0; N < newTween.length; N++) { if(N < newTween.length-1){ assembleTween +="\"" +newTween[N]['option'] +"\" : \"" + newTween[N]['value'] +"\","; } else{ assembleTween +="\"" +newTween[N]['option'] +"\" : \"" + newTween[N]['value'] +"\", \"ease\":\"" +ease +"\""; } } assembleTween +="}"; instead of: newTween = $.extend(newTween, { [option]: value });

It isn't a huge deal, I am just looking at ways to store things in the database and was thinking it would be nice to store the ease data in a separate table which could then be assigned to any particular tween. Since it has to be part of the other object, I have to concatenate things first, which isn't the worst, and maybe I am overthinking it and it will simplify itself along the way. for instance, I have this in my database: It would be cool to be able to have default ease effects stored there, but then in a separate table able to assign a different on, without manipulating the data too much. As it is, I just use something like this: function resequenceJSON(sequence) { var greenAniArray = { options: {} }; if ($.isArray(sequence)) { for (S = 0; S < sequence.length; S++) { for (var setting in sequence[S]) { if (setting == "duration") { greenAniArray["duration"] = sequence[S][setting]; } else { greenAniArray["options"][setting] = sequence[S][setting]; } } animationSequence = greenAniArray["options"]; animationDuration = greenAniArray["duration"]; } } else { for (var setting in sequence) { if (setting == "duration") { greenAniArray["duration"] = sequence[setting]; } else if (setting == "ease") { greenAniArray["ease"] = sequence[setting]; } else if (setting == "sequence") { greenAniArray["sequence"] = sequence[setting]; } } animationSequence = greenAniArray["sequence"]; animationDuration = greenAniArray["duration"]; } } and then assemble the info later. assembledTimeline += '.to(' + targetItem + ', ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')';

I am wondering if there is any way to declare the easing as separate from the effect? Something like: mainTL.to(".sliderLayer-0", 2, {x: "595"}, ease:Linear.easeNone); or mainTL.to(".sliderLayer-0", 2, {x: "595"}, {ease:Linear.easeNone}); instead of: mainTL.to(".sliderLayer-0", 2, {x: "595", ease:Linear.easeNone}); I am trying to figure out a good system for storing the animation data and would love to be able to store the ease as separate so it is easier to concatonate everything without trying to insert it into the middle of the object Just thought I would ask.

I built this over the last week as part of something I am building. It has all the parts working to integrate into a larger project with less than 400 lines of javascript It includes: Adding items to the timeline Drag and drop their start time Resizing for duration Zoom The start of a right click to adjust tween easing As it mentions in the project, I didn't completely finish it since it is now time to connect it to a database that I have filled with the tweens and easing, so this was the natural break point for someone to start using it to integrate with their own as well. I will probably set it up with access to OSUBlake's easing tool at some point :http://codepen.io/osublake/pen/OyPGEo, but it would be awesome to integrate it with the official one https://greensock.com/ease-visualizer for Business Green members someday (if they let me) https://github.com/ajhalls/Simple-Animation-Timeline-for-Greensock Demo: https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/

I do use the .clear() function, the issue is that I have one timeline that modifies the "Example" text, then when I add another tween, I .clear() the first timeline and create another timeline that uses the original one's modifications as the new starting point. I had a work around idea of rewinding to the beginning really quick before building the timeline and then fast forward to where I was before that I will try out.

I have made some great progress on the GUI last night and this morning. Seems like just about everything works, except... If you go to this page: https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/ Click to add an X rotation, then click the timeline at around 500ms, you will see that the "Example" text is now upside down. Now click to add Y rotation. At this point it assumes the current upside down text is the initial state and animates it from there. Since I couldn't modify any of the timeline info directly, I created a rebuild function that runs each time you drag and drop, resize, or add a new animation. All the info is stored in an object off to the side and rebuilt from that info. How can I quickly clear those effects, or at least not assume that is the initial state? I don't see that there is going to be that much value in doing a Codepen when you have access to the source on Github if needed, but if I am wrong, let me know

Be interesting to look into BPG as a format http://bellard.org/bpg/

Ok, I guess I got a little mixed up when I saw the visualizer I wanted on Codepen in one of the next posts. http://s.codepen.io/GreenSock/debug/c7683439f68fc7d2dc9c8c14d783f772

I was also just about to post asking if I could utilize the ease visualizer for the GUI I am building. I would want to host it myself so I could modify the look / feel to match my application is why I would want to not use the main page - as well as not directing users of my GUI offsite to get the effects tuned. If I am reading this correctly: https://greensock.com/forums/topic/7952-javascript-custom-ease/?p=61895 there isn't any conflict in downloading and embedding it into my application.

Great Jack, I will look into using your 'id' solution as well. I am sure eventually we can find a solution. Also BTW, I did learn from https://greensock.com/forums/topic/7381-getting-dom-elements-out-of-timeline/ that using .getChildren() will give you the DOM elements back. I am not sure yet what to do with that info, but it is related to the topic so I will tie them together.

Thanks Carl, like the others I too appreciate the thorough reply. Knowing that the tweens can be destroyed and recreated without too much of a hit on performance gives me this solution: function compileAnimations(targetItem,sequence) { startTime = insertTime/ZoomValue; compiledAnimations.push({"itemID" : timelineItems+1, "target":targetItem, "animationSequence":JSON.stringify(animationSequence)}); compiledAnimations[timelineItems]["startTime"] = startTime; compiledAnimations[timelineItems]["animationDuration"] = animationDuration; }; function rebuildTimeline() { if ($.isArray(compiledAnimations)) { mainTL.clear(); mainTL = new TimelineLite({onUpdate:updateSlider, paused: true}); var assembledTimeline = ""; var TL = []; for (S = 0; S < compiledAnimations.length; S++) { assembledTimeline = '.to(' + compiledAnimations[S].target + ', ' + compiledAnimations[S].animationDuration + ', ' + compiledAnimations[S].animationSequence + ')'; elementTL[timelineItems] = new TimelineLite(); var TLcurrent = elementTL[S]; TL[S] ={}; TL[S].startTime = compiledAnimations[S].startTime; TL[S].timeline = "TLcurrent" + assembledTimeline; eval(TL[S].timeline); } for(i=0; i<TL.length; i++){ console.log(TL[i]); mainTL.add(TL[i].timeline, TL[i].startTime/1000); } } }; the compileAnimations() gives me an array like this: [ { "itemID": 1, "target": "$("#exampleAnimation")", "animationSequence": "{"rotationX":"+=360","ease":"Power2.easeOut"}", "startTime": 270, "animationDuration": "2" }, { "itemID": 2, "target": "$("#exampleAnimation")", "animationSequence": "{"rotationY":"+=360","ease":"Power1.easeInOut"}", "startTime": 877.5, "animationDuration": "2" } ] That way I can modify my array / object and then just call the rebuildTimeline() function as often as needed. I can throttle it as you say to not updating it till the user does a mouseup, rather than on drag. I will think on your idea of creating named timelines like this: var green = TweenLite.to(".green", 1, {y:200}); var orange = TweenLite.to(".orange", 1, {y:200}); It gets a little trickier to me to setup a lot of variables with variable names. The end product will have so many animations tied to different objects, keeping it in JSON seemed easier, at least for now I know these snippets may not explain everything I am doing in the background, but will push some updates to github once I get the drag and drop working.

Thanks for the reply Jonathan, my super long reply was being typed while you were responding . TimeLineLite.exportRoot() gives me pretty much the exact same info as before with an extra layer above. I still don't see any way to give a tween a name which can be accessed to update or alternately to remove and then re add it in again. It would be helpful if they were given names, ids, or something to work with. { "vars": { "smoothChildTiming": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_timeline": { "vars": {}, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": true, "_reversed": false, "smoothChildTiming": true, "autoRemoveChildren": true, "_startTime": 0, "_rawPrevTime": 15.611, "_time": 15.611, "_totalTime": 15.611, "_dirty": true }, "_next": null, "_prev": null, "smoothChildTiming": true, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_totalTime": 15.611, "_time": 15.611, "_rawPrevTime": 15.611, "_first": { "vars": { "smoothChildTiming": true }, "_totalDuration": 3.3565, "_duration": 3.3565, "_delay": 0, "_timeScale": 1, "_active": true, "_reversed": false, "_startTime": 11.031, "_next": { "vars": { "paused": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 15.611, "_next": null, "_pauseTime": 15.611, "_paused": true, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_first": { "vars": {}, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0.012, "_next": { "vars": {}, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0.4595, "_next": null, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": { "item-1": 0 }, "_sortChildren": true, "_first": { "vars": { "rotationX": "+=360", "ease": "Power2.easeOut" }, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_next": null, "_prev": null, "target": { "0": { "jQuery31107172755050163471": { "events": { "mousedown": [ { "type": "mousedown", "origType": "mousedown", "data": null, "guid": 42, "namespace": "" } ] } }, "_gsTweenID": "t1", "_gsTransform": { "perspective": 0, "force3D": "auto", "svg": false, "skewType": "compensated", "rotationY": 30.331844999999994 } }, "length": 1 }, "_overwrite": 2, "_targets": [ null ], "_propLookup": [], "_siblings": [ [ null, { "vars": { "ease": "Power1.easeInOut", "css": { "rotationY": "+=360" } }, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_next": null, "_prev": null, "target": { "length": 1 }, "_overwrite": 2, "_targets": [ null ], "_propLookup": [ { "rotationY": { "_next": null, "t": { "_overwriteProps": [ "rotationY", "rotationY" ], "_propName": "css", "_priority": 0, "_super": { "_firstPT": null }, "_transformType": 3, "_firstPT": { "p": "rotationY", "s": 0, "c": 360, "n": "rotationY", "type": 0, "b": 0, "e": 360, "xs0": 0, "_next": { "p": "transform", "s": 0, "c": 0, "n": "transform", "type": 2, "b": 0, "e": 0, "_next": null, "pr": -1 } } }, "p": "setRatio", "s": 0, "c": 1, "f": 1, "n": "css", "pg": 1, "pr": 0, "m": 0 } } ], "_siblings": [ null ], "_time": 0.4105, "_totalTime": 0.4105, "ratio": 0.08425512499999999, "_ease": { "_func": null, "_type": 3, "_power": 1, "_params": [ 0, 0, 1, 1 ] }, "_easeType": 3, "_easePower": 1, "_initted": true, "_rawPrevTime": -1, "_lazy": false, "_gc": false } ] ] }, "_dirty": false }, "_prev": null, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": { "item-0": 0 }, "_sortChildren": true, "_dirty": false, "_rawPrevTime": 0.4105, "_time": 0.4105, "_totalTime": 0.4105, "_initted": true, "_gc": false }, "_dirty": true }, "_prev": null, "smoothChildTiming": true, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_totalTime": 3.3565, "_time": 3.3565, "_rawPrevTime": 4.58, "_first": { "vars": { "paused": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 1.3445, "_next": null, "_prev": null, "_pauseTime": 1.767, "_paused": true, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_first": null, "_last": null, "_recent": null, "_dirty": true, "_forcingPlayhead": false, "_rawPrevTime": 0.4225, "_time": 0, "_totalTime": 0, "_initted": true }, "_dirty": true, "_initted": true, "_forcingPlayhead": false }, "_dirty": true }

So spending some more time in the documentation and it isn't looking pretty. While Greensock certainly is powerful in it's way, it seems to be greatly lacking in the ability to manipulate any existing events. I did finally figure out how to get the "getTweensOf" to work: mainTL.getTweensOf($("#exampleAnimation"), true) Once I figured that out, the rest of the documentation started making more sense, sort of... For example, in the documentation you have: public function getTweensOf(target:Object, nested:Boolean = true):Array or public function remove(value:*):* I have no idea what :Array is supposed to mean, or :*, so that doesn't really help to have it in the documentation without actually explaining it, at least not for a self educated programmer, maybe if I had taken classes that would make more sense. As you can see in the above post, I really got confused by the "target:Object, nested:Boolean = true" trying such things as: mainTL.getTweensOf({target:*, onlyActive:Boolean = false}) mainTL.getTweensOf({"target":*, "onlyActive":"Boolean = false"}) mainTL.getTweensOf({"target":$("#exampleAnimation"), "onlyActive":"Boolean = false"}) mainTL.getTweensOf({"target":"$("#exampleAnimation")", "onlyActive":"Boolean = false"}) Ok, so I digress on my actual topic, sorry. The object that stores everything is very convoluted and circular with things buried in so many layers without actually identifying anything such as the target that it makes accessing that info almost useless. For example, once I add a tween, the target gets stored as something like "jQuery3110143163648180085761" which doesn't give me any information on what I am targeting. Now on that codepen: http://codepen.io/ajhalls/pen/EZwvdj, if I wanted to add 3 effects at various times to the same object, there doesn't seem to be any way of removing just one of them. I tried to add my tweens with labels such as "Animation-1", "Animation-2" that could then be used to use the remove() function, but that only seems able to remove the label, not the tween I was trying to associate with it. Now using the .remove() function might be useful, IF I could get a list of tweens that exist, but instead I get back something like this: SONStringify(mainTL.getTweensOf($("#exampleAnimation"), true)) "[ { "vars": { "ease": "Power1.easeInOut", "css": { "rotationY": "+=360" } }, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_timeline": { "vars": {}, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0.177, "_timeline": { "vars": { "paused": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 15.397, "_timeline": { "vars": {}, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": true, "_reversed": false, "smoothChildTiming": true, "autoRemoveChildren": true, "_startTime": 0, "_first": { "vars": { "paused": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 3.993, "_next": { "vars": { "paused": true }, "_totalDuration": 0, "_duration": 0, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 7.384, "_pauseTime": 8.034, "_paused": true, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_first": null, "_last": null, "_recent": null, "_dirty": true, "_forcingPlayhead": false, "_rawPrevTime": 0.65, "_time": 0, "_totalTime": 0, "_initted": true }, "_prev": null, "_pauseTime": 4.133, "_paused": true, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_first": null, "_last": null, "_recent": null, "_dirty": true, "_forcingPlayhead": false, "_rawPrevTime": 0.14, "_time": 0, "_totalTime": 0, "_initted": true }, "_rawPrevTime": 16.464, "_time": 16.464, "_totalTime": 16.464, "_dirty": true }, "_next": null, "_pauseTime": 15.397, "_paused": true, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": {}, "_sortChildren": true, "_first": { "vars": {}, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0.1745, "_prev": null, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": { "item-": 0 }, "_sortChildren": true, "_first": { "vars": { "ease": "Power2.easeOut", "css": { "rotationX": "+=360" } }, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_next": null, "_prev": null, "target": { "0": { "jQuery311073036382391618031": { "events": { "mousedown": [ { "type": "mousedown", "origType": "mousedown", "data": null, "guid": 42, "namespace": "" } ] } }, "_gsTweenID": "t1", "_gsTransform": { "perspective": 0, "force3D": "auto", "svg": false, "skewType": "compensated", "rotationX": 200.56091259937503, "rotationY": 40.27122000000001 } }, "length": 1 }, "_overwrite": 2, "_targets": [ null ], "_propLookup": [ { "rotationX": { "_next": null, "t": { "_overwriteProps": [ "rotationX", "rotationX" ], "_propName": "css", "_priority": 0, "_super": { "_firstPT": null }, "_transformType": 3, "_firstPT": { "p": "rotationX", "s": 0, "c": 360, "n": "rotationX", "type": 0, "b": 0, "e": 360, "xs0": 0, "_next": { "p": "transform", "s": 0, "c": 0, "n": "transform", "type": 2, "b": 0, "e": 0, "_next": null, "pr": -1 } } }, "p": "setRatio", "s": 0, "c": 1, "f": 1, "n": "css", "pg": 1, "pr": 0, "m": 0 } } ], "_siblings": [ [ { "vars": { "rotationX": "+=360", "ease": "Power2.easeOut" }, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0, "_timeline": { "vars": {}, "_totalDuration": 2, "_duration": 2, "_delay": 0, "_timeScale": 1, "_active": false, "_reversed": false, "_startTime": 0.687, "_next": null, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": { "item-": 0 }, "_sortChildren": true, "_dirty": false }, "_next": null, "_prev": null, "target": { "length": 1 }, "_overwrite": 2, "_targets": [ null ], "_propLookup": [], "_siblings": [ null ] }, null, null ] ], "_gc": false, "_time": 0.47550000000000003, "_totalTime": 0.47550000000000003, "ratio": 0.5571136461093751, "_ease": { "_func": null, "_type": 1, "_power": 2, "_params": [ 0, 0, 1, 1 ] }, "_easeType": 1, "_easePower": 2, "_initted": true, "_rawPrevTime": -1, "_lazy": false }, "_dirty": false, "_gc": false, "_rawPrevTime": 0.47550000000000003, "_time": 0.47550000000000003, "_totalTime": 0.47550000000000003, "_initted": true }, "_dirty": true }, "smoothChildTiming": false, "autoRemoveChildren": false, "_labels": { "item-": 0 }, "_sortChildren": true, "_dirty": false, "_rawPrevTime": 0.47300000000000003, "_time": 0.47300000000000003, "_totalTime": 0.47300000000000003, "_initted": true, "_gc": false }, "_next": null, "_prev": null, "target": { "length": 1 }, "_overwrite": 2, "_targets": [ null ], "_propLookup": [ { "rotationY": { "_next": null, "t": { "_overwriteProps": [ "rotationY", "rotationY" ], "_propName": "css", "_priority": 0, "_transformType": 3, "_firstPT": { "p": "rotationY", "s": 0, "c": 360, "n": "rotationY", "type": 0, "b": 0, "e": 360, "xs0": 0, "_next": { "p": "transform", "s": 0, "c": 0, "n": "transform", "type": 2, "b": 0, "e": 0, "_next": null, "pr": -1 } } }, "p": "setRatio", "s": 0, "c": 1, "f": 1, "n": "css", "pg": 1, "pr": 0, "m": 0 } } ], "_siblings": [ null ], "_time": 0.47300000000000003, "_totalTime": 0.47300000000000003, "ratio": 0.11186450000000002, "_ease": { "_func": null, "_type": 3, "_power": 1 }, "_easeType": 3, "_easePower": 1, "_initted": true, "_rawPrevTime": -1, "_lazy": false, "_gc": false }, null, null ]" Now I don't see anything useful in there that can be used to identify something to modify / remove / kill / replace. Maybe I am prematurely aggravated, but I purchased a business perpetual license specifically to design this timeline tool after working with Velocity.JS which would have required wrapping objects inside objects to apply multiple animations, which Greensock can do without any problem, but can't seem to make any headway on modifying things, which might explain the lack of GUI interfaces. Can this be done in a round about way, yes. I could store everything in my own JSON object and then keep clearing / re-initializing the timeline every time I make a change, but that seems like overkill for what I expected to be able to do with a product as mature as Greensock, and seems like it would have a lot more user lag than simply modifying a few values here and there as you work.

Here, lets look at it in a simplified codepen: http://codepen.io/ajhalls/pen/EZwvdj Here you can add a bunch of effects to the object, and you can specify the start time of each animation using the text field. Each time you click a button, the sequence is added to it's own timeline 'elementTL[timelineItems]' where 'timelineItems' is a autoincrementing number each time you click the button. Then it adds that timeline to a parent timeline called mainTL. As more timelines are added, it uses the "reInit()" function to clear the main timeline and then adds them all back in one by one. Now on my timeline GUI (https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/) that I am building, I want to be able to click and drag the child timelines around, modify durations and so on. What I am wondering is how to access the existing timeline to update existing values, rather than destroying and re initializing the timeline a hundred times per second as I am dragging things around. I have tried all the things I can think of using the documentation, but for example, all of these commands: elementTL[0].getTweensOf(target:*, onlyActive:Boolean = false):Array mainTL.getTweensOf(target:*, onlyActive:Boolean = false):Array mainTL.getTweensOf(target:$("#exampleAnimation"), onlyActive:Boolean = false):Array TimelineLite.getTweensOf(target:*, onlyActive:Boolean = false):Array give me the error: SyntaxError: missing ) after argument list Trying to use the .set() function (https://www.greensock.com/asdocs/com/greensock/TimelineLite.html#set()) doesn't seem to be accessing the right things as I don't get an error, but it doesn't update the object as I think it should. Is there a way to export / dump the info that the different timelines have so I can know better how to direct my .set() function knowing I am accessing the right timelines, and then can re-export / dump to see that those changes took effect?

I am making a simple GUI timeline for working with Greensock (https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/) that users can use when building a more comprehensive tool. Most of the heavy lifting is done (I think), but I was trying to figure out how to update a child timeline element when I update the width of the element by dragging it's div. It has been a while since I was playing with Greensock and I can't remember how to dump the timeline info and update it. For example on the link above, you can apply multiple effects to the element $("#exampleAnimation"). Those timelines are created by the following code which will create an array of timelines called "elementTL[timelineItems]" which then get added to mainTL. $("#AddManual").on("click", function(){ var formAnimationX = $("#formAnimationX").val(); var formAnimationY = $("#formAnimationY").val(); var formAnimationDuration = $("#formAnimationDuration").val(); greenAni(targetthing, {"duration": formAnimationDuration, "x": formAnimationX, "y": formAnimationY, "ease": "Elastic.easeOut"}); reInit(); }); function greenAni(targetItem, sequence) { var assembledTimeline = "" var greenAniArray = {options:{}}; if ($.isArray(sequence)) { for (S = 0; S < sequence.length; S++) { for (var setting in sequence[S]) { if (setting == "duration") { greenAniArray["duration"] = sequence[S][setting]; }else{ greenAniArray["options"][setting] = sequence[S][setting]; } } animationSequence = greenAniArray["options"]; animationDuration = greenAniArray["duration"]; assembledTimeline += '.to(' + targetItem + ', ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')'; } } else { for (var setting in sequence) { if (setting == "duration") {greenAniArray["duration"] = sequence[setting];} else {greenAniArray["options"][setting] = sequence[setting];} } animationSequence = greenAniArray["options"]; animationDuration = greenAniArray["duration"]; assembledTimeline += '.to($(' + targetItem + '), ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')'; } elementTL[timelineItems] = new TimelineLite(); var TLcurrent = elementTL[timelineItems]; var TL = "TLcurrent" + assembledTimeline; eval(TL); timelineItems++; }; function reInit() { mainTL.clear(); mainTL = new TimelineLite({onUpdate:updateSlider, paused: true}); for(i=0; i<elementTL.length; i++){ var startTime = ($("#draggbleElement-"+ (i+1)).position().left)/ZoomValue+12; mainTL.add(elementTL[i], startTime/1000); } } So I would imagine I need to either modify the original timeline `elementTL[timelineItems]`, or the `mainTL` that it was appended to, but I can't find any info by doing `console.log(mainTL)` or on the other. Is there a way to dump the current animations to JSON that would give me a better way of visualizing what I am working with?

it starts on 1219: assembledTimeline += '.to($("' + targetItem + '"), ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')'; } var tl = TL[targetItem.replace(/[^a-z0-9\s]/gi, '')]; eval("tl" + assembledTimeline); using TL[targetItem.replace(/[^a-z0-9\s]/gi, '')] lets me setup an object that can have multiple timelines inserted for each target item. It isn't the cleanest way, but it was what I did back then.

Here are a couple good alternatives: https://codio.com/ http://montagejs.github.io/mfiddle/ https://github.com/yuguang/fiddlesalad http://www.c9.io I am looking at building one for server side languages and would consider a few of these as good starting points for that as well.

This is what I ended up with, you will have to customize it just a little for your use case, but in the end it should be fairly straightforward to customize. For mine the timeline is named "main". var tlObject = {}; var child={}; var children = main.getChildren(), child, i; for (i = 0; i < children.length; i++) { child = children[i]; if (child.target) { var target = child.target.selector; var duration = child._duration; var vars = child.vars; //build array with an array for each transformation under the same object name if(tlObject[target]){}else {tlObject[target]= [];} for (var C in child.vars) { var pushVal = {}; pushVal[C]=child.vars[C]; pushVal['duration']=duration; tlObject[target].push(pushVal) } } } console.log(tlObject);

I put one together based off animate.css: http://codepen.io/ajhalls/pen/JdWzML