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.