Rodrigo

Hi Lenny, You could try function I've created some time ago:, http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ Its quite more simple than scrollorama but lets you control the tween/timeline progress based just on the scroll position. Cheers, Rodrigo

Hi Dave, Sorry for not posting earlier, you caught me with little free time. The following code is working as I believe you want it to: $(document).ready(function(){ //we deifne the conditional logic as a global variable, every function can use it var isTweening = false; //Iterate through every element with a class "MoveResize" and create a timeline and variables for each of them $(".MoveResize").each(function(index, element) { var objectToAnimate = $(this), closeEl = $(objectToAnimate.find("#close")), settingcontent = $(objectToAnimate.find("#settingContent")), tl = new TimelineMax({onReverseComplete: endAnimation, onReverseCompleteParams:[$(this)], paused:true}); //We use the onReverseCompleteParams to indicate on which element the callback should be applied, more on this below. tl .to(objectToAnimate, 0.5, {zIndex: "9950"}) .to(objectToAnimate, 1, {top: "5px", left: "5px", width: "510px", height: "360px", ease: Expo.easeOut}, "sync") .to(objectToAnimate, 1, {borderRadius: "8px"}, "sync") .to(settingcontent, 0.5, {opacity: "1"}, "content") .to(closeEl, 0.5, {opacity: "1", zIndex: "9999"}, "content") element.animation = tl; }); //the click event defined for all the elements $(".MoveResize").click(function() { if(!isTweening) { isTweening = true; changeCSS($(this));//change the css properties this.animation.play();//play the timeline //define the close button for this instance var closeEl = $(this).find("#close"), resizeElement = this;//create this variable to use it on the close button click event closeEl.click(function(e) { e.stopPropagation();//stop the click event from bubbling up the DOM resizeElement.animation.reverse();//reverse the timeline }); } }); //the following function changes the css of specific elements on the click event function changeCSS(element) { element.find("#settingContent").css( "display", "inherit" ); element.css( "cursor", "auto" ); } //this is a global function that can be applied to any DOM element //Here element is the onReverseCompleteParams defined when the timeline instance is created function endAnimation(element) { isTweening = false; element.css( "cursor", "pointer" ); element.find("#close").css( "z-index", "1" ); element.find("#settingContent").css( "display", "none" ); }; }); Okay even though the code is commented I'll go through some basic stuff. First I defined the close button variable as closeEl, thus because there's a JS method called close (you can see it here), so you should try to avoid using methods defined and use words that aren't so generic. In the code you had previous to your last post you were performing some actions on elements that weren't defined on the onReverseComplete callback. Those variables were defined inside the click function therefore they exist only inside that function and not for the callback. You can do some research for variables scope, I'll give you a couple of links later on this post. Another thing is that you were creating a new timeline instance and a set of variables every time you clicked on an element. While GSAP takes the timeline and gets it ready for garbage collection, so when you click again your app won't get bloated with timelines instances, keeping things clean and nice, but you might work sometime with other libraries and/or plugins that aren't so neat, therefore is a good practice to use a loop to assign just once and for all the actions and variables for each element. For that JQuery's each is a great fit. And finally you got the event bubbling issue, you'll see, the close button of your app was inside the element that takes the click event to trigger the animation, so you have to stop the click on the close button for going up to it's parents. For that JQuery's stopPropagation() does the trick, that's why at the beginning of the click function there's an e.stopPropagation, with that you're telling:"hey this click is for you and you only, don't throw your problems to your parents.... they have enough already!!" . And finally there's the onReverseCompleteParams stuff. Those are a callback's best friend because it gives you the way to use your callback on any DOM element you select. Since the function is defined for an "element" we have to indicate what element is that and by stating that the parameter of the function is $(this) we're saying "apply the function to the element that was clicked to begin with". I suggest you the following readings: For a basic but very good Javascript and JQuery tutorials go to W3 Schools, they have the whole thing, JS, Jquery, Dom elements, etc. Is very basic but enough to get you started: http://www.w3schools.com/default.asp A solid and up-to-date source is Mozilla Developer Network, you'll find tutorials and resources of a lot of things: https://developer.mozilla.org/en-US/ JQuery's official site has a learning center, I haven't looked too much into it, but it covers the basic stuff:http://learn.jquery.com/ Javascript's variables and variables scope:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope More on event bubbling or event propagation: http://javascript.info/tutorial/bubbling-and-capturing And last but not least, your app looks very well keep up the good job!! Well I hope this helps you Cheers, Rodrigo.

Hi Dave, You're welcome. Your problem now is variable scope. Give me a couple if hours to give you a proper help. Cheers, Rodrigo

Hi Chris, You're welcome. I'll be waiting for your news and see how things are coming along. My advice will be to avoid as much as you can css animations, GSAP does that and much more, is more intuitive, easy to use and the scaffolding is quite faster than css3 animations. For a more comprehensive reading refer to the following article: http://www.greensock.com/transitions/ Cheers, Rodrigo.

Hi and welcome to the forums. Sorry to hear you're having trouble but it has nothing to do with the engine, I believe the problem is on your code. The thing is that you have an event bubbling when you bind, then unbind and finally rebinding the click event to your elements, so the first time you click both functions are called just once; the same happens on the second click, but on the third the problems begin. When you click for the third time each function gets called two times, on the fourth click each function gets called four times, the next click eight times, then sixteen and so on. That basically is telling the engine run eight times and the engine does so, the problem is that every time the engine starts the new timeline it records the starting values of the element, but eight times and the starting values grow every time the function executes. The element grows and when you click the close button it goes back to the starting value, but the last starting value, therefore the element gets a bigger size. A possible solution could be to eliminate the bind and unbind and use JQuery's on and off. Another possibility would be to create a conditional logic for the click event, so when you click that variable will be true and when the timeline's reverse is completed it goes back to false again, something like this: var tl = new TimelineMax({onReverseComplete: endAnimation}), isTweening = false; $("#yourElement").click(function() { if(!isTweening) { isTweening = true; //your code here } }); function endAnimation() { //your code here isTweening = false; } Like that the element's click will trigger the code only when that condition is met and that'll be after the reverse is complete. Hope this helps, Cheers, Rodrigo.

Hi, Is good to hear that you're coming along with it. As for the starting point, yes offset would be the way to get that, but you're going to need to estimate that point and for that you have to consider the following. The browser window has an available height that doesn't includes the different bars(bookmarks, apps, etc). Lets say that the user's display is 1400 X 800 (width x height) and the available browser height is 720 px. If you have an object with an offset of 600 px that'll be visible when the scroll position is zero. In that same scenario, if you have an object with an offset of 1500 px from the top, when that objects enters the viewport the scroll position wont be 1501 px, it will be 1501 minus the available height, that means 1501 - 720 = 781 pixels, that's how much the scroll bar has moved from the top, therefore your offset parameter for that element using scrollorama will be that. The way to get that is using jquery's height property associated with the window element and the offset property of the element, like this: var browserHeight = $(window).height(),//browser's available height elementPos = $("#yourElement").offset().top,//element's offset position elementTrigger = elementPos - browserHeight;//point at which scrollorama will trigger the tween Hope this helps, Cheers, Rodrigo.

Hi, Superscrollorama does have an option to relate the tween progress based on the scroll position, I'm not a scrollorama expert but if you check the info you'll see it, this is from the official site: All you have to do is experiment a little bit with it. Another option is a function that I made some time ago, you can see it here: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ But it require a little more coding from your part but it does what you need, the tween progress is based on a starting and end point of the scroll position of any DOM element with an overflow property. It gives you that flexibility but it comes with the cost of more coding, but if you check the tutorial and the samples you'll see that is not a very complicated code to do. Hope this helps, Cheers, Rodrigo.

Hi, I remembered that someone else had a similar question some time ago, you can check that post and see if it helps: http://forums.greensock.com/topic/7362-tween-right-to-left-transformorigin-not-working/ The thing is that transform origin only works for transform properties like scale, skew, etc., while width and height are determinated ny the top left corner pc the element. I've created a simple codepen in order to show a simple height growing element and a clip tween revealing the element, you can see it here: http://codepen.io/rhernando/pen/Ekxni Hope this helps, Cheers, Rodrigo.

Hi, Maybe you could try giving the element an absolute position and then give it a bottom:0 property. Finally you could set the height with a TweenLite.set instance and finally tween it to its normal height. Hope this helps, Cheers, Rodrigo.

Hi, Maybe you could try a TweenMax.set instance to center the element before everything else happens. Also you could add an opacity to it as well, like that when the main animation starts everything will be on the right place. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. It's not the easiest thing to do. For the building construction you could try different divs with an absolute position and setting the background position according where they are in the building, then you can set all the heights to zero and then create a timeline that tweens the heights back to normal size, creating a building event. The walking people is a tough one, rather than create an animated gif of the width of the viewport (which will stink up the place if you use fluid layout) with flash with an animation as random as possible will be my best suggestion. Another chance could be to create each walking animation with SVG and then move the SVG object with GSAP but that would require some trial an error until you find the right timing. Unfortunately I'm far from being a canvas or SVG expert, but mainly for the downside you mention, too much kb involved for a "give to me fast!!!" type of world we're living right now. Hope this helps, Cheers, Rodrigo.

Hi The reason for the console log code is to check that everything is on the right place. If not it means that there's a problem with the order of things and probable you should try the window.onload event to create the scrollorama instance. Try that and let me know how it goes. Cheers Rodrigo

Hi Chrysto, I've checked your tuts keep up the good work!! As for the most difficult GSAP stuff, for me was working with the overwrite manager but not the manager itself, the problem was understanding the modifications of the starting and ending values of the tweens involved in the overwriting and how to create a seamless tween/timeline that could work with overwrite more than once. Also the update and invalidate methods gave me a couple of headaches, but the updated was the worst because I was in diapers in terms of GSAP. Cheers, Rodrigo.

Hi and welcome to the forums. Do you have a live sample that we could look at?. For the behaviour you describe it seems that all your elements have the same offset position (which is what triggers the animation start). In order to check where every element is at when the DOM is ready (I'll presume you're using document.ready) you could add this at your code: var fadeEl = $("#fade-it"), flyEl = $("#fly-it"), spinEl = $("#spin-it"), positions = [fadeEl.offset().top,flyEl.offset().top,spinEl.offset().top,]; console.log(positions); Like that you could see where every element is when the tweens are created and if the problems is there or somewhere else. Hope this helps, Cheers, Rodrigo.

Hi, In case you or anyone else is interested David DeSandro (a twitter developer) just released today a great piece of code called Images Loaded. It has a stand alone version (no library dependencies) and a JQuery plugin, you can see it here: http://desandro.github.io/imagesloaded/ Also has a progress setting and callbacks so that could work with what you're doing and it works with IE7+. Hope this helps, Cheers, Rodrigo.

Hi Xnamex, Regarding the animation you mention that it seems to be ok. if that's the case I'll presume that your animation is working as expected but, how about when the error shows in the console?. You also mention that after you eliminated the line loading the ease pack things began to go wrong. Would you mind to elaborate a little bit more regarding that?. Cheers, Rodrigo.

Hi and welcome to the forums. First if you load TweenMax.js it already comes with the ease pack, so no need to include it again. Second; is your animation working as expected?. If it is working, that will led me to think that the problem could be elsewhere, where exactly? I have no idea, in fact I didn't even knew that Qt could work with JS, thought that it was C++ only. Now if the animation is not working it would help if you provide a simple fiddle or codepen with the isolated problem. Cheers, Rodrigo.

Hi, A third way could be a modification of Carl's second proposal. Create a TweenMax.from instance that's paused as a variable and set the progress of that instance with the timeline progress. Like this: var unleash_tl = new TimelineMax({onUpdate:progressBar, onUpdateParams:["{self}"]}), progressBar = TweenMax.from(redProgress, 1, {scaleX:0, paused:true}); /* unleash_tl.... */ function progressBar(tween) { progressBar.progress(tween.progress()); } You can see it working here: http://codepen.io/rhernando/pen/qaEto Hope this helps, Cheers, Rodrigo.

Hi, Like Jack said delay is working but be aware that it'll work only in the first execution of the timeline, in further executions it won't work. Like Jack said the shift children should be, at least after the first one or after the childrens you want delayed by that amount of time. Imagine that you have an empty egg tray and another one with two eggs and someone tells you to move your eggs two "spaces", sure in the second tray there'll be no problem, but in the first one?, wouldn't be the most logical answer to say: "dude, the tray has no eggs, errrrr!!!!". That's pretty much what's happening, you're telling the timeline to move it's children by "delayTime" but at the moment you're saying that the timeline is empty, therefore there's nothing to move. It should be like this: tl .set (boxesParent, {perspective:400}) .to (box1, 0.7, {rotationY:-125, transformOrigin:"right top", ease:Expo.easeOut, onComplete:hideDiv, onCompleteParams:[box1]}, "initAni") .shiftChildren(delayTime, true, 0); I set up a little example so you can see both methods working: http://codepen.io/rhernando/pen/iodrh The sample has the delay method working, in order to see the shiftChildren() method working comment out line 9 and uncomment line 26; and reverse the process to go back to the delay method. Hope this helps, Cheers, Rodrigo.

Hi, That's an odd behaviour, it should be working, are you using the latest version of the engine?. Try getLabelsArray() and see what you get, like this: var timelineLabels = tl_EscenasControl.getLabelsArray(); console.log(timelineLabels); That should return an array of the timeline labels and their respective times in the timeline. Also consider that seek doesn't change the playing state of the timeline, meaning that if the timeline is paused, after you use the seek() method it will remain paused. You can see a little sample here: http://codepen.io/rhernando/pen/omvJI It would help a lot if you could set a live sample, jfiddle or codepen with the isolated issue to get a better idea of what might be happening. Hope this helps, Cheers, Rodrigo.

Hi Dave and welcome to the forums. Yeah an infinite slider is a simple thing with TimelineMax, but when you add user events to the flow things get a little complicated. I remembered a previous post that had a similar issue of unwanted behaviour, you can check it here: http://forums.greensock.com/topic/7523-proper-way-to-stop-jump-and-start-a-timeline/ I checked your code but after a while I decided to give it a try myself to get it done. My only guess with your first pen is that there are many functions going around, so my intentions was to simplify it as much as possible and, so far, I think is done, the code looks like this: var div1 = $("div#div1"), img1 = $("img#img1"), img2 = $("img#img2"), logDiv = $("div#logDiv"), pause = false, delayTime = 1,//standar delay time for repeat and initial play timerElem = {a:0}, tl = new TimelineMax({repeat:-1, yoyo:true, onRepeat:pauseCheck, repeatDelay:delayTime, paused:true}); tl.to([img1,img2], 1, {top:-250, onComplete:pauseCheck, onReverseComplete:pauseCheck}); div1.hover(hoverIn, hoverOut); //this function checks at every cycle if the timeline should be paused or not function pauseCheck() { logDiv.html('timeline pause is: <b>' + pause + '</b>'); if(pause) { tl.pause(); } } function hoverIn() { pause = true; } function hoverOut() { pause = false; tl.play(); } setTimeout(function(){tl.play();},1000 * delayTime); You can see it working here: http://codepen.io/rhernando/pen/KvFBf Also you could check this one too: http://codepen.io/rhernando/pen/ydfBb I still believe that the second pen is a better approach for any type of content slider because it gives you more flexibility. Hope this helps, Cheers, Rodrigo.

Hi Andrei and welcome to the forums, Unfortunately the behaviour you're experiencing is expected. Basically transform origin is a css property that states the origin point of a particular transformation, in your case two rotations, but what it doesn't do is to translate the object, if you check the element's properties with firebug or developer tools, you'll see that the transform matrix numbers associated with translation never change, whereas the ones corresponding to rotation do change, therefore the values of X and Y are zero and zero, which means that you're object just rotated but never got translated to a new position. Then when the second tween of the timeline happens, it takes the rotated element with a transform origin point "left top", but since the image's still in its original position it's positioned with that rotation but with the new transform point, which is "right top". I made a simple image that I hope illustrates a little better what I'm saying: The blue square is the original element, the fuchsia one is the element rotated 90° CW with a transform origin "left top" and the green one is rotated 90° CW with a transform origin "right top". The red dots in indicates the transform origin of each square and the "TL" means top left to indicate where the top left corner is. My suggestion would be to keep just one transform origin and add translation in order to simulate a falling leaf, you could also make some experimentation with the bezier plugin in order to create a falling path. The bezier choice could mean a little more work but since you can orient the element to the bezier path you can forget about the rotation and focus just on the path and let GSAP do all the job for you. Hope this helps, Cheers, Rodrigo.

No problemo, glad to help. Cheers, Rodrigo.

Hi, The problem is that you're creating the second timeline and is active, ie, is playing since the moment you created it, so when you add the TweenLite instances the timeline playhead is not at the 0 position. However if you change your code to this: var animateSecondRound = new TimelineMax({paused:true}); function animateStuff2(){ animateSecondRound.add(TweenLite.to(myDivs, 3, {left:"+=100"})); animateSecondRound.play(); } It works as expected. I updated your fiddle so you can see it working: http://jsfiddle.net/5t9EU/4/ Hope this helps, Cheers, Rodrigo.

Hi, The only thing I can think of is checking the timeline's _active status. That , as you might have guessed, tells you whether or not a timeline instance is active, by returning a boolean value. You mentioned a root timeline, so consider that this works different with an exportRoot timeline than a traditional timeline, for example the following code: var div1 = $("div#div1"), btn1 = $("button#btn1"), btn2 = $("button#btn2"), btn3 = $("button#btn3"), btn4 = $("button#btn4"), tl1 = new TimelineMax({paused:true, repeat:1, yoyo:true}), tl2; tl1.to(div1, 3, {x:300, y:200}); btn1.click(function() { tl1.play(0); }); btn2.click(function() { tl2 = TimelineLite.exportRoot(); }); btn3.click(function() { console.log(tl1._active); }); btn4.click(function() { console.log(tl2._active); }); When you check tl1 just when the page is loaded you get false, if you check tl2 you get an error (tl2 is still undefined ). Then if you export the root, but don't play tl1 and you check you'll get tl1 = false and tl2 = true (maybe Jack or Carl could explain that). Then if you play tl1 and check while it's playing you'll get true and true, and after the yoyo - repeat when all is done you'll get false and false. The point is that when you do the export root and the timeline hasn't played since being exported (it may have played before being exported) and check you'll get true even if the timeline is idle. And I'm going to leave it here because there's a huge electric storm here in the andes and i'll get a blackout any time. Hope it helps, Cheers, Rodrigo.