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.

Hi, Check this pens they illustrate the uses of the bezier pugin and how easy it is: http://codepen.io/GreenSock/pen/Krfod http://codepen.io/GreenSock/pen/CHwDx Cheers, Rodrigo.

Hi Ron, The best choice I can think of is to use getLabelBefore and getLabelAfter methods. Create a paused timeline and for every step of the scrolling animation add a label. Once the timeline is ready you add the clicks events to your timeline and use those methods along with the tweenTo method var tl = new TimelineMax({paused:true}), nextBtn = $("button#nextBtn"), prevBtn = $("button#prevBtn"); tl .to(element, time, {vars}, 'label') .to(element, time, {vars}, 'label') .to(element, time, {vars}, 'label') .to(element, time, {vars}, 'label'); nextBtn.click(function() { tl.tweenTo(tl.getLabelAfter()); }); prevBtn.click(function() { tl.tweenTo(tl.getLabelBefore()); }); You can see the api reference for more info. Hope this helps, Cheers, Rodrigo.

Hi Gabriel, Well is a little ominous to think that it may take years to realize the problem. The fact is that different browsers work in different ways, even with chrome and safari being webkit based they respond in different ways to particular scenarios. As far as having the browsers installed, I'll encourage you to do so, even with opera being the long forgotten one there's still a small chance that someone using opera might land on your site, therefore is a very healthy practice to test as much as you can. In the matter of this affecting any page, well as Carl pointed out this are the only two cases mentioned in the forums since the engine was released for JS and they depend, I believe, in browser cache and the circumstances are very different. While Brigitte's case involved page refresh, this one has to do with the user clicking the browser's back button. My advice would be to just keep your eyes open and remember this two issues, as you can see is not a hard thing to detect and neither hard to solve. Cheers, Rodrigo.

Hi, Yep Carl it has happened before I remembered a thread regarding the scrollTo plugin: Jamie pointed to some browser issues in this post: The main trouble makers are opera and safari 5, there's no safari 6 for windows yet so I can't say how it behaves. Using the following code works: var tl = new TimelineMax({paused:true, onComplete:tlComplete}); function tlComplete() { //Redirect to new location } $(window).on('unload', function(){tl.seek(0);}); I've created a simple sample to check: Hope this helps, Cheers, Rodrigo.

Hi, If all the timeline's tweens nave the same ease function you could populate your timeline through a function and pass the ease var as an argument. Another possibility would be to put tweens with linear.easeNone and use the tweenFromTo method, which accepts callbacks and ease functions. But in this case you'll have to create as many of this instances as tweens your timeline has, unless you're aiming to reproduce just part of the timeline. As you'll see there's no easy way to do this and as Jack said it would be interesting to know what's your scenario to find the best way to do it. Cheers Rodrigo.