ajhalls

Thanks guys, I think that gets be going with what I needed, here is a completed pen for anyone that wants to use it: http://codepen.io/ajhalls/pen/JdOpzz Also here is the usage of _gsTransform since I couldn't find it in the docs: $('.foo').get(0)._gsTransform.x

Thanks Jack, that gets me closer, I have 2 tweens and the getChildren returns 4 items in an array, 2 for each. One has a target, the other _target, not sure how to limit that to just a single one per target or really if I need to. I hear what you are saying about the underscore being "private" but where else do I see the vars applied to the target / timeline? var temp = main.getChildren(); console.log(temp[0]._propLookup[0].x.t._vars); gives me "TypeError: temp[0]._propLookup is undefined" even though I can browse to it. I was hoping to find the {x:50} value plus any others applied to the target that I could then group in the GUI categorized and in the timeline.

I am interested in making a timeline GUI for greensock, but can't seem to find where the info is that gets added to the timeline. I can of course store a redundant copy of what I am inserting into a separate object, but that only works for me as I build my app, it would be great if I could just reference the actual timeline object and extract the info such as: Target Tween (either individual options, or the whole thing) Delay, Duration Start / End Time I have tried using the API with these types of commands: console.log(main.getTweensOf("#div0")); or console.log(main.getActive()); I found part of it by doing: console.log(main._first._first._first); and just to dig in more: var seen = []; var val = []; JSON.stringify(main, function(key, val) { if (val != null && typeof val == "object") { if (seen.indexOf(val) >= 0) { return; } seen.push(val); } return val; }); console.log(seen); But of course that only shows what happens first, I can't find a reference to what happens next. My test was animating two boxes, div0 and div1 and could only ever find info on the first.

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.

Ahh, that makes sense, thanks again Carl.

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. http://codepen.io/ajhalls/pen/KpXzeQ

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

So sorry Carl, there was a problem where I was passing it as an object instead of as a string into the script. It is working again.

How can I use Jquery to identify the target element? My target should be something like this: var targetItem = $('[data-type="sliderLayer"][data-layer="0"][data-slide="0"]'); I am using data-layer and data-slide to identify where the tweens are stored in my array / object rather than id or class.

This is an great example, has anyone tried integrating it to serialize output and implement nesting? I have been using the Nestable JS from Bushell (https://github.com/dbushell/Nestable) for a while and have lots of usable code to generate the menus from Mysql, but I need to drag available options from one list to another list without removing it from the source. I need to be able to drag tweens from one list to another list where items that are nested will all be applied simultaneously and items that are on the root level will be added sequentially. Lets assume I have a tween option that is {x:50}, I might add that, then add {x:50,y:25} and then add {x:50} again, so I don't want to remove the option from the source list. In my investigations today I have found a few good things, but none get you all the way, just curious if anyone had expanded this.

Sounds great Jack, I didn't think about that I just noticed on that previous post that I couldn't mix the scaleX and borderRadius, but I could use the scale3d and borderRadius. My next step is adding all this to a right click menu which is sortable, nestable and so on along with a form to apply manual changes as well to any object, so it might be some time before I remake those other tweens.

I put together a couple code samples to show how you can use all the Animation.css animations with GSAP along with the ability to combine multiple animations on the same object, or just sequence the animations. I am building a web app to create slider animations and needed some simple basic animations that could be added by users without a full understanding of GSAP and ported the ones from Animation.css and may also add the ones from Velocity.js at some point. At this point there are 83 animations, I still need to find how to add more complex things like the cool "wander" effect I saw someone do, following bezier paths, and adding a number of dots that can be animated like snowflakes / raindrops and so on. http://codepen.io/ajhalls/pen/QbvRbQ http://codepen.io/ajhalls/pen/JdWzML If anyone wants to help out and take it to the next level, be my guest as long as you contribute back.

I updated the two Codepen links to include 83 tweens that can either be added in sequence, or added simultaneously. They were remastered from Animate.css though you will probably want to play with the timing of the keyframes at times. By using scale3d I got around the issue.

Thanks for that tip, it is working in IE / Chrome, but not Firefox, not sure why but I imagine it is an unsupported css option for Firefox and will look into it more.

I think you guys will like this one, I put together a codepen that lets you dynamically add effects to a box from an object library. It supports simple tweens with a single command, or complex tweens with multiple transitions. I originally had the effects appending to the timeline (http://codepen.io/ajhalls/pen/JdWzML), but during the rework to support complex / multistep tweens they get added in a way that you can combine multiple effects to get some cool transitions. You can help me build up a library of effects by commenting on this thread with an object / array to add to the list. That being said, you can see when you add the "bulge" effect it starts off OK, then on the last part it doesn't tween the border radius, it just replaces it and they "snap" into place. I have only been playing with GSAP for a week or so so still figuring out the finer points "bulge": [ { "duration": ".6", "scaleX":"1.5", "scaleY":"0.8", "borderRadius":"20% 20% 20% 20%" }, { "duration": ".6", "scaleX":"0.7", "borderRadius":"30% 30% 30% 30%" }, { "duration": "2.6", "scaleX":"1", "borderRadius":"0px 0px 0px 0px" } ]

I am playing around with adding things to the timeline and having a couple interesting issues. The easiest way to see is on the codepen link. I created an array, then using buttons add all the info for animating an object to the array, then using the array I loop through and add things to the timeline. The trouble is a few small things. Seems any particular animation can only be added once (click to add rotationX, then Y, then X again and you won't see any effect though more time is added to the timeline. I haven't dived into this much but there seems to be an autodelay when adding those animations. When looping though and adding things using tl.to()... that is great, but how do I remove all tweens so if I update my array it can re add everything that is left? I tried using tl.clear(); but noticed in the docs that it clears more than just the tweens. I also tried clearing it by specifying: tl = ""; tl = new TimelineLite({onUpdate:updateSlider, delay:0.4}); but that didn't seem to be right either. On my project, if I pause the animation, then start it again, it has trouble, but I had the play button tied in with the loop that adds things to the timeline. I realize these are very basic tweens, but the cool thing is that ideally you could put any animations you want in the array where it is easy to manage (since it is less cluttered than the full "tl" object) and then loop through adding to your animation. So to wrap up, if I could figure out why it is only playing each animation once, how to clear tweens, and maybe why it has a big delay between animations, that would be great. I did try reading up in the docs, but though the functions remove() and clear() are documented somewhat - having an example usage would be awesome since I am not exactly sure what labels mean in the context of .clear( labels:Boolean ) : * UPDATE: I cleaned up a few of the old things on the codepen and things are working I think, at least on this. Now to fix it in my app

Thanks Carl, I saw something here: http://jsfiddle.net/zvdnzx0f/ that would help do the division, I am hoping once I come up with the grid of objects I can animate them. The Codepen you linked looks great as well, I will look into that as well.

Can I use this to take apart a div that has sub content and then manipulate it in the same ways as https://greensock.com/splittextfield but not with text? I am building a web slider application and would like to know if I can use Greensock to acheive these types of effects on this page between slides? http://wowslider.com/ I would love to be able to not have to flatten the slide manually, but can using this http://cburgmer.github.io/rasterizeHTML.js/ and then chop the image into a bunch of individual items that can be manipulated individually like the splitText does with letters. Alan