Rodrigo

Hi, You're welcome. It's always great to receive this type of feedback from users, it's a good recognition of the hard work every one in the community does. In terms of the issue you're having in chrome I believe that it has to do with the amount of nodes being passed to the engine and being animated, thus creating quite a handful to chrome. Is what Carl and Jack always call "a rendering bottleneck" or the three stooges syndrome, too many things trying to pass through a single door and blocking each other. I noticed that every single element you're trying to stagger is contained in a master <g> tag, what you could do is assign a common class to those tags and you could use either JQuery, sizzle, zepto or another library with selecting capacities, so select all of them and then create the staggerFrom() instance. Rodrigo.

Hi, Yet another possibility is using modernizr to detect the browser's support for certain properties, 3D transforms in this case, and based on that test create the tweens or load the script according to the browser. First include modernizr between the head tags in your document, best thing is to do it before every other script: <script src="scripts/modernizr.js"></script> Then you have two options, first you can create the tweens depending on test result: Modernizr.load( { test: Modernizr.csstransforms3d, yep : function() { //create tweens that for 3D support }, nope: function() { //create tweens for browser that doesn't support 3D transforms } }); The second option, which is the one I'd recommend you, is to create separate js files and load them as a result of the test: Modernizr.load( { test: Modernizr.csstransforms3d, yep : 'scripts/site.script.3d.support.js', nope: 'scripts/site.script.NO.3d.support.js' }); Why I recommend this option because is quite usual that any site or app will have more than one animation, therefore the amount of code will be more than a couple of lines, like this you don't force users with modern browsers to load the code for other browsers, also helps you modularize your codes (which in some scenarios is a very good idea) and you'll learn more about how to use both modernizr and yepnope (a conditional loader included in modernizr) which are great libraries. The direct link to modernizr with the 3D support detection is the following: http://modernizr.com/download/#-csstransforms3d-teststyles-testprop-testallprops-prefixes-domprefixes-load Go to the bottom of the page and copy the code in the box, it weights a little more than 6 kb, and if you can GZIP it it goes down to 3 kb so it loads and executes very fast. Also as you can see there are quite a handful of things you can do with both libraries so give them a try and I can assure you that you'll love them. Rodrigo.

Hi, Sorry I didn't catch that but there's a lot of code in your app and I didn't read it carefully. It's strange though that you're experiencing problems with percentages, keep in mind that percentages must be passed as strings: //absolute values TweenLite.to(element, time, {left:"50%", top:"50%"}); //relative values TweenLite.to(element, time, {left:"+=50%", top:"+=50%"}); But looking at your code you're using percentages for your site map indicator. The problem is that when you resize the window you're not resizing the indicator, causing the issue of the white rectangle being kind of "out of place" when you click the arrows. If you resize the indicator proportionally to the screen size everything should work as expected. Rodrigo.

Hi Erik, Actually I've never used TweenUI before and let me say that is a very solid tool, it'll be very helpful for those users with no coding experience. I loved the way you can add the easing functions to each tween. What would be great is a better control of each tween's time, perhaps the instance's duration via input, but besides that is a great tool, good job!!. Best, Rodrigo.

Hi Anthony, Actually Carl included TweenMax.min.js which includes, among others, the CSS Plugin, Ease Pack, and Bezier Plugin, so that's why it made no difference when you included the Ease Pack. In terms of avoiding the clear method, what you could do is create different papers and animate each shape in a separate canvas, that also will help you to chain the animations, just create a master timeline and nest child timelines that could handle each drawing and some other animations (if they're required). Best, Rodrigo.

Hi, What you could try is use the scrollTo plugin for all the animations and put on the top-left corner of every section a dummy element, so you can scroll the canvas to the specific position of that dummy element, like that on resize you'll get the new position using JQuery's offset property: var dummyEl1 = $("#dummySection1"),//create a dummy for every section dummyEl1Pos = dummyEl1.offset(); //this goes on the click event. I'm just assuming a btn1 ID $("#btn1").on('click', function() { TweenLite.to(scrollsrc, 1.5, {scrollTo:{x:dummyEl1Pos.left, y:dummyEl1Pos.top} }); }); You just have to be careful to adjust the offset variables on the resize event. Here you can see JQuery's api docs on the resize event: http://api.jquery.com/resize/ Best, Rodrigo.

Ahh yes. You can't put a class over an ID, classes are more specific than IDs. This is just a specification rule and has nothing to do with GSAP. The only way is to change the element's inline style, just what GSAP does, but that means doing it through the usual way via the constructor: TweenLite.to("#start", 1, {width:100, height:100, backgroundColor:green}); The only way I know is adding !important in the stylesheet, but that will render the new style immediately, so you won't get the gradual change. Another chance is to work with classes and use the ID just for selecting purposes. Best, Rodrigo.

Yep Jack is right, I totally forgot that Carl created a great sample of smoothly decelerate a tween, you can check it here: http://codepen.io/GreenSock/pen/LuIJj Rodrigo.

Hi, I haven't looked with detail the code of the className var and how it works but if you create a local sample and use dev tools or firebug you'll see that there are changes in the element's inline style, but when the tween is completed they are removed, here's what I think is going on, the engine detects the className property in the instance's vars, then it looks for that style in the document's style declaration, get the style's values and does what always does in order to animate between the current values and the final ones. When the tween ins completed, since the change was made with className the engine applies a clearProps to all the properties that were animated, therefore it seems like the styles were replaced instead of overwritten. Of course Carl or Jack could give us a more detailed explanation. Also I don't see any difference between your codepens, the code is the same so there's no difference in the behaviour of both samples, and keep in mind that is rather difficult to use dev tools or firebug on codepen. Best, Rodrigo.

Hi, Yep, the thing is that CSS transforms don't affect the document's flow so if you change the x value the left value remains unchanged and vice versa. Also I neglect to remember the fact that you could use force3D:true in order to improve performance without changing the rest of your code: defineOpenCloseAnimation: function() { var e = this, n = e.$el.width(); e.openCloseAnimation = TweenMax.fromTo(e.$el, .500, { left: -1 * n, force3D:true }, { left: 0, paused: !0, ease: Quart.easeOut }), $body = $("body"), e.openCloseBodyAnimation = TweenMax.fromTo($body, 0.8, { left: 0, ease: Quint.easeInOut, force3D:true }, { left: n, paused: !0, ease: Quart.easeInOut }) } Give that code a shot and let us know how it went. Rodrigo.

Hi, I'm still working on flash CS4, it's been unnecessary to do the upgrade so I couldn't look at your file. But since you've been using the engine one of the great things the guys did was to keep the syntax and constructor of the instances in the same way, so the only changes between AS and JS are the particular things of each language. In this case if you need to start an element's animation after the previous one ended, you could set up a timeline in the for loop: var childs = parent.children, tl = new TimelineLite({paused:true}); for(var i = 0; i < childs.length; i++) { tl.to(childs[i], time, {vars}); } tl.play(); That should work. Keep in mind that for moving things around your element should be positioned (fixed, relative or absolute) and if you're using the same loop to apply the css styles and create the timeline you should be very careful in the order on which the code is executed: var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'), tl = new TimelineLite({paused:true}); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { //first execute the styling var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); //then create the tween instance in the timeline tl.to(childs[i], time, {vars}); } //apply the styles to the elemenets document.getElementsByTagName('head')[0].appendChild(styles); //finally play the timeline tl.play(); Also if you're familiar with the engine you could use a staggerTo() method directly on the var containing all the elements, you just have to play with the stagger time value in order to get the desired separation between each animation: var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); } document.getElementsByTagName('head')[0].appendChild(styles); //create the tween instance after the loop TweenMax.staggerTo(childs, time, {vars}, staggerTime); Best, Rodrigo.

Hi, I remember doing something like this for a carousel, where the rotation speed will depend on how far from the middle of the screen you are, tweening the timeScale property of the instance controlling the rotation. In this case is the same but with the scroll position, which gets super simplified by the engine's scrollTo plugin. I'll have to search that sample and then convert it to your needs. Unfortunately I'm spending very little time working in any development this past few weeks (whether is paid or support for the forums) so I can't tell you when I could set up something to illustrate the point, I hope I can get something done during the weekend, since I've already done something similar it shouldn't take that much time. Rodrigo.

Hi, It's very simple just replace "left" with "x", like this: defineOpenCloseAnimation: function() { var e = this, n = e.$el.width(); e.openCloseAnimation = TweenMax.fromTo(e.$el, .500, { x: -1 * n }, { x: 0, paused: !0, ease: Quart.easeOut }), $body = $("body"), e.openCloseBodyAnimation = TweenMax.fromTo($body, 0.8, { x: 0, ease: Quint.easeInOut }, { x: n, paused: !0, ease: Quart.easeInOut }) } That should do it. Keep in mind though that x and y work independently of the element's position on the first render, so if the element's initial left is 200px the x value is zero. Also tweening those values doesn't affect document flow. Rodrigo.

Hi Chris and welcome to the Greensock forums. Yes, one of the most amazing features of the engine is that you can tween any numeric value of any object. Since a Tween/Timeline instance is an object and the time is a numeric value you can tween it using ThrowProps. var tl = new TimelineLite(); tl.to(element, time, {vars}); TweenLite.to(tl, time, {ThrowProps: { time:value } }); I've set up a simple codepen showing how you can do it: http://codepen.io/rhernando/pen/utGCk As you can see when you use the ThrowProps plugin you set a certain time, but because of the inertia behaviour of the plugin the final time is bigger than the original time. Also keep in mind that every tween/timeline instance has other numeric properties such timeScale and progress, so you can also tween those. As well in this case the ThrowProps is a tween instance as well, so you could tween the progress, of the instance that tweens the time of another instance.... mind-bending right? Rodrigo.

Hi and welcome to the Greensock forums. I'm not very sure if this is what you need, but one possibility would be to add all the SVG paths into one div (ideally add nothing else into that div element) and store all the elements into a variable. Then loop through that, apply the specific styles and add them to a style sheet in the document. HTML <div id="parent"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="path1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="path2"> <rect x="100" y="50" width="400" height="250" style="fill:blue;"/> </svg> </div> JS var parent = document.getElementById('parent'), childs = parent.children, styles = document.createElement('style'); styles.type = 'text/css'; for(var i = 0; i < childs.length; i++) { var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }'); styles.appendChild(styleNode); } document.getElementsByTagName('head')[0].appendChild(styles); The example is quite simple, just a triangle and a square, but with that you can add the specific styles for each path into the stylesheet. Now if I'm not mistaken (perhaps a more experienced user with SVG could clarify this for us) that if you're going the way I propose you might as well just declare the specific styles by hand, at the end it would be the same and your code wouldn't get so bloated with unnecessary stuff like setting the styles, unless you're importing your svg paths through XML or JSON data, in which case such implementation would be necessary. Rodrigo.

Hi Anthony, What you need is force3D:true. What that does basically is put the content being animated in a GPU layer , pretty much like adding a tiny amount of translate on the z axis. I'm not a connoisseur of CSS animations/transforms but perhaps the reason is that you were adding a translateZ:0, which basically doesn't move the element at all and ultimately won't pass it to the GPU. Now the only caveat with the force3D is that if you pass too many elements to the GPU will ultimately create too much workload on the GPU and create performance issues. $('.test-gsap').on({ mouseenter: function() { TweenLite.to($(this), 0.5, { scale: 1, ease: Quad.easeIn, force3D:true }); }, mouseleave: function() { TweenLite.to($(this), 0.5, { scale: .95, ease: Quad.easeIn }); } }); Rodrigo. PS: well, there you go 3 answers for the price of one. PS2: Shouldn't you be celebrating Thanksgiving with your families ?

Hi Mike, The bezier plugin does support cubic bezier, take a look at tje API reference: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html Rodrigo.

Hi, I set up a very simple codepen. It was made with buttons and not the li elements, but is the concept of the child elements being rotated what matters. The CSS for using li instead of buttons is pretty standard stuff and you've already got that working. http://codepen.io/rhernando/pen/qjIEn Of course it still needs some tweaking regarding specific events, for example if the user clicks on another tab while the previous is animating, you get a pretty ugly behaviour, but that can be sorted out easily. Best, Rodrigo.

Hi and welcome to the Greensock forums. Any particular reason to rotate the parent and not the child element?. If you check this codepen you'll see that rotating the child element has the desired effect in IE10: http://codepen.io/rhernando/pen/vjGxH Also keep in mind that preserve 3D is not supported in IE10 and it won't be supported in IE11 either. Perhaps in IE12 or maybe in IE199 , but definitely not in the short term. That's why in the link's sample every child is rotated, so it can work on IE10-11. Rodrigo.

Hi Jonathan, Jack posted a reply some time ago stating that the Lite constructors are faster than the Max ones. The reason?, perhaps since the Max constructors have to check for more stuff (repeat, yoyo, etc.), code execution might take a tiny bit longer, Carl or Jack are more suited for that particular explanation. In the mean time take a look at the following: http://forums.greensock.com/topic/8450-arranging-looped-animations-in-master-time-line/#entry32950 Happy Tweening!!

Hi, First thanks a lot for bringing the tweet and repository up Carl, that effect was really baking my noodle As for eliminating the easing, what you can do is determinate how much the mouseover animation has progressed, stop the mouseover animation and create a new animation with that amount of time. The other tween gets overwritten and send for GC and the new one executes. Somtehing like this: TweenLite.set("#box", { transformPerspective:400, width:350, height:200, opacity:0, rotationX:90, scale:0.001, display:'none', borderRadius:0 }); $('.hoverme, .box').mouseover(function() { TweenLite.to("#box", 2, { rotationX:0, opacity:1, borderRadius:10, display:'block', scale:1, ease:Back.easeOut }); }); $('.hoverme, .box').mouseout(function() { var tnTime; if(TweenLite.getTweensOf("#box")[0] == null) { tnTime = 2; } else { tnTime = TweenLite.getTweensOf("#box")[0].time(); } TweenLite.to("#box", tnTime, { rotationX:90, opacity:0, borderRadius:0, display:'none', scale:0.001 }); }); You can see it here: http://jsfiddle.net/K6mxC/10/ Best, Rodrigo.

Hi, The first issue has to do with the fact that you're tweening the element's width and height, and in that case the transform point is always the top-left corner, is just how the box model works. You could try by scaling the element down instead of using width and height, like that it should go to the center point instead of the top left corner. The second issue is a bit odd, I tweaked your fiddle and using class selectors works fine, perhaps just a syntax issue, take a look: http://jsfiddle.net/K6mxC/3/ Also a couple of suggestions, for this cases is far better to store the tween in a variable and use the play() and reverse() methods on mouseenter and mouseout, it save's you writting some code and you get more familiar with the engine's methods. You can use a from() instance to create the animation. The from instance starts with the end values of the tween, so for example you created your element with a certain width and you want that element to appear from a smaller size and opacity zero; you create a from instance and once the instance is created the element's size and opacity are changed. Also is always a good choice to use a set instance to establish the perspective of an element before creating the tweens to animate it, like this: TweenLite.set("#box", {transformPerspective:400}); With this suggestions you're code will look like this: TweenLite.set("#box", {transformPerspective:400}); var tn = TweenLite.from("#box", 3, { rotationX:90, opacity:0, borderRadius:0, display:'none', scale:0.001, ease:Bounce.easeOut, paused:true }); $('.hoverme, .box').mouseover(function() { tn.play(); }); $('.hoverme, .box').mouseout(function() { tn.reverse(); }); And the CSS will be like this: body { text-align:center; } .hoverme { width:100px; border:thin solid #000; margin-left:200px; text-align:center; } #box { position:absolute; width:350px; height:200px; float:left; margin-top:-16px; ; background-color:#F00; border: solid thin #F00; border-radius:10px; } p { font-family:Arial, Helvetica, sans-serif; font-size:12pt; } I've forked your fiddle: http://jsfiddle.net/K6mxC/5/ Best, Rodrigo.

Yep, Since you're going to add bitmaps canvas is the best way to go. I'd recommend you using the KineticsJS plugin, because it updates every layer independently of the rest, so it should give you a better performance, also you should try to get your hands into some snow flakes canvas paths instead of using images, that also should improve performance. Rodrigo.

Hi, First thing would be particle size, your snow flakes are far too big and are causing a lot of stress on the browser. Also since your particles are absolutely positioned they don't affect document flow, so try tweening top/left instead of x/y, you're also leaning too much on the GPU by using transforms, for the same reason instead of scaling the snow flakes down, try setting their height and with with a Math.random() function. Take a look at this reply by Jack in order to see why this could improve performance. Rodrigo.

Hi, When you use ["{self}"] as the callback parameter, it refers to the tween, so in your callback to look for the element being tweened you have to call to the tween's target, like this: TweenLite.to(element, time, { rotation:30, onUpdate:myFunction, onUpdateParams:["{self}"] }); function myFunction(tween) { var element = tween.target;//this refers to the element being tweened } Now when it comes to transform properties, like rotations, scales, x and y, each tween has a _gsTransform object, that you can use to get the current value of any of those properties, like this: TweenLite.to(element, time, { rotation:30, onUpdate:myFunction, onUpdateParams:["{self}"] }); function myFunction(tween) { var element = tween.target;//this refers to the element being tweened console.log(tween.target[0]._gsTransform.rotation);//returns the current rotation on every tween update } You can see this picture of how it looks in chrome's dev tools: Keep in mind though that this is from a previous version of the engine, so the values are in radians. Since version 1.11 the values are returned in degrees. Rodrigo.