Rodrigo

Hi, Please don't think for an instant that this is any source of trouble, problem or inconveniences for me, is the complete opposite it gives me a lot satisfaction help people in the forums and also has been a great source of knowledge for me. Also this is what I like to do so I have a lot of fun doing it. I'm a little obsessive about things and you can bet that until this is solved it'll keep going in my mind. The thing is I have the perception that you might be in a hurry with this one, therefore my timetable would not meet yours, now if is not too urgent I'll keep whacking at it. Cheers, Rodrigo.

Hi, Yes overwrite doesn't work like that and is not intended for this situation. What it does is resolves conflicts when two GSAP instances are animating the same object, at the same time and the same properties. In this case you're assigning different instances to different objects, therefore the engine doesn't sees any conflicts and subsequently the overwrite does nothing. The thing is that what you're building is not the easiest thing to do, specially if it is dynamic, which is always ideal. Perhaps creating an array adding the first three elements of the collection and passing them to a timeline, then empty the array and add the following three to another timeline and so on, and finally nest all those timelines to a master one. Maybe my approach is not the best one, I'm far from being the best JS coder in this forum and like Jack said in another post people frequently overcomplicate things and in the same extent code. If the way I'm trying is indeed the best you'll need to give me more time, maybe more than you can spare right now, but at this point I can't do more than I've already done, just like anyone else I've bills to pay each month, I hope you understand. Cheers, Rodrigo.

Hi, Yep I see now what's the idea. Unfortunately I couldn't come up with a complete solution at this hour; the challenge was to call the elements 3 at a time, add those to a timeline with a repeat and yoyo, then call the next 3 to a different timeline with repeat and yoyo, and so on... The good thing is that I didn't knew how to declare variables dynamically and now I do , so what I came up with is the following: var count = 1, masterTL = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:.5}), tl1 = new TimelineMax({repeat:1, yoyo:true}), lineArray = []; $.each($("div.tick"),function(index, element) { if(count == 1) { console.log("Hi-diddly-ho, neighborino!!"); } if(index % 3 == 2) { count++; var newLine = 'tl'+count; lineArray.push(newLine); lineArray[count-2] = new TimelineMax(); for(var i = 0; i <= index % 3; i++) { console.log("internal"); } console.log('count: ' + count + '\n' + 'reminder: ' + index % 3); console.log(lineArray[count-2]); } }); The first part of the loop takes the first 3 elements and add those to the previously created tl1, then since count increases to 2 that part of the code never runs again. The following takes the next three elements and add those to a timeline named tl2, then the next 3 to a timeline tl3 and so on. Finally you have to add each timeline to the parent one (masterTL). I'll see if I can complete this during the weekend, I'm half sleep now. Hope this helps, Cheers, Rodrigo.

Hi, You can use the division reminder and some conditional logic to create labels in your timeline and add a set of three elements at each label position, like this: CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }, 'label' + count) if(index % 3 == 2) { count++; } }); Note that if you want the first element to have a particular tween, ie, not the same tween as the rest of the elements, you'll have to take it outside the each loop and run the previous code, including the count conditional, with a different set or array of elements that excludes the first one. You can see it here: http://codepen.io/rhernando/pen/eDmsv Hope this helps, Cheers, Rodrigo.

Hi, The delay has to be outside the scrollTo wrapper: tlS.to(window, 2, { scrollTo:{y:$(".goImg").offset().top},//scrollTo end bracket delay:4, ease:Power4.easeInOut }); As far as the ease not working is hard to say, maybe with the wrapper issue fixed it'll work, if the problems continue please provide a simple codepen or fiddle illustrating the issue. Hops this helps, Cheers, Rodrigo.

Hi, As far as I know and doing a couple of searches in google (not too deep so I'd suggest you to dig a little more) preventing the page from scrolling is not an easy task and not something too many people has done. The most reliable way I can think of is using GSAP's scrollTo plugin and a set() instance to tween the scroll position to a certain value while the tween is executing and once the tween has completed release it, so the user can keep scrolling. You can see it here: http://codepen.io/rhernando/pen/FhJrH The only flaw in this sample is that if the user scrolls up with the scroll bar the element gets out of the view. Another choice would be to set the container to a determinated height so the window scroll would reach it's max keeping element that's going to be animated at the center of the screen (you'll need to get some code into that but is not too complicated with JQuery) and once the animation is completed tween the height of the container to it's normal size. Keep in mind that this should be done after the entire DOM is ready, otherwise scrollorama might not work as expected, so you should get the document height, the window height and the element offset, then set the container's height to avoid scroll beyond the element and once the animation is complete reset the container's height; it might sound complicated but is not, just look for the right functions in JQuery, you could use this function sheet: http://www.oscarotero.com/jquery/ Hope this helps, Cheers, Rodrigo.

hi, You could store that value in a general scope variable and for orientation changes you can use a resize event in order to change that value to the current one. Hope this helps, Cheers, Rodrigo.

Hi Invalidate will clear the tween instance vars, use clearProps for that. Look at the following link: http://forums.greensock.com/topic/8091-reset-inline-style-value-when-returned-to-default/ Hope this helps Cheers Rodrigo

Hi Check this link: http://css-tricks.com/snippets/css/transparent-background-images/ Using the cssRule plugin you could achieve that. Hope this helps Cheers Rodrigo

Hi, Also take a look at this library, it has event controls so you can combine them with GSAP, i haven't tried yet, but remembered a tweet I saw earlier: https://github.com/azer/play-audio Hope this helps, Cheers, Rodrigo.

Hi, Use clearProps like this: tl .add(TweenLite.to(el, 0.1, {scale: 3.0})); .add(TweenLite.to(el, 0.3, {scale: 1.0, ease: Power2.easeInOut, clearProps:"scale"})); You can read more about it here: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html At the very bottom of the page. Hope this helps, Cheers, Rodrigo.

Hi, If you want to chain the animations (slide first and then transform) add two different tweens to the timeline: t1 .to(item, 0.8, {x:100}) .to(item, 0.8, {rotationX:-90, transformOrigin:"50% 0px", ease:ease.Back.easeOut}); Hope this helps, Cheers, Rodrigo.

Hi glad you got it working. Considering your previous post: If you need the timeline to reach 20 seconds add a callback to it at the 20 second mark with the call() method, like this: tl.call(setOpacity, [glass1, glass2], 20);//appends it at exactly 20 seconds into the timeline (absolute position) Like that you're passing an array of the glasses to the function and you avoid the extra code. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Yes the document write is the most common resource, another is using JQuery's ajax, that comes with it's own document write callback, but for that I use one of my favourite libreries: YepNopeJS, you can use it to load JQuery if that CDN fails too. It's very simple to use it: <script src="localPath/js/yepnope.js"></script> <script> yepnope([{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',//First we add the CDN links complete: function () { if (!window.jQuery)//if the CDN fails we load the local copy { yepnope('localPath/js/jquery.min.js'); } } },{ load: 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' complete: function () { if(!window.TweenMax)//if the CDN fails we load the local copy { yepnope('localPath/js/gsap/TweenMax.min.js'); } } }]); </script> And you're done!! The beauty of YeoNope: no libraries dependencies, asynchronous, has callbacks and you can use it to conditionally load CSS as well, so is a great resource for IE fallbacks and responsive design. Hope this helps, Cheers, 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.