Rodrigo

Hi, One question, how are you defining the object of the object?, I mean how and where are you defining scale and it's key:value pair (x:value, y:value)? In the code you posted, at least, is not showing, I was wondering if you're defining those values, anyway the thing is as follow. GSAP can't tween scale.x what it tweens is the property x of scale, which is a property of sphere[n], that's the unexpected token error you were getting; for example when you're tweening the height value of a DIV element you don't pass the following code: TweenMax.to(element, time, {element.height:value}); That should give you the same error, the fact is that even with scale being a property of each sphere, is an object, just like sphere (and for that matter EVERYTHING in javascript is an object), so you have to pass the property of that object to the engine to get it to work, like this: var spheres = ['sphere1','sphere2','sphere3','sphere4','sphere5']; $.each(spheres, function(index,sphere) { spheres[index] = {'scale':{x:0, y:0}}; TweenMax.to(spheres[index].scale, 1, {x:2, y:2, onComplete:complete, onCompleteParams:[index]}); }); function complete(index) { var element = spheres[index]; console.log(element.scale.x); } Note that the scale property/object is being defined inside the loop and then it's x and y properties are tweened. Well I hope this time the issue get's solved. Cheers, Rodrigo.

Hi Give me a little more than an hour to correct this, currently posting from ky phone. Cheers Rodrigo

Hi Try with the following $.each(spheres, function (i, sphere) { TweenLite.to(spheres.sphere, 1, {scale.x: value, scale.y: value, ease:Quad.easeInOut}); }); Again sorry for not setting a live sample. You could look in w3schools or Mozilla development for some working code sample for arrays and objects. Let me know how this works. Cheers Rodrigo

Hi Of course you can, but instead of passing the object property pass just the object, and in the vars you pass the property, like this: $.each(spheres, function (i, sphere) { TweenLite.to(sphere, 1, {scale.x: value, scale.y: value, ease:Quad.easeInOut}); }); Sorry that I can't supply a live sample, try that and let us know how it went. Hope this helps Cheers Rodrigo

Hi Just a simple syntax issue. What you have to tween is the startScore object, and it's score property, like this: $(window).load(function(){ TweenLite.to(startScore, 5, {score:endScore, roundProps:"score", onUpdate:updateHandler}); }); Like that the start score will tween from zero (starting value) to the value you'll get for the end score. In this cases you have to tween the numeric property of a key:value pair of an object, in your case startScore and it key value pair score:0. Hope this helps Cheers Rodrigo

Hi and welcome to the forums. Put all your content inside that div. Give the div element an overflow:hidden property, like that the content won't appear outside the boundaries of the element; also give all the elements (the parent or container DIV and it's contents) a position:fixed value. You can use that and set superscrollorama to trigger the animations based on the scroll position in px and not the elements offset. Finally to center your div you can use the following code: var center = function(elemID) { elemID.css({ "left" , ((($(window).width() - elemID.outerWidth()) / 2) + "px") }); }; center(yourElement); Also you could use GSAP to set the position, like this: var center = (($(window).width() - elemID.outerWidth()) / 2), yourElement = $("div#yourElementID"); TweenLite.set(yourElement, {left:center}); Hope this helps, Cheers, Rodrigo.

Hi, It's hard to see what happens just with a description, but my guess will be an overwrite issue. Any chance that you could set up a reduced live sample (codepen or fiddle), or upload a file that contains just this issue?. Cheers, Rodrigo.

Well it depends on how things are created. Question, are all your tweens and timelines created before any of them begins to play or once they start there'll be more tweens/timelines added or created?. If your tweens are all created at the beginning then you should use the add method to insert an array of the tweens/timelines, take a good look at the reply #6 of this topic. If your plan is to add once the playback has began, then is a little more complicated and for that you'll have to work with labels and get labels array in order to know the labels and their respective times in the timeline. This is more simple, use the get label time method to find where the label is located and you can add that time as a delay for another tween/timeline and they can start together. Another option is to add callbacks whether to the timeline via the add method, also could be added to the tweens directly with onComplete callbacks. Well, in this one I'm not too sure. The fact is that timelines are part of the engine with the purpose of sequencing tweens, so it'll go against the flow to skip something that was included in the first place, it's like taking out the shampoo of the cabinet and going into the shower with it, for later not washing your hair, why did you take out the shampoo in the first place?. And that's why labels, the possibility to add an array of tweens/timelines, absolute positioning and callbacks are for, you can create very complex stuff with those tools. Finally it would help a lot if you could set up a simple live example to see where you're getting the troubles, it hard to pin point correctly without knowing what's on your mind. Hope this helps, Cheers, Rodrigo.

Hi, Yes but you have to add those tweens/timelines at the end of the parent timeline, because if you add another instance after that the latter will have to wait until the end of the parent timeline to play, so in the code of your pen you have this: masterTL .to(elem2, 1, {left:350}, 'label1') .to(elem3, 1, {left:300}) .add(tn1, 'label1') .to(elem4, 1, {left:350}); So at the same time, in the "label1" location, tn1 and the first instance play simultaneously, then once the "elem2" tween is over the "elem3" tween begins, because it was created before the insertion of "tn1", therefore it waits to the previous instance to be over, meanwhile "tn1" keeps playing as it should. Then the "elem4" instance is at the very end of the timeline and because of that it has to wait until everything before itself to be completed and that includes "tn1". But if you change your code to this: masterTL .to(elem2, 1, {left:350}, 'label1') .to(elem3, 1, {left:300}) .to(elem4, 1, {left:350}) .add(tn1, 'label1'); It'll work as expected, because the "tn1" instance was inserted at the end of the timeline, but its going to start when the timeline is at the "label1" position. I hope this makes it clear. Cheers, Rodrigo.

Yep, the extra thing you'll have to take care of is the element size/scale, that's certainly a factor and the price to pay for a perfect elliptical path.

Hi Michael, Why don't you give bezier path a try?, it might work. Take a look at this: http://codepen.io/rhernando/pen/kjmDo And this: http://codepen.io/GreenSock/pen/ABkdL And since the objects are just translating and not rotating you just has to focus on the bezier path animation, although it'll be sweet if they do both. Cheers, Rodrigo.

You're welcome. In order to see more about building sequences, Carl made an excellent video tutorial, you can see it here: http://bit.ly/12aZMXA I'll be waiting to see the finished app and if more questions arise just keep asking. Cheers, Rodrigo

Hi, Well regarding your original post, I gave a little more thought to it and I think that the best way to do the queues-cpu processing sequence is to create a single timeline for each of the processes in your app. Then you put all the timelines in a master timeline with the add method (check the api reference to see how it works for an array of tweens/timelines). Why?, because each process has it's own loop process and control a lot of different dynamically-created loops from just one timeline is something that escapes my abilities right now (honestly I can't think how to do it), so it's easier to add to a master timeline different timelines with their own flux control. Now the actual process will require a bit of work but nothing too hard and can definitely be done with GSAP. For creating each timeline use a function that takes the particular process and a random number creation function to set delays and repeats, and finally add that particular timeline to the master timeline. The following code is a very rough approach to it, I'm going to presume that you're using JQuery, but it can be done in pure JS: var masterLine = new TimelineMax(), waitQueueduration, waitQueueDelay, readyQueueduration, readyQueueDelay, cpuduration, processes = $(".process"), tl = [];//this empty array will contain all the timelines //generate a random duration function randomDuration() { duration = Math.round( Math.random() * number );//here you have to add the number return duration; } //generate a random delay time function randomDelay() { delay = Math.round( Math.random() * number );//here you have to add the number return delay; } $.each(processes, function(index) { waitQueueduration = randomDuration();//duration of the waiting queue tween waitQueueDelay = randomDelay();//delay of the waiting queue tween readyQueueduration = randomDuration();//duration of the ready queue tween readyQueueDelay = randomDelay();//delay of the ready queue tween cpuduration = randomDuration();//duration of the CPU tween tl[index].to($(this), time, {vars})//waiting queue tl[index].to($(this), time, {vars})//ready queue tl[index].to($(this), time, {vars})//CPU }); masterLine.add(tl); In that matter also this is a follow up of my previous reply, if you use the add method to insert an array of tweens/timelines inside a parent-timeline they all start and play at the same time, like this: var masterTL = New TimelineMax(), tl1 = new TimelineMax(), tl2 = new TimelineMax(), tl3 = new TimelineMax(), tl4 = new TimelineMax(); tl1.to(/*code here*/); tl2.to(/*code here*/); tl3.to(/*code here*/); tl4.to(/*code here*/); masterTL.add([tl1, tl2, tl3, tl4]); All the nested tweens/timelines will start and play simultaneously, to see how can you work different sequences and callbacks look at the api docs, the add method is a very useful tool for this situations. Hope this helps, Cheers, Rodrigo.

Hi, The best way,considering your scenario, are labels. You add the tweens that beign simultaneously at the same label. Now if you want to add several tweens to the main timeline that play in sequence but at the same time you need two timelines, a master timeline and a nested one that contains the other tweens and put both at the same label. var masterTL = new TimelineMax(), tl1 = new TimelineMax(), elem1 = $("div#elem1"), elem2 = $("div#elem2"), elem3 = $("div#elem3"), elem4 = $("div#elem4"); masterTL .to(elem1, 5, {vars}, 'label1') .add(tl1, 'label1'); tl1 .to(elem2, 1, {vars}) .to(elem3, 1, {vars}) .to(elem4, 1, {vars}); You can see it here: http://codepen.io/rhernando/pen/byruJ Another choice would be to put a simple tween instance in a timeline at a certain label and the first tween of the timeilne at the same label, like this: var masterTL = new TimelineMax(), elem1 = $("div#elem1"), elem2 = $("div#elem2"), elem3 = $("div#elem3"), elem4 = $("div#elem4"), tn1 = TweenMax.to(elem1, 5, {vars}); masterTL .to(elem2, 1, {vars}, 'label1') .to(elem3, 1, {vars}) .to(elem4, 1, {vars}) .add(tn1, 'label1'); You can see it working here: http://codepen.io/rhernando/pen/GyFfr Hope this helps, Cheers, Rodrigo.

Hi, Just to clarify some concepts, you mean like animating some elements from one box to another, being that process the CPU animation?. If that's the idea just one timeline would do it and it shouldn't be to complicated. But also you have to ponder whether the sequence is always the same or not; if you're going to animate the same objects or not, because that changes how the timeline is populated. If you could provide that info it would be great and it'll help to decide the best way to go forward. Cheers Rodrigo.

Hi, My best guess is no. Mainly because once you've created a tween instance it records the properties' starting values of the targets and I'm going to presume that it does the same with the targets, it seems to me that it'll be opposite to the engine's logic (how it works) to check continuously whether the target array has changed. Anyway Carl or Jack could clarify this point. What you could do is pause your tween, record it progress, then clear or kill (you'll have to see which method fits better in your app) the tween, populate or create it again, set the progress according to the value that was determinated before and finally resume the new tween. In that scenario I'll recommend you to use a function to create the tween and pass as parameters the array and progress, thus to make it as fast as possible in order to get a seamless transition between tweens. Hope this helps, Cheers, Rodrigo.

Ha!!! That's what I call support

Hi and welcome to the forums. The thing is that zero duration and set tweens get the job done immediately independently of the particular timeline sequence, therefore, even if the instance is at the very end of the timeline, it renders as soon as is created. The way to avoid that is immediateRender:false, with that the particular tween will honor the timeline sequence and render when is due, like this: var tl = new TimelineMax(); // hide the red block tl.set(document.getElementById('obj2'), {opacity: 0}); // tween the black block's width to 200px over 2 seconds tl.add(TweenMax.to(document.getElementById('obj1'), 2, {width: '200px'})); // then tween to the red block's opacity to 1 over 0 seconds // (effectively the same as set()) tl.add(TweenMax.set(document.getElementById('obj2'), {opacity: 1, immediateRender:false})); tl.play(); // the red block's opacity is set to 1 immediately... In this post there's a lot of discussion regarding this issue and in this particular reply Jack explains with great detail how this particular tweens works under the hood of the engine. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Well the best way to do it like that is through a function, you create a generic function and then you call it indicating the element you want the function to tween, something like this: var yourElement = document.getElementById("element1ID"), anotherElement = document.getElementById("element2ID"),; //Create the generic function function dynTween(element) { TweenLite.fromTo(element, 0.5, {opacity:0.5},{opacity:1, ease:Sine.easeInOut, onComplete:callTab}); } //Call the function for the specific element dynTween(yourElement); // Call the function for another element dynTween(anotherElement); And of course you can call that function no every event you need, for example button click, mouse over, mouse out, focus, blur, etc. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. You could use an onStart callback for the mouse out tween, with a conditional logic in it, therefore if the mouse in animation didn't complete the onStart call will execute, if the mouse in animation did complete the onStart call won't execute. Something like this: var isComplete = false; onmouseover = function(){ TweenMax.to('#id', 1, { autoAlpha: 0.5, onComplete: function(){ isComplete = true; // some background stuff handled here } }); } onmouseout = function(){ TweenMax.to('#id', 1, { autoAlpha: 1, onComplete: function(){ // some background stuff handled here }, onStart: function(){ if(!isComplete) { isComplete = false; //code here } } }); } Hope this helps, Cheers, Rodrigo.

Hi Frans, I'm presuming that your animation is reversing when you scroll up and by looking at your code it shouldn't be happening. Could you set up a live sample, fiddle or codepen in order to look at the complete code?, is hard to pin point any issue if we don't know what we're looking at. Cheers, Rodrigo.

Don't worry it has happened to all of us, keep it up. You're welcome. Cheers, Rodrigo.

Hi Frans, One question, what's the position property value of your elements?. They should have a relative or absolute position. Could you post your CSS markup or set a live sample (fiddle or codepen) in order to get a better look?. Cheers Rodrigo

Hi and welcome to the forums. The main problem is that you're animating the right property. In terms of moving DOM elements horizontally is better to stick with the left property, for example if you want something coming from the left side of the screen, you give it a negative left property, and for something coming from the right side a positive left property. Also a couple of hints, the css wrapper is no longer mandatory, the engine checks the vars properties and if it is a css property it sends it to the CSS plugin, and there's no need to use the px nor pass the values as strings, the if you just add the values as numbers thee CSS plugin assumes that you mean px; for any other units (%, em, points, etc) you have to pass a string indicating the value and unit just like you're doing already. So your code would look like this: //This image will come from the left side of the screen controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {left:-1000, ease:Quad.easeInOut})); //This image will come from the right side of the screen controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {left:1000, ease:Quad.easeInOut})); Hope this helps, Cheers, Rodrigo.

Hi, You could use canvas to create masking, at least on images, check this article: http://blog.teamtreehouse.com/create-vector-masks-using-the-html5-canvas The sample fiddle has a problem with the image request, so you have to replace the image's URL, try http://lorempixel.com As for clipping the only sample I have are the following: Just content http://jsfiddle.net/rhernando/fFJ29/ With a background image http://jsfiddle.net/fFJ29/19/ Hope this helps, Cheers, Rodrigo.