Rodrigo

Hi, In the case of GSAP's JQuery plugin the callback is complete, not onComplete, so your code should be like this: .delay(2000).animate({scrollTop: $("#mainContainer").offset().top}, {duration:2000, ease:"Power2.easeInOut", complete:completeHandler }); function completeHandler(){ $(".slide1").unmousewheel(); alert(callback); console.log("callback"); } Also let me encourage you once more to use the engine's scrollTo plugin. For example your code would be like this: var tl = new TimelineMax({onComplete:completeHandler}); tl .to(window, 2, {scrollTo:$(".slide2").offset().top, ease:Back.easeInOut}) .to(window, 2, {scrollTo:$(".slide3").offset().top, ease:Back.easeInOut}) .to(window, 2, {scrollTo:$(".slide4").offset().top, ease:Power4.easeInOut}) .to(window, 2, {scrollTo:$("#mainContainer").offset().top, ease:power2.easeInOut}); function completeHandler() { $(".slide1").unmousewheel(); alert(callback); console.log("callback"); } As you can see is far less code, you can chain into the timeline and the engine takes care of the entire sequence, no need to worry about delays and stuff. Give it a shot and if more questions come up there'll always be an answer. Hope this helps, Cheers, Rodrigo.

Hi Rowan, Sorry I completely misunderstood the question in the first place and thanks for providing the codepen it was very helpful. First there were some errors on your pen, in line 35 you have an extra bracket and you didn't defined the speed factor of the tweens, meaning the time. With that solved the animation works if you hide your elements in your from tweens, adding an opacity:0 call, like this: if ( parseInt($elm2.css('left'), 10) == 0) { tl.from($elm2, speed, { left : -$elm2.outerWidth(), opacity:0 }); } else if ( parseInt($elm2.css('bottom'), 10) == 0) { tl.from($elm2, speed, { bottom : -$elm2.outerHeight(), opacity:0 }); } else if ( parseInt($elm2.css('right'), 10) == 0) { tl.from($elm2, speed, { right : -$elm2.outerWidth(), opacity:0 }); } You can see it working here: http://codepen.io/rhernando/pen/yeFxD Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. The first thing is that you're not using the latest release of the tool, please update it and see what happens. Also check your PM please. Cheers, Rodrigo.

Gald you figued it out and sorry I posted the wrong code, is corrected now. Yoyo is one of the features included in TimelineMax but not on TimelineLite. Check the API reference in order to see what other goodies TimelineMax has: http://api.greensock.com/js/com/greensock/TimelineMax.html Cheers, Rodrigo.

Hi and welcome to the forums. It would be very helpful if you could set up a live sample like a fiddle or codepen with the part of your code that's giving you problems, in order to see what could be the issue. If you wish you can fork this one: http://codepen.io/rhernando/pen/vztpn As you can see is a simple timeline with a from instance and I'm not seeing any problems in it. The div element goes from a position and opacity change to the original state setted by the CSS markup and then it reverses to the state setted by the from instance. As for the second question the best way would be callbacks, in this case onReverseComplete. You add the callback in the "old" timeline and you create the "new paused" and when the old reverse is completed you call a function that starts the new, like this: var oldTL = new TimelineMax({onReverseComplete:oldReverseComplete}), newTL = new TimelineMax({paused:true}); function oldReverseComplete() { newTL.play(); } Check the "special properties" in the API reference to see all the alternatives that exists. Hope this helps, Cheers, Rodrigo.

HI and welcome to the forums. Instead if creating a timeline for all the elements create a timeline for each. There's an excellent example in this codepen of the Greensock collection: http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7 In your case you'll have to create your timeline active, ie, not paused and the over and out events would have to pause and resume the particular timeline, like this: $(".logos li").each(function(index, element){ var tl = new TimelineMax({repeat:-1, yoyo:true});//the timeline is active tl.to(element, 2, {rotationY:'-30deg'}) .to(element, 2, {rotationY:'30deg'}); element.animation = tl; }) $("li").hover(over, out); function over(){ this.animation.pause(); } function out(){ this.animation.resume(); } Like this when you hover an element just that timeline will pause and the others will keep going. Hope this helps, Cheers, Rodrigo.

Hi, Take a look at this link: http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/ I believe that you could set the progress of the scroll animation based on that. I've never experimented with both elements but I can't think of a reason that it shouldn't work fine. If it doesn't you could take a more complicated approach and set the progress of one tween based in the other, like this: http://codepen.io/rhernando/pen/qaEto Hope this helps, Cheers, Rodrigo.

It looks very good and the UI is beautiful. Great Job!! Cheers, Rodrigo.

Hi, Well is a little more complicated, but not hard by any means. I'm going backwards on this one so let's rock... Adding callback parameters to a timeline is quite different than doing it in tween instances. In the case of the ["{self}"] param it refers to, is the tween instance and in the case of a timeline the timeline itself. So when the function calls to a tween param it's calling it to the tween or timeline, like this: function doStuff(tween) { TweenMax.set(tween, {opacity:0); } In this case you're telling the engine to animate the tween or timeline opacity to zero, but tweens/timelines are not DOM elements so nothing happens. That's why you define the tween's target inside the function, like this: function doStuff(tween) { var element = tween.target; TweenMax.set(element, {opacity:0); } In this case the if the tween param is a tween instance the tween.target is a DOM element, for example the beer glass, but if the param is a timeline the target becomes an issue because it'll return undefined. Considering what's above you should add the onComplete call in the tweens being created in the loop and I assume that you want to apply this to the beer glass so it should be in that particular loop: tn = TweenMax.to( $('#' + v.name), b.duration / 1000, { delay: b.wait / 1000, ease: easing, opacity: b.opacity, rotation: b.angle, scaleX: b.scaleX, scaleY: b.scaleY, x: b.left, y: b.top, //INSERT CALLBACK onComplete:setOpacity, onCompleteParams:["{self}"] } ); Also you have two loops, the second resides inside the first one, so for better use define the function inside the DOM ready event, like that it'll have a generic scope and you could use it in other GSAP instances: $(function(){ $.each(//loop1 $.each(//loop2 ); ); function setOpacity(tween) { var element = tween.target; TweenMax.set(element, {opacity:0}); } }); Hope this helps, Cheers, Rodrigo.

HI, Try using immediateRender:false in the set instances, or a super short to instance to quickly tween the opacity. Immediate Render: objectTimeline.add( TweenMax.set(element), {opacity:0, immediateRender:false} ) Short tween: objectTimeline.add( TweenMax.to(element, 0.0001), {opacity:0} ) Also you could create a generic onComplete callback and apply it to any element every time you need it, like this: objectTimeline.add( TweenMax.to(element, time{vars, onComplete:setOpacity, onCompleteParams:["{self}"]}) ) //Function function setOpacity(tween) { var element = tween.target; TweenMax.set(element, {opacity:0}); } Like that every time you need to set an element's opacity to zero you can use the onComplete and onCompleteParams and the target of the objectTimeline tween's opacity will be set to zero. Finally if you need to tween the opacity instead of setting it immediately you can add a second parameter, time, like this: objectTimeline.add( TweenMax.to(element, time{vars, onComplete:setOpacity, onCompleteParams:["{self}", time]}) ) //Function function setOpacity(tween, time) { var element = tween.target; TweenMax.to(element, time, {opacity:0}); } //Equivalent to set objectTimeline.add( TweenMax.to(element, time{vars, onComplete:setOpacity, onCompleteParams:["{self}", 0]}) ) //One second fade out objectTimeline.add( TweenMax.to(element, time{vars, onComplete:setOpacity, onCompleteParams:["{self}", 1]}) ) Hope this helps, Cheers, 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.