Rodrigo

Hi, First this is the ActionScript part of the forums. The first issue is that you're pausing the timeline and resuming it at the same time; second you're creating a timeline on every pass of the each loop. What you have to do is create the timeline outside the loop scope, add the particular tween to the timeline and give it a time between that tween and the next one, like this: //Create the timeline just once var t1 = new TimelineLite(); $('.tick').each(function () { var $self = $(this); t1.to($self, .5, { x: 100, ease: Cubic.easeInOut}, '+=time'); }); The final parameter ('+=time') is up to you and what it does is tell the engine that this particular tween goes that amount of time after the timeline ends, like that your tween will have a separation, but beware that this will cause an initial pause because the first tween won't be at zero seconds. A solution is change the loop code a bit: //Create the timeline just once var t1 = new TimelineLite(); $.each(('.tick'), function (index) { var $self = $(this); t1.to($self, .5, { x: 100, ease: Cubic.easeInOut}, ((0.5 * index) + (time * index)) ); }); You'll note that this time there are no quote marks nor +=, that is for setting a relative time, now we're using an absolute time because like this the first tween will be at zero, the second will be 0.5 seconds, plus the pause times the index, for example If you want the pause to be 0.5 seconds the first tween will be at zero, then: index = 1 => ( (0.5 * 1) + (0.5 * 1) ) = 1 index = 2 => ( (0.5 * 2) + (0.5 * 2) ) = 2 index = 3 => ( (0.5 * 3) + (0.5 * 3) ) = 3 And so on. Finally another approach is using the staggerTo method, is less code and you can avoid the math part, it'll be like this: var ticks = $(".tick"); TweenMax.staggerTo(ticks, 0.5, {x:100, ease:Cubic.easeInOut}, time); In this one the time indicates how apart each tween will start, so in this case it has to be greater than 0.5 otherwise the next tween will start before the previous ends. Take a look at the API reference in order to learn more about all of this, look at the samples in this link: http://www.greensock.com/get-started-js/ Look at the jump start, is very well explained and you have all the code there so you can see how the code behaves: http://www.greensock.com/jump-start-js/ And last but not least look at the training codepens: http://codepen.io/collection/giIvf Hope this helps, Cheers, Rodrigo.

Hi, As Carl said you are adding things too many times to your array and I believe that you should review the json data also. I set up a codepen with the images and code you posted the first time: http://codepen.io/rhernando/full/htxfI I don't know if this is somehow similar to what you want to achieve, but at least the timeline is repeating and the nested tweens are in sequence. Feel free to fork it and play around with it if further questions arise. Now to the code, the first thing that came out was the following: /** add the tween to the timeline **/ objectTimeline.add(TweenMax); Of course with that you're adding every tweenmax instance there is, but that could backfire in my opinion. Then this code was outside the loop that created the background and glass animation and for a simple scope matter those will never end up in the objectTimeilne, so once again the elements being added to the timeline were zero duration tweens. When the code changed to this: $.each(json['assets'], function(i, v) { $('#master_container').append('<div id="'+ v.name +'"></div>'); //more code... $.each(v.transitions, function(a, { //more code... //create a particular element to add to the timeline instead of every TweenMax instance var tn = TweenMax.to( $('#' + v.name), b.duration / 1000, { ease: easing, opacity: b.opacity, rotation: b.angle, scaleX: b.scaleX, scaleY: b.scaleY, x: b.left, y: b.top } ); /** add the tween to the timeline **/THIS IS THE NEW CODE objectTimeline.add(tn); }); /** add the tween to the timeline **/THIS WAS THE OLD CODE //objectTimeline.add(TweenMax); }); You get the result of the codepen posted. Finally why I suggest to look at the json data?, because when I was changing the images url in objectArray[1] just one glass appeared in the result, unless two glasses are needed, and also there's the positions when the animation begins. Hope this helps, Cheers, Rodrigo.

Hi, You're welcome. Just checked the links and everything seems to be working ok; which one wasn't working? Cheers, Rodrigo.

Hi, I just took another look to your code. First I apologize, the getTweensOf method gets the tweens of the timeline target and not the timeline, so Carl's suggestion for using the getChildren() method allow me see that in fact there are tweens in your timeline, but also all the nested tweens have a zero duration. So looking at your code you have this: $.each(json['assets'], function(i, v){ $('#master_container').append('<div id="'+ v.name +'"></div>'); timeline[i] = TweenMax.set( $('#' + v.name), { css: { backgroundImage: "url('"+ v.src +"')", height: v.transitions[0].height + "px", position: "absolute", opacity: v.transitions[0].opacity , width: v.transitions[0].width+"px" } } ); Then this: $.each(v.transitions, function(a, { /*some code*/ TweenMax.to( $('#' + v.name), b.duration / 1000, { ease: easing, opacity: b.opacity, rotation: b.angle, scaleX: b.scaleX, scaleY: b.scaleY, x: b.left, y: b.top }); }); An finally: objectTimeline.add(timeline[i]); }); timelineArray.push(objectTimeline); masterTimeline.add(timelineArray, 0, "sequence"); Basically you're creating TweenMax.set and TweenMax.to instances based in json data, then you add them to an array and finally you put that array in the parent timeline, but the problem is that you're including just the set instances in your array so your timeline only has zero duration tweens. Maybe it'll work if you add the TweenMax.to() instances to your array. Also see if you could work with fromTo instances it could save you some code lines and avoid the second loop, which could be good if you're planning on add more elements to your app. Hope this helps, Cheers, Rodrigo.

Hi, The engine has it's own plugin, the scrollTo plugin, is incredibly simple to use, you get great results and you could animate other things while the scroll takes place. You can read more about it here: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html I've created some samples as well as a blog post in this matter: http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/ In the following codepens the scrollTo plugin is used to generate an autoscroll feature that it could help, considering the structure of the codepen you just posted: Fixed height sample: http://codepen.io/rhernando/pen/bjLxe Dynamic height sample: http://codepen.io/rhernando/pen/dLxAJ Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. I'm not a canvas expert but one choice could be use an onUpdate call to update the pen position so to speak, but I can't remember such experiment here in the forums at least. What I can recommend you is to take a look at the kinetic plugin that of course works with the KineticJS framework. I've seen very amazing stuff done with it and combine with GSAP I'm pretty sure you can get very good results. In this posts Carl gives a little more info on how the plugin works and you can see a couple of very good samples using it: http://forums.greensock.com/topic/7783-switching-over-from-kineticjs-cannot-make-it-work-on-canvas/#entry29664 http://forums.greensock.com/topic/7963-ticker-and-performance-on-canvas/#entry30498 Hope this helps, Cheers, Rodrigo.

Hi, Jack this solved the issue: $(function(){ var v = $("div.v"), masterTL = new TimelineMax({repeat:-1, yoyo:true}), tl1 = new TimelineLite(), tl2 = new TimelineLite(); TweenLite.set(v,{top:-137}); tl1 .to(v, .75, {top:-34}) .to(v, .75, {scale:3, opacity:0}); tl2 .to(v, .0001, {left:300, opacity:1, scale:1}) .to(v, .75, {left:3, ease:'swing'}); masterTL .add(tl1) .add(tl2); }) Creating two different timelines and adding them to a parent one. Although the problem remained with the fromTo method and the solution was to add a minimal duration to the tween in order to get the element to the right, at normal scale and opacity. Updated fiddle: http://jsfiddle.net/7h5ED/3/ Cheers, Rodrigo.

Hi Rob, One way could be to use the updateTo method; the only constraint is that you'll have to create the individual tweens as variables and include them in your parent timeline via the add method, like this: var tl = new TimelineLite(), tn1 = new TweenLite.to(element, time, {vars, ease:Elastic.easeOut}), tn2 = new TweenLite.to(element, time, {vars, ease:Elastic.easeOut}); tl .add(tn1, 'label1') .add(tn2, 'label2'); You can see a working sample here: http://codepen.io/rhernando/pen/yqCea The one thing I couldn't achieve is to reverse the tween to it's original ease function which is why I had to do this: tn1 = new TweenMax.to(div1, 1.5, {top:350, left:350, ease:Elastic.easeOut}); tn1.play(0); in the function that plays the tween, because if the code is as follows: tn1.updateTo({ease:Elastic.easeIn}); tn1.play(0); I had to click the button twice to get it back to the elastic ease function. The good thing is that you could use the method through a callback in your timeline so it would work, it wouldn't look pretty but it'll work. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. The split text tool for JS is a club greensock tool, so is not included in the usual package, the CDNJS links or the git repository. Please check the following link for more info: http://www.greensock.com/club/ Cheers, Rodrigo.

Hi Majman, you're welcome. What I know is that the engine as it is right now is highly optimized and currently uses the transform properties instead of matrix and/or matrix3D. Here's a couple of lines if the CSS plugin: else if (!t.rotationY && !t.rotationX && a33 === 1) { //if we're only translating and/or 2D scaling, this is faster... style[_transformProp] = "translate3d(" + t.x + "px," + t.y + "px," + t.z +"px)" + ((sx !== 1 || sy !== 1) ? " scale(" + sx + "," + sy + ")" : ""); return; Also one thing I've being reading consistently in the forums is the fact that the mind set of the staff is performance goes first, so everyone can rest in the fact that if there's a better way to do things they're already looking at it. Best, Rodrigo.

Hi, In fact it's been said in the forums that triggering a 3D transform would optimize the animations, but that's only in some cases. The point is that forcing a 3D transform pushes the GPU to "kick in" so to speak, which can improve performance, but if you have a lot of tasks running, some other tabs in your browser and a lot of elements being animated it could backfire because you're putting too much on both the browser and the GPU. Jack gave a great explanation in the following posts: http://forums.greensock.com/topic/7841-css3-plugin-for-hardware-accellerated-devices/?view=findpost&p=29963 http://forums.greensock.com/topic/7842-greensock-slow-on-mobile-devices/?view=findpost&p=29966 In that same matter he added a new feature in the CSS plugin to force a 3D transform and get the GPU involved, you can read about it and download the plugin's preview here: http://forums.greensock.com/topic/7945-tweenlitesettarget-z01-override-scale/ Now regarding the code you posted I'm pretty sure it wouldn't have any effect whatsoever. You could achieve the same effect with the following: var el = $("#el"); TweenLite.to(el, 1, {y:100}); In your code you're using the engine to tween two values, then using an onUpdate call you pass one of those values and apply it through a javascript object and finally to the element, while using the engine to animate the y transform of the element. Also if you want some better performance you could use the CSS plugin preview and force a 3D transform, like this: var el = $("#el"); TweenLite.to(el, 1, {y:100, force3D:true}); Hope this helps, Cheers, Rodrigo.

Hi Is this working on other browsers?. What draws my attention is the fact that you've defined the height property as a string TweenMax.set( wrapper_inner, { "height": settings.scaling.h+"px" }); Therefore the engine is looking to tween a property that doesn't exists. Try the following code TweenMax.set( wrapper_inner, { height: settings.scaling.h+"px" }); Also it would be great if you could set up a live sample, codepen or fiddle to get a better idea of what could be the issue. Hope this helps Cheers Rodrigo

Hi Sorry I couldn't follow up properly. My point was precisely that, the timelines are being created but they aren't added to the master timeline and since the master timeline is the only one paused the other timelines play after being created and just once, because the master is the only one with a repeat var assigned. That's why my assumption was that the problem is in the part of your code when the timelines are added to the master one, the rest of the code is working properly; the nested timelines are being created and if you check the master timeline is playing and repeating endlessly, the only part missing is add the nested timelines into the master. I'll take a better look at your code and see if I can come up with something. Cheers Rodrigo.

Hi, You got me with almost no free time. What I can see is that your master timeline is emtpy, if you do the following: masterTimeline.add(timelineArray, 0, "sequence"); console.log(TweenMax.getTweensOf(masterTimeline)); It returns an empty array, therefore nothing is being added to your timeline. Check the function you're using to add the particular timelines into the master one, also check what's in your timelines array, maybe the problem is there. Your tweens are being created there's no problem there, so you have to take it from there. Hope this helps, Cheers, Rodrigo.

Hi, What I can tell you is that I'm seeing it OK with IE9 and IE10. Also there's a lot of stuff going on in your app (let me say that looks amazing!!) and I'm not too much of a MVC guy and never seriously used underscore or backbone (presuming that you're using it) so I can't say what could be interfering with GSAP if any. The GSAP part of your code looks good to me, basically you declare your tweens and then add them to the timeline _view_tl_0, then you add a callback that tweens the winner banner according to the match-up result. I don't know if you have any other mouse event or app call that creates a tween or manipulates the banners. The only reason I could think that the banner and the other elements animations that you mentioned, don't work is because something is overwriting that particular tween or the timeline itself; the other two timelines work as expected or you're having trouble with those too?. One thing you could do is adding onComplete calls for the particular tweens and the timeline to check if they complete and track with an onUpdate call the properties being tweened in order to see where the animation stop working as expected. Also it'll be great if you could create an isolated codepen or fiddle in order to get a better view, because is hard to pinpoint what could be the problem in a full working app. Hope this helps, Cheers, Rodrigo.

Hi, I'm pretty sure you read an article by Paul Irish, some time ago ot was asked by another forum user and Jack gave a solid answer in the matter, you can read it here: http://forums.greensock.com/topic/7769-lefttop-vs-xy/ As you can see is something that should be decided depending on the scenario you're facing, maybe for a small amount of short animations it might be a better solution. Also keep in mind if you want to keep the document flow intact or not when you're animating a specific element, for more on that read the following: http://forums.greensock.com/topic/8022-is-the-postion-relative-attribute-necessary-in-greensockjs/?view=findpost&p=30775 Hope this helps, Cheers, Rodrigo.

Glad that Jamie nailed this one and you got it working. Yes modernizr usually comes with yepnope (you have to check the customization you do), so you make a test to detect IE8 and IE7 (css 2d transforms) and if the test fails you load the files. You add the rest of your scripts the usual way and create that condition to load the others, like this: Modernizr.load({ test: Modernizr.csstransforms, nope: ['http://html5shim.googlecode.com/svn/trunk/html5.js','http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js'] }); Note that you can load them as an array. Is important though that you add this script on the head section of your document just like you do with the conditionals. Also check modernizr's documentation because it also supports media queries, in case you need some special scripting for smaller screen sizes. Cheers, Rodrigo.

Yep they're making some changes (the embed one is great!!) and I had some problems testing on every IE except for 10 the last few days. In fact I'm having some problems with full window in IE7 and IE8 on oracle virtual box.

Hi, Well the codepen is working because that code shouldn't have any problems in any browser. In your site there is an irregular pulse on the scrolldown element, so my assumption is that something else is causing this. Checking your code my first suggestion will be to get rid (comment out) everything but JQuery and GSAP, but already my major suspects are the following: <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> Because in IE9 and IE10 it works fine so something is happening when IE is older than 9 and that is also when this two scripts are loaded. Make a test getting those conditionals out of the code as well as my previous suggestion and let us know how it went. Also since you're working with modernizr, why don't you use YepNope to conditionally load those files?. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. The first thing that draws my attention from your code is the fact that you're making two from calls on the same object and on the same property. I believe that is to create a pulsating effect, in that case use the yoyo property, like this: var tl = new TimelineMax({repeat:-1, yoyo:true}); tl.from($('#slideScrollBtn'), 1, {autoAlpha:0, ease:Power1.easeOut}); As for why is getting stuck on IE8 it worked fine when I tested it, could you please create a simple fiddle or codepen in order to get a better look. Hope this helps, Cheers, Rodrigo.

Hi, All you have to do is give a perspective value to the elements you are rotating, not their parents. So if you have a class for the front-face of the card and another for the back-face, just set a perspective for those elements and the transformation should be more "flat" and the element will vanish at 90 degrees, like this: TweenMax.set([$("div.cardBack"),$("div.cardFront")], {perspective:500}); Or you can do it through the CSS markup, like this: .cardFront, .cardBack { position:absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; perspective:500; } Hope this helps, Cheers, Rodrigo.

Hi, I had a similar issue just today creating a card flip example; IE10 gave me a trouble with the backface-visivbility property, then I remembered that I had something similar that worked with IE10. Try changing this: TweenLite.set(".cardWrapper", {perspective:400}); to this: CSSPlugin.defaultTransformPerspective = 400; In your yep() function and that should do it. Now why IE10 has that problem with backface-visibility?, I don't now but is a browser thing related with the object being rotated and assigning a perspective value to the parent, which is widely correct except in the IE parallel universe. But the good thing is that the CSS plugin eases our pain once more Hope this helps, Cheers, Rodrigo.

Hi, Is really necessary to remove the elements?; If you check the samples you'll see that the css has the following: backface-visibility: hidden; That means that when the element has rotated 180 degrees you can't see it, allowing you to see the other face of the card. If you check both codepens you'll see that the animation shows one side and then the other and each side is a DIV element, so there's no need to remove one and then add it again to the DOM, they both are there all the time. If you check David Walsh's sample with developer tools or firebug you'll see that both elements are there all the time, like I said the key is in the backface-visibility property. Please double check my codepen so you can see how the code works and consider the following: the bread image represent's the back-face of the card and the painting the front-face. Also there's a new line with playing cards design(the best I could find in a short search) that'll give you a better idea. Now if you really need to remove and add the DIV elements, you have to track the front-face's angle through an onUpdate callback, so when the element's angle is over 90 you can remove it and add the back-face element. Keep in mind that the back-face element must have a 90 degrees rotation in order to simulate the effect and once you've add it you have to tween it to zero degrees. It would be great if you could provide a simple codepen or fiddle, or fork my codepen, to get a better idea of what the problem is. Hope this helps, Cheers, Rodrigo.

Hi As you can see there's a serious flaw in the code I've posted. Please give me a couple of hours to correct it. Sorry for the inconvenience. Is corrected now, just an issue with selectors. The only problem I can't put my finger on is why it looks so hideous in IE10, I'll try to correct it. Rodrigo.

Hi and welcome to the forums. Maybe you could try adding a relative rotation, for example enhance the element's rotation by 180 degrees each time, like this: TweenMax.to(element, time, {rotationY:'+=180'}); Another possibility would be to create a timeline for each card and you can play it forward on mouse over and backwards on mouse out, like this: $("div.element").each(function(i, element) { var tl = new TimelineLite({paused:true}); tl.to(element, 1, {rotationY:180}); element.animation = tl; }) $("div.element").hover(elOver, elOut); function elOver() { this.animation.play(); } function elOut() { this.animation.reverse(); } I've created a codepen so you can see it working: http://codepen.io/rhernando/pen/vjGxH Also take a look at this codepen by Chris Gannon is completely awesome, maybe you can get a couple of ideas out of it: http://codepen.io/chrisgannon/pen/JtljL Hope this helps, Cheers, Rodrigo. On a side note great picture, I remembered the phrase:"arghh... the goggles do nothing!!"