Rodrigo

Hi Jack, thanks for the answer and sorry for not coming back to you before. The thing is I tried what you said but it doesn't works, but filling the timeline with pauses and console.log's brought to me the fact that the previous tween of the timeline is the one keeping the old value, and therefore invalidating that tween made it work. in the following fiddles do as follows: Play the timeline. Change Height and play the timeline. Reset the fiddle to clear all init data Change Height and play the timeline. Restore Height and play the timeline. As you see invalidating the previous tween allows playing the timeline with the changed property. http://jsfiddle.net/rhernando/KaerE/ (Invalidate the changed tween) http://jsfiddle.net/rhernando/KaerE/1/ (Invalidate the previous tween) Also I ended up having quite a lot of problems by adding the set tween at the beginning of the timeline so that turned to be a bad approach. Cheers, Rodrigo.

Hi, Is possible to invalidate just a single property?. I have a timeline and after the first execution it stores the initialization data for future play. The thing is that one of the tweens nested in the timeline could change, because the height property of the target element changes. But if the timeline plays again the height is the original value not the changed one, which causes to look bad. So far I've sorted out like this: tl1 = new TimelineMax({paused:true, onComplete:comp}); tl1 .set(div1, {left:50, height:100}) .to(div1, 1, {left:250}) .to(div1, 1, {height:200}); By putting the set tween it takes the values to what I want, whether is the original value or the changed one. But it would be great to clear just that value. Cheers, Rodrigo.

Hi Sigmund, You just have to fix the background image position to top right and works: .div2{ width:10px; height:100px; float:right; position:relative; top:10px; background:#00f url('http://upload.wikimedia.org/wikipedia/commons/b/b6/Building-300x100.jpg') no-repeat top right; } I've updated the fiddle to see it in action: http://jsfiddle.net/rhernando/EL7qJ/2/ Cheers, Rodrigo.

Hi and welcome to the forums, Mhh not the easiest trick to accomplish... I wanted to work with some friction tween function some time ago but never got started properly, just some useless trials and some math going around but nothing really useful. For starting a tween with a strong easeIn function, so the element accelerates as it falls. Then when it hits the ground a timeline composed by the amount of "bounces" you wish the element to take and set dynamically how high the element goes on each bounce, but it would take quite some code to achieve that. You could create a function that populates the timeline (that should be paused), through a for loop and reduce the y position each time the loop executes, that will be the real trick. And after the element hits the ground you resume the timeline. Sorry to offer nothing but ideas but I'm a little short of time now. If I can come up with something in the next days I'll post it. Hope this helps, Cheers, Rodrigo.

Hi, As far as I know transform origin works only with CSS3 transform properties like scale, rotate, skew and such, while height and width are changed taking the top left corner as origin point. Although I'm not completely sure about this i looked at documentation of CSS1 at the W3C site and in MDN and didn't find anything regarding the origin point of height and width. A possible solution would be to give the element a float:right value and see what happens, that should force the element to the right side of it's parent. http://jsfiddle.net/rhernando/EL7qJ/1/ Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums, The animation looks very good, congratulations!! The way I'd do it would be to create a timeline with the complete intro animation, you put labels inside(this way you can avoid the setTimeout functions) like this you can use the tweenFromTo and tweenTo methods in order to go a specific label (if desired), check the api for further info. In order to get every circle in the same position all the time the best way would be with a fromTo tween, like that you can control both positions.The timeline will also be very helpful in order to reverse, pause, stop, seek, resume and do a lot more cool things with the animation. And just a couple of suggestions, first the css:{} wrapper is no longer required, the engine detects the properties and send them to the css plugin. myTween = TweenMax.to( circleArr[0], .5, { zIndex:0, bezier: { curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }); Second update to the newest version (1.9) and finally in order to get things a little more simpler you could use a javascript framework like JQuery or Prototype, specially considering the event handlers and crossbrowssing it could make your life quite easier. Hope this helps, Cheers, Rodrigo.

Hi, Maybe you could try setting your circle wipe with a border radius of 50% and don't modify it during the tween in order to keep it as a circle all the time, because right now you're starting with a square and you're ending with a circle. I tell you this because I've experienced some sync problems in webkit when tweening shadow and scales. Another solution could be to create separate tweens for both properties, that is one tween for the size (height and width) and another for the border radius and then put both of them inside a Timeline so you can control both in a simpler way. Hope this helps, Cheers, Rodrigo.

Hi Pop, killTweensOf is a function that works via TweenMax, like this: TweenMax.killTweensOf(glb[1]); Check the api for more details. Cheers, Rodrigo.

Thanks Carl, Actually I never thought about asking if Preeti was looking for something that allowed seeing 3D transforms in IE9, should've started by that Cheers, Rodrigo.

Hi, In order to indicate or point the files with YepNope using modernizr, just do what I said in my first post in this thread, also take as a guide the example attached: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Modernizr</title> <script src="scripts/modernizr.test.js"></script> <script src="scripts/jquery.latest.js"></script> <script src="scripts/TweenMax.min.js"></script> </head> <body> <div id="div1"></div> <div id="div2"></div> <script> Modernizr.load({ test: Modernizr.csstransforms3d, yep : ['scripts/css3dYep.js', 'styles/css3DYep.css'], nope: ['scripts/css3dNope.js','styles/css3DNope.css'] }); </script> </body> </html> That's the entire code of the example, as you can see the div elements just have ID's, no css is loaded. The libraries loaded are JQuery (for selecting the elements), TweenMax and Modernizr (which contains YepNope). At the end the modernizr test is executed, it checks whether or not the user's browser supports CSS3 3D transforms. If the browser support 3D transforms (firefox, chrome, safari and opera) then the following files are loaded: css3dYep.js (contains the code which appends the text to "div1" and animates "div2") css3DYep.css (contains the style for "div1" - blue background and white letters - and for "div1" - pink background -). If the browser doesn't support 3D transform (IE9-) the following files are loaded: css3dNope.js (contains the code which appends the text to "div1" and animates "div2") css3DNope.css (contains the style for "div1" - red background and black letters - and for "div1" - pink background -). Finally it would be very helpful if you can set a live example or provide some code in order to see exactly what is it that you're trying to do and what is giving you problems, because, as you can see, the only thing I can do is just keep repeating myself. Hope this helps, Cheers, Rodrigo.

Hi, That message means that IT IS working, if you check the code for the fallback array, that means the files loaded in the nope value, you'll see that the red background, the text and the animation of the pink element are in those files: JS var div1 = $("div#div1"), div2 = $("div#div2"); div1.append('<p>This Browser DOES NOT SUPPORT CSS 3D Transforms. BUMMER :_(</p>'); TweenMax.to(div2, 2, {left:200, repeat:-1, yoyo:true}); CSS #div1{ height:50px; width:500px; line-height:50px; background:#F00; } #div2{ height:100px; width:100px; background:#f0f; position:relative; margin:50px; } And if you check the same page using firefox, chrome, safari or opera you'll see that the div element has a blue background, white letters and the pink element is making a 3D transform tween: JS var div1 = $("div#div1"), div2 = $("div#div2"); div1.append('<p>This Browser DOES SUPPORT CSS 3D Transforms. HURRAY </p>'); TweenMax.to(div2, 2, {rotationY:360, rotationX:45, repeat:-1, yoyo:true}); CSS #div1{ height:50px; width:500px; line-height:50px; background:#00F; border-radius:10px; color:#fff; padding:0 10px; font-weight:bold; } #div2{ height:100px; width:100px; background:#f0f; position:relative; margin:50px; } Remember that since IE9- doesn't support CSS3 3D transforms, yepnope is going to load the files you indicate if the modernizr test fails, and if you don't indicate any files, is not going to load anything. So keep in mind to always include the nope indication and point to some files in there otherwise you'll end up with a page without css and js. Hope this clarifies a little more. Cheers, Rodrigo.

No problemo Phil, if more questions come up, keep asking. Cheers, Rodrigo.

Hi and welcome to the forums. Mhhh it's a strange thing since both modernizr and YepNope work with IE6+ and as far as I know even with devices browsers. Check if you're pointing to the right files and/or paths in the modernizr.load function. Remember that the function takes key:value pairs and that the yep and nope test can take arrays as their values. Also see if you downloaded the correct file from modernizr. In order to get the files you have to do the following: Go to the download area in modernizr.com and select the tests you want to check By default YepNope is selected but anyway is not a bad idea to check. Then click on generate: And finally copy/paste the generated code into your text/html editor and save it. Then you do what's in my first post in this thread and it should work. Anyway i uploaded a live example that i have in my pc that is working with IE7+ (i don't test IE6 anymore but it should work). It has all the code and styles all you have to do is to update to the current version of GSAP since it's working with 1.8.0 Also it would help if you could set a live example to take a better look. Hope this helps, Cheers, Rodrigo.

Hi, Yesterday I couldn't set an example of my idea, so here it is: http://jsfiddle.net/rhernando/k5gm4/ As you'll see i didn't use the code suggested by Paul Irish because on further experimenting you get the same result with setInterval, maybe someone with more experience in this could enlighten us a little more in order to know what's the best choice. I chosen setInterval only because is less code. Cheers, Rodrigo.

Hi, It maybe a way to do it. If you check the demo with firebug or developer tools while you're scrolling up and down you'll see this (this captures are taken wit firebug 1.11.2 in Firefox 19). If you check there's two main elements that are going to change some of their css properties, wrapper and sp-scroll-bar, if you scroll down a little you'll see this: And if you scroll to the point where rotations begin to happen, you'll see this: As you can see you can track the change of either of those elements in order to get your tweens/timelines going, the only problem is that, as far as I can see and I maybe wrong about this, the best choice will be the scroll bar (class="sp-scroll-handle"). So all you have to do is relate the change in the top property of this element to the progress value of your tweens/timelines. The challenge is to find something in the plugin's code to do it and by taking a quick look to it I've found nothing, and if that's the case personally I'll spend my time creating my own solution without the plugin. The other way is to add some sort of Enter Frame event to constantly check the scroll handle's top property and use that to set the progress of the tweens/timeline. Honestly i would go with the second option and in that regard you can read this article to see how you can do it. Now in order to relate the scroll handle position and the progress of the tweens you can check this tutorial I made some time ago. And just like Carl said it would be nearly impossible to get the two plugins to work together in harmony. Hope this helps. Cheers, Rodrigo.

Hi and welcome to the forums, Sure Greensock can handle any numeric value you throw at it so you can easily tween it. In this case you have to create an object and add a key:value pair, tween the value of that object and with an onUpdate callback pass that value as the timeline progress, something like this: var tl1 = new TimelineMax({paused:true}), tl1Prog = {a:0}; TweenMax.to(tl1Prog, 1, {a:1, onUpdate:updateFn}); function updateFn() { tl1.progress(tl1Prog.a); } Remember that the progress is between 0 and 1, and also keep in mind that you could add easing functions to the tween that changes the value. Hope this helps. Cheers, Rodrigo.

Ha ha ha, see I told you there was a better way to do this Thanks Carl!!

Hi, You're welcome. The fact is that when you create a timeline and use the convenience to method, the tween is added to the end of the timeline so there's no possible overwrite. You could try doing it with a negative value to generate an overlapping, therefore an overwrite should happen: var tl1 = new TimelineMax(); tl1.to(element, 1, {left:100}); tl1.to(element, 1, {left:50}, "-=1");//inserted 1 second before the timeline end For the same reason, as you said, when you create the tweens in the timeline, they keep the original values provided, if you modify your second code to this: var distanceX = 0; var distanceY = 0; var mytween = new TimelineMax(); function startAnimation() { var element=$("#element"); mytween.to(element, 2, {left:670}); mytween.to(element, 1, {rotation:90}); mytween.call(getXY); mytween.call(function() {alert("distanceX: " + distanceX + " distanceY: " + distanceY);}); mytween.to(element, 2, {top:distanceY}); mytween.to(element, 1, {rotation:0}); mytween.to(element, 2, {left:distanceX}); } function getXY() { distanceX=500; distanceY=300; } The element will tween to left:0 and top:0, because even with the values changing before the animation takes place, the tweens were created and putted in the timeline with the original values for distanceX and distanceY, those values never get to the timeline. In fact you could add this lines to the getXY function, after setting the new values to see it for yourself: var delTweens = tl1.getTweensOf(element); console.log(delTweens); If you go to the console and see the vars element of the last two tweens you'll see that the values are 0 for both. As for deleting the old tweens, if you don't the new tweens will be added to the end of the timeline, and since distanceX and distanceY are not defined the timeline will break and nothing will happen. Another possibility is to define the values of distanceX and distanceY as 0 in the variable creation, add labels to the timeline where the tweens are going to get the element to those values and then insert the new tweens right in those labels to force an overwrite. var distanceX = 0; var distanceY = 0; var mytween = new TimelineMax(); function startAnimation() { var element=$("#element"); mytween.to(element, 2, {left:670}); mytween.to(element, 1, {rotation:90}); mytween.call(getXY); mytween.call(function() {alert("distanceX: " + distanceX + " distanceY: " + distanceY);}); mytween.to(element, 2, {top:distanceY}, "label1"); mytween.to(element, 1, {rotation:0}); mytween.to(element, 2, {left:distanceX}, "label2"); } function getXY() { distanceX=500; distanceY=300; mytween.to(element, 2, {top:distanceY},"label1"); mytween.to(element, 2, {left:distanceX}, "label2"); } So like that when the function executes it'll add the new tweens in the same place where the old ones are but with the new values, forcing the overwrite and tweening the element to the new values. Cheers, Rodrigo.

Hi, The main thing is that when your first function executes it adds all those tweens to the timeline, therefore when is time to change the top and left positions there are not deifned yet. What I can advice (and there's probably a better way) is to remove all the tweens added by the first function and then add new ones with the changed values: var distanceX = 0, distanceY = 0, tl1 = new TimelineMax(), element = $("div#element"), changeValues = false, btn1 = $("button#btn1"); function getxy() { distanceX = 300; distanceY = 100; var delTweens = tl1.getTweensOf(element); tl1.remove(delTweens); tl1.to(element, 1, {rotation:75}) tl1.to(element, 1, {top:distanceY}); tl1.to(element, 1, {left:distanceX}); } function startAnimation() { tl1.to(element, 1, {left:200}); tl1.to(element, 1, {top:200}); tl1.to(element, 1, {rotation:45}); tl1.call(getxy); tl1.to(element, 1, {rotation:0}); tl1.to(element, 1, {top:distanceY + 'px'}); tl1.to(element, 1, {left:distanceX}); } startAnimation(); So like that when you call the getxy function you all the tweens inside the timeline are removed and you add new ones, of course if you don't want this to happen unless the user want the original values of distanceX and distanceY changed, something like this: var distanceX = 0, distanceY = 0, tl1 = new TimelineMax(), element = $("div#element"), changeValues = false, btn1 = $("button#btn1"); function getxy() { if(changeValues) { distanceX = 300; distanceY = 100; var delTweens = tl1.getTweensOf(element); tl1.remove(delTweens); tl1.to(element, 1, {rotation:75}) tl1.to(element, 1, {top:distanceY}); tl1.to(element, 1, {left:distanceX}); } } function startAnimation() { tl1.to(element, 1, {left:200}); tl1.to(element, 1, {top:200}); tl1.to(element, 1, {rotation:45}); tl1.call(getxy); tl1.to(element, 1, {rotation:0}); tl1.to(element, 1, {top:distanceY + 'px'}); tl1.to(element, 1, {left:distanceX}); } btn1.click(function() { if(changeValues) { changeValues = false; } else { changeValues = true; } }) startAnimation(); So like that you can use the whether the original values or the new ones depending on a specific event that changes the the boolean to true, otherwise the timeline goes as planed. Check this http://jsfiddle.net/rhernando/tBZmA/1/ Maybe using the add method you can get something useful and less cumbersome but unfortunately that's all the time i have right now. Sorry for not coming up with something better Hope this helps, Cheers, Rodrigo.

Hi, Considering the fact that is a footer what your tweening to I'm going to presume that is at the bottom or near the bottom of the page. If that's the case you can use the "max" method of the scrollTo plugin: TweenMax.to (window, 1, {scrollTo:{y:"max"}, onComplete:myFunction}); Like that the engine takes care of everything. You should consider that the scrollTo plugin will take the coordinates you're giving and put that point at the window's top position. To see it in action see this sample and click on the "scroll to marker" button and look that the purple div will end up at the top of the window, if you check the code you'll see that the marker position is obtained with the offset method. But still is an odd behavior, even if there's no space for scrolling the page or element the tween should play and complete, check this sample: http://websnap.cl/samples/scrollto.no.scrollbar.html Hope this helps, Cheers, Rodrigo.

Hi, In fact greensock doesn't depend on any other library, now if you want to use greensock's JQuery animate plugin and JQuery selectors you'd need to load the library. Something like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset=utf-8" /> <title>Untitled Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/plugins/CSSPlugin.min.js"></script> </head> <body> <script> </script> </body> </html> And then you can insert your script between the body tags. If you're using JQuery: $(document).ready(function(){ //CODE IN HERE }); If you're not using JQuery or other library, then you need to use pure javascript what brings the issue of crossbrowsing, which is not a small one, for that reason i will recommend you to use JQuery or other library (prototype is a good one to replace JQuery). Also using JQuery brings the benefit of a library that has been ultra tested and has lots of information, dedicated sites, tutorials, plugins, books, etc. to help you in learning how to use it. If you're interested in using JQuery i can recommend you the following sites: http://learn.jquery.com/ This is the official JQuery learning center, for the basic stuff to get started. http://www.jquery4u.com/ Blog dedicated completely to JQuery, lots of plugins and techniques, from beginner to advanced user. http://www.oscarotero.com/jquery/ Oscar Otero from Spain created a JQuery cheat sheet, this is not a way to "cheat" in JQuery because there's not such thing as that, but is q quick guide to the official JQuery api reference for different versions of the library. https://developer.mozilla.org/en-US/ Mozilla's developer network is always a good point for references, they have a lot of documents, tutorials and links to good resources. http://stackoverflow.com/questions/tagged/jquery And last but not least is stackoverflow, which is some kind of web development google, there's a lot of questions in there and also a lot of answers. Now if you're looking for a book to read I honestly wouldn't put that as a top priority, I've read books but didn't learn a lot from them but I'll recommend you the following: Javascript Step by Step For beginning with basic Javascript. Learning JQuery To learn the basics about JQuery. Well I hope this helps you a little. Cheers, Rodrigo.

No problemo, glad to help. Carl, Jack question: I tried adding paused timelines inside an alive timeline and of course the parent timeline progresses but the nested ones were still paused, at the end the parent progress is 1 and the nested ones is 0. But if you un-pause the nested ones while the parent is playing, their progress starts at the parent progress and at the end all the progress values are 1. When nesting alive tweens/timelines inside a paused timeline the parent force the nested ones to be paused, why it doesn't works the other way?. Cheers, Rodrigo.

Hi, Your problem is that your nested timelines are paused, so basically your master timeline is playing but the nested ones are still paused, change it to this: var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({onUpdate:sec1Update}); var sec2 = new TimelineMax({onUpdate:sec2Update}); master.add([sec1, sec2], "+=2", "stagger"); master.play(); And it should work. Also i set up a fiddle in case you want to see a working sample. http://jsfiddle.net/rhernando/KSdKe/ Hope this helps, Cheers, 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.