masq

Hi, I have a similar problem only in my case I need to be able to control child Timelines individually so I need them to be set as paused. This is my example as you can see it jerks the reverse animation, I think it's because I'm passing `.play()` function to `.add()`. Update[1]: Here is another example where I set `pause: false` and remove `.play()` and just leave the instance. But it still jerks the animation. Regards, S.

Hi! A big thank you for helping me understand the root of my problem. This is the first time I come head to head with such a problem, if I knew never would opened up a post (Being ignorant just thought there is something with the way plug-in works) Sorry everyone for your troubles and again big thank you everyone who helped, I will post full site in several days for you to enjoy! Best regards, Masq

I think, I don't understand JavaScript a bit. If I'm creating new instance of TimelineMax, it should be separate and independent from other Tweens, am I right? If I just use .play() and .reverse() it should never loose starting/ending style's ? Or is my code subject to cross reference, and it somehow interacts with other instances, but it can't be because before I created separate instances for each element without TimelineMax definition in layer object... Looking at this code, is there a possibility of cross reference between those three buttons, maybe in selectors? EDIT[1]: Here is screenshot with opacity and left not tweening correctly Where values should be opacity: 0 and left: 80px It doesn't happen only to this button, it happens time to time to others, jerking opacity and positions.EDIT[2]: I've uploaded most current version on live server - http://www.alisebrinumzeme.lv/dev/ EDIT[3]: I will check if the problem persists after minimizing image re-paint to minimum, but it's odd that it's affecting actual values. Regards, Masq

Hi, Yes, And heres is codepen version http://codepen.io/skmasq/pen/xbCJd , but it seems it doesn't replicate the problem. Here we go a video : http://youtu.be/IDZn-kdipyU It seems that it overwrote the begining of the element which is left: 80px,Here is how I define values: var routes = { "animals": { is_gallery: true, gal_rotation: 4, arrow_color: main_colors.green, button_opt: [ { id: "#animals-start", settings: {}, info: { opacity: 1 }, text: { opacity: 0 } }, { id: "#animals-contact", settings: { rotation: 13 }, info: { left: 0, opacity: 1 }, text: {} }, { id: "#animals-castle", settings: { rotation: 13 }, info: { opacity: 1, left: 0 }, text: {} } ], mt_rotation: 14, middle_text: $("#animals-mt"), start_position: function () { return staticRoute.animals(); }, ele: $(".animals", "#menu"), url: "/i/zveri/", opt: { width: 3326, height: 3326, marginTop: -2100, marginLeft: -1900, rotation: "0_short" } }, } Here I define tweens: layers: { route_hover: function (_thisTitle,_thisTitle_opt,_thisText,_thisText_opt) { var _self = new TimelineLite({ paused: true }); _self.add([ TweenMax.to(_thisTitle, 0.5, _thisTitle_opt), TweenMax.to(_thisText, 0.5, _thisText_opt) ]); return _self; } }, And here I attach tweens: $.each(routes[_route].button_opt, function (index, item) { var hitbox = $(".hitbox", item.id); var text = $(".text", item.id); var info = $(".info", item.id); // Declare info,text tweens hitbox.animation = new tl.layers.route_hover(info, item.info, text, item.text); // Set mouseeneter/mouseleave handlers hitbox.on("mouseenter.route mouseover.route", function () { hitbox.animation.play(); }).on("mouseleave.route mouseout.route", function () { hitbox.animation.reverse(); }).on("click.route tap.route", function () { // Disable animations map.layer.find(".route-btn").each(function () { $(this).off(".route"); }); }); }); Regards, Masq

Hello, I have success making everyone to view the real thing here: http://codepen.io/skmasq/pen/xbCJd EDIT: Routes are not working yet. But the interesting thing is, I can't seem to replicate this problem, as if somekind of magical thing is happening here. EDIT[2]: Maybe create site in codepen and ship it ? I will put up on live server in an hour, and will start to check the differences. EDIT[3]: I found a temporary fix, that will always keep my tweens without lag but with very,very low FPS. I created transparent element which is animating all the time: TweenMax.to($("#tween-fix"), 1, { css: { height: 55 }, repeat: -1, yoyo: true }); EDIT[4]: Here we go a video in codepen: http://youtu.be/cVnT99Iy0bQ http://codepen.io/skmasq/details/xbCJd EDIT[5]:I've put on site on live server address is http://www.alisebrinumzeme.lv/dev/ It seems that my temporary fix only works 90% of the time, I don't know why.. Regards, Masq

Hi there again, Answers to your questions and suggestions: window.onfocus didn't solve anything sadly, Thanks for the tip about scale, but that didn't change a thing neither, I added that code only for this problem with purpose to minimize horrible effects I had, basically it manages normal hover when going from element to element, wish this was the problem and I wish I could work around somehow when I'm leaving the element, Correct me here if I'm wrong while describing the actual process for tweening when hovering Broswer is tracking my mouse movement, Event listener fires function when hovered, Then tween is rendered tick by tick And what happens at the end I have no clue, because it's interesting that it shows the last tick if it didn't all the middle ones So from here, my guess: On multiple tabs, there is some kind of problem AND only in specific situations I have no clue on which ones precisely, with rendering actual ticks when mouse movement was idle for more then 1,5 second, it seems as if browser is sleeping when mouse stops... I added dispatchEvent to the mousemove and it didn't help either.My questions: Could it be somehow related to how I create new Tween instances, as I always create them dynamically? How .play() and .reverse() of the same Timeline() instance could mess up elements starting properties, one of the elements flickered and stuck at left: 70px? Would it help if I created new team foundation project and gave anyone of you access to see the real thing? Said that, I will try to replicate problem in jsfiddle and/or codepen, I am 90% sure I won't succeed but I have no other choice, because these buttons only show me that actual image sliders won't work properly too. EDIT[1]: I noticed VERY interesting thing, when I'm doing this sequence: wait 1 second move on element wait 1 sec move from element move mouse around for more then 1 second move to element the same thing happened, SO I think, it might be something with my Tween instances, browser and tweens loose communication if no Tween is animated for over a second. And my another guess is, there is something that messes up the whole TweenMax plguin, and don't know what, but basically it seems that browser or something in my code does something to Tweens. EDIT[2]: I've overboiled water the 3rd now So, I launched these lines 2 seconds separated: $(".hitbox","#animals-contact").trigger("mouseenter.route") $(".hitbox","#animals-contact").trigger("mouseleave.route")and the same thing happened, so now I'm 100% sure it's nothing to do with eventListeners and mouse tracking, it's 100% with the way I manage my Tween instances, create them, use them, while chrome has multiple tabs open, might it be that chrome has issues not rendering but execute javascript, like if nothing happens - let's save memory? And when something happens - Ops need to wake up, aaaand it's too late... Will do some profiling and rewriting, I will simplify the code as much as I can. Another interesting thing, that previously, what I think, the same problem occurred site wide, but now when I rewrote I removed some code that messed up and left some peaces that are still messing up small things. Sorry for my what it might seem illogical sentences, I'm just very stressed because need to ship this asap, but can't until this isn't sorted out.

Hi there, Before I continue, you can look at this post about problems with Tween transition I posted http://forums.greensock.com/topic/7584-best-way-using-tweenmax-for-hovering-elements/#entry28750 I really appriciate any kind of criticism on my programming skills and code writing. And you might be 100% right that complexity of code is just what the problem might be, I will try to rewrite overnight the site again, even more simpler. The main problem is, the simpler the code the larger file, pluss I need leave room for future content. Another problem is going from one place to another is so damn complicated, that I just need to make it modular as the rest of the site You just gave me a good idea, I will replace all nontransperent PNG's with JPEG files, less rendering, smaller filesize. As soon as I rewrite working example, I will put on the live server, with the same address, but until then take look at the problem in video -> http://youtu.be/iZ_ee0lh-7Q Regards and thanks for the very appreciated posts you been giving me, Masq

Hi there, so here is video http://youtu.be/iZ_ee0lh-7Q There is problem seeing mouse, but I will explain what I'm doing. I'm holding my mouse in one position for more then 2secs and then moving mouse over or out of element, and when I do that Tween just go straight to end or start without animating transition between those two points. Regards, Masq

Hi, I will record a video, because I don't know how to explain how to replicate the problem. I will post url to video asa I'll upload it. Regards, Masq P.S. These tools are best thing that happened to me while programing on js, I thinking of going green anytime soon.

I think I might just create a video, with experiments showing how tweens act... I know that it's the way I use them and create them. Because I don't know how actually TwennMax.to() and TimelineMax() work, I don't know where to find the problem? Why would there be a situation where Tween doesn't animate and just show end result? Is it .play() function and .reverse(), or is it the way I pass my element? By default I pass elements like this: $("#element") or $(".elements-class") When I did this in jsfiddle everything works fine.. Could it be that those buttons are in nested containers? My site structure is like this: View portView area simulated_background main_area layer layer-item (buttons are here) menu (buttons are here) middle_text key-hole key hole light (this tween sometimes lag too) And always the place where buttons are active is on the top and all unnecessary are display: none. If site is opened normally and everything is done correctly, without leaving page, it might just bee all ok, no problems, always one of these things 100% trigger problems: From developer tools taking select element, it messes with DOM and then tweens start to jerk Switching tabs when something is animating (allmost anytime) (this is 50%) Losing focus from browser and going with mouse in very fast. EDIT[1]: And yes it's still related to multitabing, without multiple tabs everything works just fine. And none of the above things trigger the problems.

Hello there, I have problems with my Tweens, when I'm animating them on hover like this: $(this).find("a.handler").on("mouseenter.action mouseover.action", function () { if (globals.menu_item_hover_complete) // Animate current element item_hover.timeScale(1).play(); console.log("hovered"); }).on("mouseleave.action mouseout.action", function () { // Reverse animation item_hover.timeScale(1.5).reverse(); }); These Tweens on chrome sometime lag and from opacity: 1 animates to opacity: 0.060008 (it hsould be 0) and sometimes when I'm tweening opacity:1 and top: 70, it sticks to top: 70 and just tweens opacity. What is the best way to use Tweens for hovering animations?

Hello there again. So I have good and bad news. Good news is I managed to fix the major problem with animations. It seems that chrome isn't able to run JS properly. What I did I wrote more direct code rather than writing nested code, and did everything step by step watching if there isn't anything that puts a weight on animations. So that's good, now everything works slick.... BUT Now there is problem which, what I think, comes from the first problem. When I change tabs in middle of animations, I create a problem with TweenMax animations, it seems that on fast mouseenter/mouseover and/or after waiting for 2-3 secs on icon and then moving mouse outside the animation goes straight to end point or starting point, without animating anything, but when mouse is moved slowly in/out not staying in one place too long everything works like charm. I switched of RAF, and that didn't help. Maybe it's somehow related to how I write my Tweens, because when I tried to replicate problem in jsfiddle everything works fine. So here some samples how I attach Tweens: Light contur: Here I define it: light: function () { return TweenMax.to(map.light_contur, 1, { opacity: 1, paused: true }); } Here I attach it: keyhole: function () { // Set light tween var lightTw = tl.start.light(); map.light_contur.on("click tap", function () { // Remove event listeners map.light_contur.off(); // Start intro tl.start.intro(); }).on("mouseenter mouseover", function () { lightTw.play(); }).on("mouseleave mouseout", function () { lightTw.reverse(); }); } Menu buttons: Here I define them: itemHover: function (_thisTitle, _thisIcon) { var _self = new TimelineMax({ paused: true, onStart: function () { globals.menu_item_hover_complete = false; console.log("animation started"); }, onReverseComplete: function () { globals.menu_item_hover_complete = true; $(document.elementFromPoint(window.mouseXPos, window.mouseYPos)).trigger("mouseenter.action").trigger("mouseover.action"); } }); _self.add([ TweenMax.to(_thisTitle, 0.5, { opacity: 1, scale: [1, 1] }), TweenMax.to(_thisIcon, 0.5, { opacity: 0, scaleX: 2, scaleY: 0 }) ]); return _self; } Here I attach them: menu: function () { // Find all menu items map.menu.find(".menu-item").each(function () { // Set animation var item_hover = new tl.menu.itemHover($(this).find(".title"), $(this).find(".icon")); $(this).find("a.handler").on("mouseenter.action mouseover.action", function () { if (globals.menu_item_hover_complete) // Animate current element item_hover.timeScale(1).play(); console.log("hovered"); }).on("mouseleave.action mouseout.action", function () { // Reverse animation item_hover.timeScale(1.5).reverse(); }); // Set click event $(this).find("a.handler").on("click.action tap.action", function () { if (!$(this).hasClass("facebook") && !$(this).hasClass("twitter")) { //Get routeName var routeName = $(this).attr("data-menu-item"); // Remove all handlers map.menu.find("a.handler").each(function () { $(this).off(".action"); }); // Reverse hover item_hover.reverse().eventCallback("onReverseComplete", function () { // Show middle text TweenMax.set(map.middleT, { display: "block" }); // Go to route tl.menu.toRoute(routeName); }); } else { item_hover.reverse(); } }) }); } And here are another button set I use in regions: Here I define and attach them: // Global settings var global_settings = new TimelineMax({ paused: true, onComplete: function () { // Set show content var showContent = new TimelineMax({ paused: true, onComplete: function () { // Reset middle text tl.middle_text.reset(); } }); // Middle text fadeOut showContent.add(TweenMax.to(routes[_route].middle_text, 1, { opacity: 0 })); // Content fadeIn showContent.add(TweenMax.to(map.layer, 1.5, { opacity: 1 })); // Launch showContent.play(); } }); // Settings foreach button $.each(routes[_route].button_opt, function (index, item) { // Settings for route button global_settings.set($(item.id), { css: item.settings }); // Declare info,text tweens var routeBtn_hover = new TimelineMax({ paused: true, onStart: function () { globals.route_btn_hover_complete = false; console.log("Route btn animation started"); }, onReverseComplete: function () { globals.route_btn_hover_complete = true; $(document.elementFromPoint(window.mouseXPos, window.mouseYPos)).trigger("mouseenter.route").trigger("mouseover.route"); } }); // Add animations routeBtn_hover.add([ TweenMax.to($(item.id).find(".text"), 0.5, { css: item.text }), TweenMax.to($(item.id).find(".info"), 0.5, { css: item.info }) ]); // Set mouseeneter/mouseleave handlers $(item.id).on("mouseenter.route mouseover.route", function () { if (globals.route_btn_hover_complete) routeBtn_hover.timeScale(1).play(); console.log("Route btn hover started"); }).on("mouseleave.route mouseout.route", function () { routeBtn_hover.timeScale(1.5).reverse(); }).on("click.route tap.route", function () { // Disable animations map.layer.find(".route-btn").each(function () { $(this).off(".route"); }); }); }); // Set info's settings global_settings.set($(".info"), { opacity: 0 }); // Launch settings global_settings.play(); } If someone could give me a tour how TweenMax.to() function reacts with the browser, and why does $(element).on("mouseenter mousover") jerks with that function it would be great! If anyone has any questions please ask, and if you need live version, ask for that two, I will try to put that on, because right now, I rewrited everything and I dont have underconstruction page and then I need to create it! Regards, Masq

Hello again. Sorry for my ignorance, I just thought that set wouldn't have a callback just because it's not an animation type function. And yes, the second set of code is the actuall solution for my problem, because I have lot's of elements that are needed to be set Big thanks and sorry for silly question. Reason why I asked is that google doesn't really showed this question and I wanted others to be able to find this one when searched Regards, Masq

Hello there again! I use TweenMax.set() to set properties like opacity and transform(x,y,rotate,scale(x,y)) for IE6-8, and it works like charm, everything is perfect! But I have one issues, which I don't know how to solve. The life cycle of my page: Set DOM values via MVC engine Wait until $(window).load() and then fadeIn() page Problem is TweenMax.set() executes on slow computers after load is complete and then user needs to wait like 2-3 seconds until element by element is positioned for him. Basically it look like mess. What I would want is to know when TweenMax actually sets the values and after that I show content to the user. Is it possible, has anyone ever had this problem? Sincerely, Masq

Hi, I posted issue to chromium website, so I hope to get some answers. Upgraded to latest TweenMax 1.9.3 and no change at all in performance. I will do some talking with my client about this problem, how to handle this.... to be honest, this problem is so ridiculous, I just can't believe it exists... I'll be posting up if there is some kind of workaround or solution, until then Stay classy GreenSock! Regards, Masq