farhoudz

Thanks a ton PointC, That is exactly what I want, I learn so much from you guys.

Thank you so much guys, Actually I thought about removing yoyo from the timeline but my ideal desire about this animation is that the rectangles draw from the top and then scale down again from the top like the image I shared Here I also tried to achieve this using a master timeline which manages two separate timelines but it was not a success, maybe I missed something simple here. Also thanks a ton PointC for your guidance on the Codepen.

Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.

Thank you Rodrigo for your effort but my case is a little different, I have edited my codepen sample: http://codepen.io/fzolhayat/pen/xGmVqW As you can see it is working alot better now but I still have some problems in some cases: - Case one: Select tab two then tab three and then tab one; Here you can see a conflict between Timelines which results in "firstChanel" left position to be animated correctly but remain at "display: none; and visibility: hidden;" state so from user's point of view nothing happened or something bad happened. - Case two: Directly select tab three and then tab two; Here you can see that same problem happened plus all tabs are some kind of disabled and none of the Timelines respond to click event. So by conflict I mean these cases, I may also recall that I created directSelect Timeline because I want the client too see that there is a column between tab one and tab three. Regards and thank you for helping me solve this problem.

Dear Ihatetomatoes, Here is exactly what I am trying to do: http://codepen.io/fzolhayat/pen/xGmVqW As you can see there are three tabs which If you click on each one of them it has to animate you to the corresponding .col element and in addition it has to animate the location of .dot element to show you which element you have chosen, I have also used hammer.js in my real project to activate swipe event on mobile devices on each .col element so whether the user clicks on each tab or swipes on each .col element it has to animate to the right element and all of the Timelines has to be synced but the problem is that : 1 - it plays all of the Timelines together as I can guess 2 - I think all of my Timelines has conflict which each other as they have common tweens and if for example you play directSelect Timeline and want to reverse secondSwipeRight Timeline then there is a problem I hope I could explain my problem clearly, It's all a matter of managing multiple Timelines. Regards and thanks in advance.

Thank you Ihatetomatoes, I use your technics and read your articles every day and they are awsome, About your solution I have edited my code like this: function fsr() { var firstSwipeRight = new TimelineMax({}) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "147px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstSwipe+=0.1") .fromTo(secondChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "nextChanel") .fromTo(secondChanel, 0.1, { left: -offset }, { left: 0 }, "nextChanel+=0.1"); return firstSwipeRight; } And here is my master Timeline: var chanelAnim = new TimelineMax({ paused: true }), firstSwipe = fsr(), secondSwipe = ssr(), directSelection = ds(); chanelAnim.add(firstSwipe, "scene-one") .add(secondSwipe, "scene-two") .add(directSelection, "scene-three"); And I use them like this: chanelAnim.seek("scene-one").play(0); or: chanelAnim.seek("scene-one").reverse(0); But the problem is that this code plays all the Timelines together I think and I really do not know why, Am I wrong at some point? Please advice, Farhoud

Here I have three Timelines which I play and reverse them in appropriate cases : var firstSwipeRight = new TimelineMax({ paused: true }) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "147px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstSwipe+=0.1") .fromTo(secondChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "nextChanel") .fromTo(secondChanel, 0.1, { left: -offset }, { left: 0 }, "nextChanel+=0.1"); var secondSwipeRight = new TimelineMax({ paused: true }) .fromTo(secondChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "145px", scaleX: 1 }, { right: "266px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(secondChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstSwipe+=0.1") .fromTo(thirdChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "nextChanel") .fromTo(thirdChanel, 0.1, { left: -offset }, { left: 0 }, "nextChanel+=0.1"); var directSelect = new TimelineMax({ paused: true }) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstStep") .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "firstStep+=0.1") .fromTo(secondChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "secondStep") .fromTo(secondChanel, 0.1, { left: -offset }, { left: offset }, "secondStep+=0.1") .fromTo(secondChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "secondStep+=0.2") .fromTo(thirdChanel, 0.1, { visibility: "hidden", display: "none" }, { visibility: "visible", display: "block" }, "thirdStep") .fromTo(thirdChanel, 0.1, { left: -offset }, { left: 0 }, "thirdStep+=0.1") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "266px", scaleX: 3 }, "thirdStep") .to(".dot", 0.2, { scaleX: 1 }); As you can see some targets are the same in all three Timelines, I manage to use these Timelines like this: element.on("click", ".tabs", function (event) { target = event.currentTarget; i = Array.prototype.indexOf.call(target.parentNode.children, target); dotPos = $(".dot").position(); leftPos = dotPos.left; // How to prevent conflicts between my Timelines in all below cases? if (i === 0 && leftPos === 145) { firstSwipeRight.totalProgress(1).reverse();} else if (i === 0 && leftPos === 26) { directSelect.totalProgress(1).reverse();} else if (i === 1 && leftPos === 266) { firstSwipeRight.totalProgress(0).play();} else if (i === 1 && leftPos === 26) { secondSwipeRight.totalProgress(1).reverse();} else if (i === 2 && leftPos === 266) { directSelect.totalProgress(0).play();} else if (i === 2 && leftPos === 145) { secondSwipeRight.totalProgress(0).play();} }); The problem is that as I use .totalProgress() method to somehow set each Timeline head on the start or end position to play or reverse them without conflict, I still has conflicts in some properties like display and visibility for example and this conflict happens when I use first and second Timelines and then use the third or some other cases, So what could I do to prevent these conflicts in all cases ? Please Advice.

What about using this function for multiple Timelines at once? I mean clearing properties that are set with multiple Timelines on multiple targets which some of them are common in all Timelines, Could I do this like this? Because I get an error saying "can not tween a null target" !! function clearProps(scene) { var targets = scene.getChildren(); for (var i = 0; i <= targets.length; i++) { TweenMax.set(targets[i].target.selector, { clearProps: "all" }); } } function clearAllProps() { var timeLines = [firstSwipeRight, secondSwipeRight, directSelect]; for (var x = 0; x <= timeLines.length; x++) { clearProps(timeLines[x]); } }

Thanks again my friend.

Thanks OSUblake It was smart to use the progress method of GSAP but if I play my Timeline for example in iPad landscape mode and as it is finished playing change the orientaion of the screen and then try to reverse the Timeline progress then it just reverses the canvas animation progress and not all the other elements in my Timeline together so all my other elements remain at the finished Timeline progress position and not animate back as I use the reverse method! , Here is my Timeline code: compAnim = new TimelineMax({ onUpdate: drawRipple.bind(ripple) }).set(".post-modal", { y: -15}) .to(ripple, 0.3, { radius: radius, ease: Power2.easeIn }, 0) .to(".md-create", 0.2, { rotation: 90, transformOrigin: "center center", opacity: 0}, 0) .to(".md-close", 0.2, { rotation: 90, transformOrigin: "center center", opacity: 1}, 0) .to(".post-modal", 0.1, { display: "block", y: 0, alpha: 1});

Hello dear OSUblake, I have a small question and that is how could I resize the circle on browser resize or orientationchange on tablets for example? Thanks in advance for your time and effort. Farhoud.

Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example. I hope I could describe my problem well. Thanks in advance.

Thank you very much OSUblake and thanks for the best support among all javascript libraries ever.

Thank you very much OSUblake, Your solution hast the best performance ever. Regards.

So how would you suggest to snap to a very large scale so the user eye could be tricked? Actually for the first part of your feedback I think I can get the viewport width just before Scaling the circle and after that pass that value in order to be calculated for the Scale value. Regards and thank you for your kind support.

Thank you for the response as always Carl, What about Mobile browsers like iOS safari or Mobile Chrome? because They are also laggy! The CSS-Only version is performing well even on firefox but I am not sure I could make it a sequenced animation like what I can do using GSAP, The only way I know is to use onComplete on my Tween steps in order to use jQuery addClass method and handle it the CSS way, But the problem is that I can not reverse the whole animation like what I am able to do using GSAP because the Timeline does not use removeClass on reverse method, I hope I could describe my concern well, Regards.

Hello Respectful GSAP community, I am trying to scale up a Fixed Action Button to achieve a special effect of Material Design but I have some frustrating problems which I do not know why these happen, first of all the scale animation that I am trying to achieve is very laggy on desktop Firefox (Latest version) and Mobile browsers (I have tried on iOS 8 safari and iOS chrome) as you can see in my Codepen example, Second, How could I make the first three steps of my Timeline to happen at the same time and then the forth step? Because Now steps other than the first one wait until the scale animation is finished and then start to act and I don't know why! I have just simulated the Scale part because only that is performing laggy! Regards and thanks in advance.

Thank you Carl, I really appreciate your support, I think for now I use the .timeScale() method but I really think if I write new timelines for that matter it's better, the thing was I thought there is a method for this that could help me write less code. Thanks again all of you

How can I reverse the nested timelines at same time exactly ? is there a method in GSAP for this matter Or I have to write separate tweens to achieve this? I have also tested .timeScale() method like this : tlThree.reverse().timeScale(2).eventCallback("onReverseComplete", function(){ tlFour.play(); }); But the problem is that it affects tlThree.play() the next time it plays also and I want this timeScale to happen only when the timeline is reversing ! Thanks again.

Is there is any way to reverse a timeline in a different way compare to when it plays for example in my case, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline? This is my timeline code : var tlThree = new TimelineMax(); // SP tlThree.add( TweenMax.to(".layer-thirtyFour", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtyFive", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtySix", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtySeven", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyEight", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyNine", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to('.detail[data-title="seaLevelRise"]', 0.35, {display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"], .down[data-dest="cleanEnergy"]', 0.35, {delay:0.2, display:"block", alpha:1}) ); Normally I use .reverse method like this : tlThree.reverse() But it reverses the timeline one element at a time and in some special cases I would like to reverse the timeline as a whole in a way that all elements move out of the page in 0.35 s time, please note that my CSS styles for these layers are like this for example : .layer-thirtyNine { visibility: hidden; position: absolute; left: 0; top: -100%; } So if this goes out of the page as a whole in any direction does it interfere with CSS ? Thanks in advance. PS: www.12wave.com Has done this using GSAP but I could not find out how!

Diaco.AW Could you please tell me if there is any way to reverse a timeline in a different way compare to when it plays for example in my case above, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline for the scene change ? Thanks in advance

Thank you Diaco you are a life saver

I have a clickable icon which when clicked by user I want to reverse a timeline and after the reverse process is finished play another timeline but the point is that I want to call a function just before the second timeline starts to play so here is the functions I would like to call : function day() { $('section').removeClass('night').addClass('day'); } function night() { $('section').removeClass('day').addClass('night'); } and here is the click function I wrote: $('.up').click(function() { TweenMax.delayedCall(0, function(){tlFour.reverse()}); TweenMax.delayedCall(5.4, function(){tlThree.call(day, 0); tlThree.play()}); } In which the second 5.4 delay is the time needed for tlFour timeline reverse to finish and here are my timelines : var tlThree = new TimelineMax(); tlThree.pause(); tlThree.add( TweenMax.to(".layer-twentyTwo", 0.5, {left:0}) ); tlThree.add( TweenMax.to(".layer-twentyThree", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFour", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFive", 0.5, {left:0}) ); tlThree.add( TweenMax.to('.detail[data-title="cleanEnergy"]', 0.5, {alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.down[data-dest="greenPlanet"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); var tlFour = new TimelineMax(); tlFour.pause(); tlFour.call(night, 0); tlFour.add( TweenMax.to(".layer-twentySix", 0.5, {alpha:1}) ); tlFour.add( TweenMax.to(".layer-twentySeven", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-twentyEight", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-twentyNine", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-thirty", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyOne, .layer-thirtyTwo", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyThree", 0.5, {top:0}) ); tlFour.add( TweenMax.to('.detail[data-title="greenPlanet"]', 0.5, {alpha:1}) ); tlFour.add( TweenMax.to('.up[data-dest="cleanEnergy"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlFour.add( TweenMax.to(".review", 0.5, {delay:0.2, display:"block", alpha:1}) ); Please note that tlFour.call(night, 0); is for the time that tlFour timeline plays as a result of another click and I would like to reverse that but as the timeline reverse method does not reverse calling functions I had to call the day() function to reverse that but the problem is that this function executes after tlThree is played completely but I want it to be called just before that, any other Ideas on how to write this code in a better way is also appreciated because I am new to GSAP, Thank you PS: for tlFour the night() function is called just before the timeline begins to play and that is fine but for tlThree this is not happening and that is the problem.

Thank you Diaco

So I am using .reverse() method for my Timeline in some cases, The questions is how could I jump to the first frame instead of waiting for it to complete the reverse ?