Rodrigo

Hi, It looks like you're asking for the parent's timeline labels and time, not the nested one, therefore the array is empty. Change your code to this: var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); tl2.addLabel("tl2"); tl1.append(tl2); console.log(tl2.getLabelTime("tl2")); console.log(tl2.getLabelsArray()); I also took the liberty to update your fiddle so you can see it working: http://jsfiddle.net/fa7Wd/13/ Hope this helps, Cheers, Rodrigo.

Hi, Does raphael allows the use of clipPath and defs?, sorry I'm ignorant about it and will like to know. What I've done is to create a common svg element: <?xml version="1.0"?> <svg style="position:relative;" id="paper1" width="300" height="50" viewPort="0 0 300 50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect style="position:relative;" id="rect1" x="0" y="0" width="100" height="50"/> </svg> And then tween an object value and pass that through an onUpdate callback with JQuery: $(document).ready(function(){ var paper1 = $("#paper1").children().first(), elemWidth = {a:100}; TweenMax.to(elemWidth, 1, {a:300, onUpdate:updateFn}); function updateFn() { paper1.attr('width', elemWidth.a); } }); This works but is a little more code than an ideal situation and if you get more elements that would mean more coding and more callbacks. I hope someone with more SVG knowledge can take a hit to this. Also a live example (fiddle or codepen) would be very helpful. As you can see I'm not an SVG expert because is not my focus right now, but learning svg and canvas are on my to do list. Hope this helps, Cheers Rodrigo.

Hi, I believe that is a Raphael element that you're trying to tween right?, if that's so you should use the raphael{} wrapper, something like this: TweenMax.to($('#mask-1').children().first(), 2, {raphael:{width:300}}); //or if you store the element in a var TweenMax.to(mc, 2, {raphael:{width:300}}); I'm not a raphael expert but at least that's what i recall from the api reference. Hope this helps. Cheers, Rodrigo.

Hi, You know this was more simple than I thought. The thing is that in the first code you tried you were calling the add method every time the for loop executed so with that you're adding each tween at the end of the timeline. The second and third approaches were right on the spot regarding the for loop, but the problem was the creation of the timeline. The thing is that you created the tweens but by doing this: return new TimelineLite({paused: true, onComplete: callback, tweens: tweens}); no tween was included in your timeline, so the tweens were created and immediately executed that is why no stagger was happening. So what you should try is the last code I proposed: function getButtonsInAnimation(callback) { var i, spots, spot, tweens = [], timeLine = new TimelineLite({paused:true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tweens.push(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:200, top:100}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} )); } return timeLine.add(tweens, 0, "stagger", 0.05) } Anyway I updated the fiddle. Hope this helps, Cheers, Rodrigo.

Hi, I tested a few things and came up with the fact that not defining the position in which each tween is added to the timeline could be causing this issue, check this fiddle and play around with it, if you delete the '+=0' there's no staggering but if you keep that it will respect the stagger time you're giving it. I also added some callbacks into the tweens so you can also check how 'sequence' align works with and without a stagger time. tl.add([tween1, tween2, tween3], "+=2", "stagger", 0.5); If you don't declare "+=2" or maybe in this case "+=0" all the tweens are added at time 0 in the timeline, even if you declare an align string and stagger time. Maybe Carl or Jack could explain why this happens, I at least don't know. Cheers, Rodrigo.

Hi, In your first approach try changing the align method (check the api) to "stagger", like this: function getButtonsInAnimation(callback) { var i, spots, spot, tween = new TimelineLite({paused: true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tween.add(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:290, top:168}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} ), undefined, 'stagger', 0.05); } return tween; } For your last approach you could try multiplying the delay time by the i value in the for loop, something like this: function getButtonsInAnimation(callback) { var i, spots, spot, tweens = []; for(i in spots = shuffle(hotspots)) { spot = spots[i]; tweens.push(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:200, top:100}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut, delay:0.05 * i} )); } return new TimelineLite({paused: true, onComplete: callback, tweens: tweens}); } Like that your tweens will be add in your timeline starting with the first value of i and then going up. And finally you could also try creating the array of tweens in the for loop and then add the array, like that your code will be more simple and you'll be tackling one thing first and then the other, so if you want to change something it will take less time doing so, like this: function getButtonsInAnimation(callback) { var i, spots, spot, tweens = [], timeLline = new TimelineLite; for(i in spots = shuffle(hotspots)) { spot = spots[i]; tweens.push(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:200, top:100}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} )); } return timeLine.add(tweens, "stagger", 0.05) } Hope this helps, Cheers, Rodrigo.

Hi, It's just a syntax issue, you should declare it like this: $(topArea).animate({top: "-40px"}, 250, "easeInOutBounce"); And also you could declare it like this: $(topArea).animate({top: "-40px"}, {duration:250, easing:"easeInOutBounce"}); First put "ease", then if it's in/out/InOut and finally the easing function you want to use, unless you're using a native JQuery easing function like "linear" or "swing", in those cases there's no need to put "ease" at the beginning just the easing function's name as a string. Cheers, Rodrigo.

Hi Jeff, You mean using something like the JQuery UI slider (source) to control a timeline progress forward and backward?. If that's the case it's very simple, all you have to do is set the minimum and maximum values for the UI slider and associate the slider current value to a timeline progress, something like this: var scrollPos, progressValue; $(function() { $( "div#scrollMarker" ).slider({ range: "min", value: 0, min: 0, max: 1000, slide: function( event, ui ) { scrollPos = ui.value; progressTween(); } }); }); function progressTween() { progressValue = (scrollPos / 1000); TimeLine.progress(progressValue); } There are also a lot of slider codes out there in case you don't want to use JQuery's slider, just google. In terms of your second request I'm not quite sure what is what you want to achieve. Is a custom scrollbar using drag & drop animated with GSAP?, a menu that scrolls through the content of the div using the scrollTo plugin?. A little more info would be great. Cheers, Rodrigo.

Hi, In order to get the properties being animated you could use this: var div1 = $("div#div1"), log = $("div#log"); TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { log.html('top: ' + tween.target.css('top') + ' // ' + 'left: ' + tween.target.css('left')); } You can see it working here: http://jsfiddle.net/rhernando/rLDTu/1/ Cheers, Rodrigo.

Hi, I'm going to presume (and I'm maybe wrong) that your not familiar with Modernizr and YepNope. Those are two very cool libraries that could get the job done. Modernizr will test the visitor's browser in order to check if it support a specific feature (in this case css3 3D transforms) and YepNope will take that test result and load a specific set of files (it could also load just a single file) such as js and css files that will be loaded for that type of browser, like this there's no checking browser version or anything like that, you're just looking for if the browser supports that feature. In this case it would be like this: <script src="scripts/modernizr.3D.test.js"></script> <script src="scripts/TweenMax.min.js"></script> <script> Modernizr.load({ test: Modernizr.csstransforms3d, yep : ['scripts/css3d.js', 'scripts/yepnope/css3D.css'], nope: ['scripts/No.css3d.js','scripts/yepnope/No.css3D.css'] }); </script> So you just load the libraries (modernizr includes YepNope) and then you run the test. Once the test gets the results it takes the proper action. If the browser supports 3D transforms will load the files in the yep key:value pair, if it doesn't it will load the files in the nope key:value pair. The beauty of it it's that you can customize modernizr to include the test's you need, includes a series of classes in the html tag of the document and weights only 8.6 kb minified (you could go beyond it and gzip it and it would be even smaller) including YepNope. The document will look like this for a browser that supports 3D transforms (firefox 18): <html class=" js canvas no-touch csstransforms csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml" style=""> And like this if it doesnt (IE9): <html class=" js canvas no-touch csstransforms no-csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml"> Also modernizr can chek for and incredible set of stuffs allowing to create more concise code for each situation, so instead creating humongous css and js files filled with hacks you create separated files for each situation allowing you to deal with painfull degradation for IE browsers. In an aside note using YepNope independently allows you to create your own conditional logic to load your files both css and js. Take a look at them: http://modernizr.com/ http://yepnopejs.com/ Cheers, Rodrigo.

Hi Jamie and all, Lately I've been dealing with some personal issues that hasn't allowed me to participate in the forums in a good fashion. You're right the code should be in a $(window).load() event to work as expected, for the same reason I've tested my codes only in firefox 17, and for that I ask everyone to forgive me, but I'm sleeping like crap, dealing with my issues and my business so my free time is small. I hope if isn't too much to ask for you to complete the examples, the example's code is complete in the html file so there's no javascript file to download, in fact the script, in a moment when i lost a chromosome, is between the head tags. Again sorry everyone for the inconveniences and thank you for your understanding. Like always....Cheers, Rodrigo.

Hi, I've updated the examples with the code proposed by Jamie, but because the original sample had a menu and some animation that couldn't allow to see what happened on page refresh. Here are the updated links: http://websnap.cl/samples/scroll.to.sample.page.refresh.1.html http://websnap.cl/samples/scroll.to.sample.page.refresh.2.html The first one uses $(document).ready(function(){ TweenLite.set(window, {scrollTo:0}); //Rest of the code }); The second uses $(document).ready(function(){ $(window).bind('beforeunload', function () { window.scrollTo(0,0); }); //Rest of the code }); Cheers, Rodrigo. UPDATE: I moved the examples to my new blog, and created a slightly better sample for the page refresh here: http://codeaway.netii.net/sample.code/scroll.to/scroll.to.sample.page.refresh.html

Hi, You're welcome. I updated the example with the TweenLite.set, so you can see it in action. Now it would help if you could post some of your code or setup a fiddle to see why is the page going back to the last scrolled position, without seeing some of your code we'll be guessing. It maybe event bubbling, so it could help you to add some console.log() or alert() to your event handler's code to see if they keep firing after page refresh. Hope this helps, Cheers, Rodrigo.

That works perfect, just use it at the beginning of $(document).ready and you're set to go: $(document).ready(function(){ TweenLite.set(window, {scrollTo:0}); //Rest of the code }); Cheers, Rodrigo.

Hi Brigitte, Mhhh... honestly i don't know any other method than ctrl + F5 in order to clear the current document's cache of the browser. You're right in a tween scrolling environment page refresh creates quite a mess but also you have to consider that page refresh is not a standard user behavior, is more a thing that we do when we're testing over and over again what we're doing, you also should keep in mind that clearing the current document's cache would force to reload everything again, and that, if your page has a lot of images and scripts loading, can become a little annoying for some "give it to me now!!" type of users. Anyway doing a fast search on google i found this, take a look at them: http://msdn.microsoft.com/en-us/library/ms536691%28VS.85%29.aspx http://stackoverflow.com/questions/8155064/how-to-programmatically-empty-browser-cache Hope this helps, Cheers, Rodrigo.

Hi, I've been struggling with something like this lately. The fact is that I'm tweening quite some properties on a click event and the selector changes on every click. It basically goes like this, when the "next" button is clicked it takes the current active element and the following element and assign each one a different tween. If you click the "next" button again it takes the active element (which was the following element before) and the following element and they are tweened. In the same fashion there's a previous button. The problem is that if you click fast the elements get out of position if a return false is not present while detecting if the element is being tweened. This basically happens with the position properties, ie, left, right, margin left, margin right, x, etc. I've tried using relative and absolute positioning, increasing and decreasing present values with '+=' and '-=' or setting the values directly, and the idea is getting a smooth tween, pretty much like Carl's second fiddle. I also tried to create a timeline with labels in it so when you click a button you just use the tweenTo method to go smoothly to that label and if you click fast it just keeps advancing at the time scale of the timeline. Since the final idea is to create a thumbnail slider with 3D effect (this would be the degraded version of the script) there's a good chance that someone could come up with 20+ images and creating a timeline by hand putting a lot of labels could become quite a chore and use a lot of code which is what I'm trying to avoid. Here's and example: http://jsfiddle.net/rhernando/Cvs5N/1/ if you click fast the next button and at normal rate the previous button and then refresh the page you will see how the elements get out of position, and if you remove the comments of the return false line on each function you'll get the elements in the right position but not a smooth animation. Any thoughts will be very appreciated. Cheers, Rodrigo.

Hi, This is happening to me too, the last update of TweenMax.min.js does crashes a specific version of Dreamweaver CS4, the solution: use the uncompressed file and before you upload your file to the server point to the compressed one using a simple text editor. Besides so far using the uncompressed version has it's upside, code hinting for naming one, for example if you write TweenMax. inmediatly it brings every function asociated with the expression, which has allowed me to play a lot with some features. I asked Carl about this and Him and Jack were kind enough to tell me that they are aware of this but it's quite difficult to pinpoint what is crashing CS4. Besides if you look into the crash report there's not a lot of info to troubleshoot this issue. Also this is not happening in every CS4 so it's even harder to find out. Another solution would be to create your own compressed version of TweenMax.js but i wouldn't recommend that. Let's hope that the next update won't crash this specific version of CS4. By the way my version is 10.0 build 4117. Cheers, Rodrigo.

Hi, Take a look here http://www.pixastic.com/ Since it uses values and a function to set the colorize properties, you can tween those values and then pass them to the function and execute it using onUpdate to pass the values each time the tween updates. It could be like this: var colors = { greenImg : 0, redImg : 0, blueImg : 0 }, tn1 = TweenMax.to(colors, 1, {greenImg:1, onUpdate:updateFunction, paused:true});//to colorize it green function updateFunction() { //pixastic code here } $("#button").click(function() { tn1.play(); }); Hope this helps, Cheers, Rodrigo.

Hi, You should give your img tag an absolute position and a z-index of 0, and the content on your li (I'm going to presume that you're making a menu) a bigger z-index, like this: <style> img{ position: abosolute; top:0; left:0; z-index:0; } li a{ z-index:5; } li a:hover{ z-index:5; } </style> With that code you got one in top of the other and the code above them, after that you just have to create your events and handlers in order to achieve the effect. Check this fiddle, is not the same thing but is pretty close http://jsfiddle.net/4ALZb/6/. Hope this helps, Cheers, Rodrigo.

Hi, I'm pretty sure that there's a better solution for this, but for what i saw creating a tween for the child element solves the problem in IE but creates quite a mess in any other browser, so what I would do is to use feature detection (http://modernizr.com/ or other) in order to create a code that applies only for IE (what I like to call "painful degradation"), and another that works for the rest of the browsers. Playing with the fiddles i realized that you should check the offset position of the parent and child elements, then use an expression with the relation between both offsets and then a function that updates the offset of the child element as the tween progresses. Now this is a lot of work and before going into that maybe you could put the child div outside the parent and give it a bigger z-index, absolute position and tween it independently and at the same time with the bigger div. Like Carl said the solution is not simple, but depending on what you want to achieve may not be too complicated. Best, Rodrigo.

Yikes!!! Sorry about that, I forgot how the plug in works in that matter. Well you learn something new everyday. Cheers, Rodrigo.

Hi Jophine, Mainly your problem is that in the css plugin x and y stands for css3 2d transform properties translateX and translateY or translate with an array of values, and those properties are not supported by IE8 and older, just from IE9, something like this: transform: translate(500px, 700px) //equals to TweenLIte.to(bg, 10, {css:{x:500, y:700}}); Your solution is to change the css position property of your element to relative or absolute and use top and left, like this: TweenLite.to(bg, 10, {css:{left:'+=500', top:'+=700'}}); The += before the values indicate that you are adding those amounts to the actual values of top and left of the element. I updated your fiddle so you can check it: http://jsfiddle.net/cdWhF/45/ Hope this helps, Cheers, Rodrigo.

Hi, Try the tweenFromTo method, check the api reference: http://api.greensock...ml#tweenFromTo() var tl:TimelineMax = new TimelineMax(); tl.append( myTimeline.tweenFromTo("myLabel1", "myLabel2") ); Hope this helps, Cheers, Rodrigo.

No problem, actually i remembered because the second post is from a couple of weeks ago, so i remembered reading about it not too far ago, if that post wouldn't existed you just would have to wait until Jack or Carl give you an answer.

Hi, Maybe this could answer your question: http://forums.greensock.com/topic/6773-requestanimationframe-ticker-keeps-on-going/ http://forums.greensock.com/topic/6811-tween-engine-always-running/ Jack explained in both posts why the engine keeps running even with no active tweens. Cheers, Rodrigo.