beamish

Thanks !

Hi, I have a problem with nested timelines which is demonstrated in the attached pen: In the codepen: click on the 1st button. It plays a child timeline nested in a parent timeline. My first problem is: why do I need line 5: 'child.play(0);'? if I comment it out then the 1st button won't work. Doesn't the parent time head control the child heads? Now click on the 2nd button. The child is removed from the parent and played by itself. This is OK. Now click on the 3rd button, which should play only the child (which has been removed from the parent after step #2). Why doesn't the child play?... Now if you click on the 2nd button again the child DOES play... why? and if you now click on the 1st button which plays only the parent - the child is playing - even though it has been removed from the parent... as if the 'remove' from the parent has not been effective. What is my wrong way of thinking here?... Thanks, Elior

I've set up another question with a pen to make things clearer, please refer to it: http://greensock.com/forums/topic/11859-nested-timelines/ Thanks. ------------ Hi, I have a strange situation where 'remove' on a TimelineMax seems to work but then not... : 1. There a TimelineMax instance to which I add several nested timelines 2. The TimelineMax works well 3. I remove one of the nested timelines using the 'remove' method on the TimelineMax with the nested timeline as the paramater. 4. The nested timeline is not removed. When I debug the code with a single nested timeline, I can see that if I set a breakpoint at the 'remove' line, then before the 'remove' is called if I call 'getChildren' on the TimelineMax then I can see some items; after the 'remove' is called if I call the 'getChildren' again then I get an empty array (as should be), but now if I single-step in the debugger one line forward and then call 'getChildren' then the array is 'magically' filled up again with the timeline I just removed... There are no events that add nested timelines that are called in this situation. I should note that I don't want to kill the nested timeline because I want to run it separately or add it to another instance of TimelineMax. Any ideas?... Thanks ! Elior

Thanks for the support. I want the fixed item to be scaled yet remain fixed (even if it's fixed position is different after the scaling). And I checked, you're right that it has to do with CSS transform and not with GSAP, so perhaps this is not the forum to discuss this further. Thanks again.

furthermore, when I comment out the single line in the JS window then the red box does not scroll and remains fixed (in chrome)

I'm using the latest version of chrome. When I scroll the output window of the codepen in chrome the red box scrolls too.. when I do the same in IE the red box remains fixed...

This is weird! I ran the codepan on IE and it works well, the same codepen on Chrome doesn't work !

Hi all, I've encountered a strange situation: when an item whose css position is set to 'fixed' is placed within another div that has been scaled using TweenMax, the fixed item is no longer fixed. Any ideas?... Thanks for the great work ! Elior

Thanks guys, Cor, GSAP is simply unreplaceable when it comes to efficiency, speed, ease of use, effects and animation. But I think that in many ways it is complementary to bootstrap, not contradictory. Rodrigo, you're the best as always... thanks. I'll definitely use your solution, Elior

Hi, I'm trying to find a way to dynamically resize elements that are placed in a responsive bootstrap grid system without the resized element 'pushing' other elements while being resized. Such a grid is simply a set of DIVs which dynamically relocate and resize depending on the size of the viewport, e.g.: example. The main point here is that for the responsive bootstrap grid to work properly the elements' positioning should be set to 'absolute'; however, if I do not set the element's position as 'absolute', when I resize one element, all of it's following DOM siblings are automatically moved. This can be seen as the right thing to happen and as the natural behavior of non-absolute elements, but it leads to a situation where dynamic resizing of elements in a responsive bootstrap grid system affects elements that should remain unaffected. I was wondering if there is a possibility that when one element resizes all other elements, which are positioned as 'relative', will automatically relocate their position so that they remain in the same location as before the resize? In the linked codepen, perhaps it is possible for the red box to resize without moving the blue box downwards when both of them are positioned as 'relative'? This possibility seems necessary for dynamic resizing to work properly when elements need to be positioned in a responsive layout. I will be happy to hear of other possibilities for creating a responsive layout with dynamically resized elements. Thanks very much ! Elior

Thank you very much, very helpful as always

Thanks ! will this be less compatible with previous browser version?

Hi Guys, I noticed that when a rotated div containing text is animated the text appears pixelated, somewhat rugged; if I apply Draggable.create to the div, the text becomes smooth. Is it possible to have the text appear smooth before using Draggable? See this pen: http://codepen.io/anon/pen/dxKHn - after running it the text is pixelated, if you click on the green box then Draggable is applied and the text suddenly becomes smooth. Thanks, Elior

Hi Rodrigo, Thanks for such a quick answer Cheers, Elior

Hi I have a timeline which contains several tweens of a single dom element. Is it possible to draw a line along the tweens x,y coordinates in this timeline, and, if possible, have the line drawn as a curve? Thanks ! Elior

Hi Rodrigo and Jonathan, First I fixed the script which was not correct, but not relevant to my question (the tweens were not set up properly on the timeline). Rodrigo, the point is that I need the object to be draggable and not rotatable... Jonathan - your suggestion works for me. Thank you both Elior

Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior

Hi, Yes, it makes sense. I understand the need to remove the tweens from the lookup table so they can be gc after the timeline has completed even if the timeline still exists, and your mechanism sounds right. I understand the tweens themselves are not deleted as long as they are part of an existing timeline even if it had already completed. and if I understand correctly, then if I seek() to some point in this timeline then all it's tweens are put back in the lookup table and from there their properties can be changed for the next play(). Thank you very much for taking the time to explain all this! Cheers, Elior

Thank Rodrigo, I think your help and discussing this issue made it clearer for me now, I think I can now try to implement what I originally tried to do (which is to change properties of tweens dynamically after they have been played and then have them played again).

Yes, it does clear things, thanks, except for one thing which I probably don't understand right: if I create a tween not on a timeline, as a one-time-play situation, then having it deleted for gc sounds good; however, if the tween is placed on a timeline, and I want to run this timeline several times, and but change the properties of the tweens from one run to another - then I don't see why it is necessary to delete the tweens. For such a situation if I understand correctly, then I have to recreate the entire timeline (i.e. remove all the tweens in it and add them again) if I want to play the timeline again but change a property of one of the tweens. Wouldn't it be easier if the tweens had not been removed and I could simple access the one I need to change and change it?.. or perhaps, as you suggested, store the tweens in a separate array so they can be accessed via this array to change their properties and then replay the timeline?... Thanks!

Hi guys ! Thanks for the warm welcome! and GSAP looks amazing! I've created the following codepen , and managed to recreate the problem without using Draggable so it's simpler now. if you click on the 'number of tweens' button you get '8'; now if you click on 'play', wait till the animation ends, and then click on the 'number of tweens' button again you get 0 (despite the fact the 'overwrite' is set to 'none'). Thanks ! Elior (beamish is my nick)

Hi All, A rather strange situation: several tweens of the same object are added to a timeline to be played in a cubic bezier format. This objects is then dragged via Draggable. Then, in the 'onDragEnd' event the timeline to which the object had been added to is played starting from 0. I set a breakpoint after calling the play() function, and then make a call to TweenMax.getAllTweens(). The first time the object is dragged I see all the tweens that should have been on the timeline. However, after the 'onDragEnd' function ends, the browser steps into the code inside Draggable.min.js which continues on, and then if I make another call to TweenMax.getAllTweens() (while still in Draggable.min.js) then the tweens that were dragged no longer exist. What is no less odd is that if I drag the object again, play() is called again and works as if the tweens had not been removed, yet still TweenMax.getAllTweens() returns a list without the instances that had been dragged... Despite the fact that the removal of the tween happend inside Draggable.min.js, if I remove the call to the play() function from the 'onDragEnd' event handler, no tweens are removed... any clues?... Thanks ! Elior

Thanks

Hi, Is it possible when adding a tween to a timeline, to have its' duration be automatically as long as the time gap until the next tween on the timeline (and the last until the total duration of the entire timeline)? So that if, for example there are 3 tweens at time 0, 7 and 10 each, on a time line with a total duration of 20, the first would have a duration of 7 seconds, the second - 3 seconds, and the last - 10 seconds? and if the second tween is removed - then the duration of the first tween will automatically update to 10 seconds?... If it's relevant, all tween target the same dom element. Thanks! beamish.

Thanks, this works great !!