sigmundsquirrel

Seems like I have two separate issues: the performance of the animation (which is poor only on the Safari for iPad but not on Chrome) and the :hover mouseover behavior on the main brain navigation (which requires a global fix). I'm going to be trying a few things today—updating to GSAP 1.9.2 among them (for the requestAnimationFrame events). I'll let you know how it turns out. If anyone has a suggestion for the brain lobe tooltips, I'm open. I've got some things I'll try, but it seems there is a divergence of opinion online on how to do this for mobile. thnx

Thanks, Jamie. That's exactly the kind of suggestion I need. This is my first HTML site for mobile, so I'm pretty green. (Actually, it was web first, and now we're addressing the mobile scenario.) I'm sure I've broken many best practices... The client has reported the performance problems on iOS 6.1.3 (just updated last week) for Safari. But they also report that it "runs beautifully" on their Chrome for iPad on the same device, so it really seems like there is something browser-specific going on (aside from the general improvements I will make for performance). I'm hoping GSAP 1.9.2 and the requestAnimationFrame events might help. A question: I've seen so many different "solutions" for the hover state on mobile Safari. Do you have a suggestion for the tooltips behavior? Thanks.

Thanks. Is 1.9.2 released, or is it still preview? Also, your clicking problem seems like I should look into .touch instead of .click for button behavior?

I just built a site that heavily uses GSAP for the animation. Thanks for a great framework! I transitioned seamlessly (almost) from Actionscript. It went live today at http://www.skidmore.edu/mind/ The client is complaining that it is very slow (they actually said "very, very slow") on Mobile Safari on iPad, but worked well on Mobile Chrome, so it doesn't seem to be just the processor. Do you know of any Mobile Safari-specific animation issues to look for? A couple of things I'm thinking. A few functions were written by another developer and he used jQuery animate() extensively. I've got the jquery.gsap plugin to handle it, but am I taking a speed hit by translating. Is it worth recoding into GSAP? Also I'm using jquery.gsap.js 0.1.5 and TweenMax.js 1.8.2 (as well as jquery.js 1.8.3) I began with jquery 1.9 but there were some issues on IE because of their major rewrite, so we backtracked to 1.8.3. Is that a speed issue? I'm just throwing all this stuff out there and hoping someone will have a suggestion of a) potential things to look for, or potential solutions. I've read that opacity is a problem on iOS, but the Mobile Chrome seems to be doing well, so it isn't a pure iOS problem... Thanks again for a great product. This was my first non-Flash animated site and I couldn't have done it without the familiarity and comfort of greensock!

Aha! In the simplified test page I posted above, adding filter: inherit to the child div worked! You can test that link again to see it. I'm going to try it out on more advanced nesting and see if it holds. But that's already a better solution than what I was considering. Thanks!

I'm new to browser-based animation, having come from a Flash/Actionscript background. It's becoming obvious to me that I'm going to need a LOT of help! So... I'm building a relatively complex animation site using a combination of jQuery and Greensock (thank god for Greensock!). It works fine in all the browsers I'm targeting except IE8, which the client insists upon. Most of the problems have to do with scaling and opacity. I'm working on them one at a time. Scaling first. Here is a simple page where the image needs to fill the browser window at all times without losing its aspect ratio. In this instance, the image needs to be in an img tag in a nested div tag. Scale and Resize Test (image should fill window at all times without distortion) http://www.poddesign.com/skidmore/beta/v2_ie8/scaletest.html I have a sizing function triggered by $(window).resize that uses TweenMax.set(target, {scale: dynamic_variable}); where the dynamic variable is calculated from the window height and width and the content height and width. It works everywhere but IE8. Can you look at it and tell me why it isn't scaling at all in IE8? I thought Greensock TweenMax was performing cross-browser calculations under the hood, so that the scale property would translate to an MSFilter (or whatever it does...) *If you want to see a working version of the site on browsers other than IE8 (to see what I'm ultimately trying to do; the screens need to fill the browser), try this beta link — http://www.poddesign.com/skidmore/beta/v2/

Very clean and clever. The float:right and top/right properties make it very efficient. Using the float might be a problem in my particular real world instance (I'm positioning the div absolutely on the screen). I could nest it in another div and position that absolutely and have the tweened div float:right within it, but it might start getting messy. It's still a great solution that I'm sure I'll use soon, Rodrigo. thanks again!

Ha, I joined jsfiddle so I could post that example. Still learning the ropes on how to use it. I didn't know how to add the gsap file to make the code work, so I looked at a jsfiddle linked to from another forum thread here, and copied the URI they used for the TweenMax.js. (So blame them!) Is there a way to browse to it, or could I just type in: cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js thnx

Turns out the clip property was just what I needed. I'm not targeting older than IE8, so it should be good. Thanks Carl! (Don't know how I didn't know about that... hmm, huge gaps in my knowledge.) Rodrigo, the float:right was very clever. I wonder what would happen to a background image though. I haven't made the test, but I suspect it would look like it's sliding across (similar to tweening the position while tweening width). btw Carl -- I made a JSFiddle showing the difference between tweening the background image to 0px and tweening it relatively to +=400 (as I mentioned in the above comment). The two tweens (left and backgroundPosition) seem out of sych. http://jsfiddle.net/sigmundsquirrel/bYP7F/ Thanks both!

btw, I know I can tween the width in the normal way, and tween the position of the div left to make it look like it is expanding to the left side, and tween the background-position of the image to the right. That works for this particular instance. But it seems like the transformOrigin would be more flexible and useful in more circumstances. I'd like to know how to use it. •ok, this works, but I would still rather be able to use the transformOrigin, though. TweenMax.to($("#test"), 2, {width: "800px", left: "-=400px", backgroundPosition:"0px"}); •btw, this didn't work, the background was sliding, as if the left tween and the background-position tween were not in synch: TweenMax.to($("#test"), 2, {width: "800px", left: "-=400px", backgroundPosition:"+=400px"}); • this would be best (if it worked): TweenMax.to($("#test"), 2, {width: "800px", transformOrigin:"right"});

For example, let's say I have a div 400px x 400px, with a background image 800px wide and offset 50% to the left. The div's overflow is set to hidden. I want to tween the width of the div to the full 800px but have it tween from the right edge of the div in the left direction, revealing the rest of the background image. I tried using transformOrigin:"right" but it didn't work. I would also want the right edge to remain stationary while the left side expanded. //example of div to be tweened <style> #test { position:absolute; width: 400px; height: 400px; /*note: background image is 800px wide and offset to the left*/ background: url(img/test_800px.jpg); background-position: -400px 0; left: 500px; display: block; overflow: hidden; } </style> // example of function to tween width from right edge in the left direction: <script> function revealBg() { TweenMax.to($("#test"), 2, {width:"800px", transformOrigin:"right"});} </script> If this isn't correct, how else could I make something tween (width in this instance, but scale or whatever) from an origin point other than the upper left, and in a direction other than left to right.

Ah -- the clear() method. I was looking for something like that but didn't see it in the API docs at api.greensock.com/js (In fact, I was having a hard time finding some stuff. A note in the TimelineMax section mentioned the totalProgress(x) method, but I couldn't find it until I looked in the TweenMax section. A comprehensive cross-category index would be a huge help! mousetween.progress(0); mousetween.clear(); startMouse(); This is the kind of simple efficient solution I was sure existed, but couldn't find. Thanks in advance. I'll apply it and run it around the block a few times. If it works, thanks again. If it doesn't, I'll be back!

I have a problem with a relatively simple animation that may be interrupted by interactivity. When it is, it needs to reset itself and play again. I'm able to do this except for the Timeline object, which is acting weird, sending wrong x/y values to the tweens. It is an animation of a mouse moving through a maze. The maze walls build on stage, then the mouse fades in, and on 'click' it will tween through the maze using a preset Timeline object. The last tween needs a dynamic x/y value because the mouse hole can move during the mouse animation. The solution to that was provided in these Greensock forums (calling another function to get the x/y and insert them into the Timeline object). Everything works. Except when I try to interrupt the animation while it's running, reset it and run it again. Then the mouse does funny things. At first it would sit before moving for as long as was left un-run from the previous Timeline object sequence. So I set it to the end using totalProgress(1) in my reset function before calling the init again. That seems to work. But when the mouse gets to the spot where it updates the x/y for the last tween, it goes haywire. The basic question is: How can I cleanly interrupt a Timeline sequence and then reset that Timeline so it can run again from the beginning. And is there a special solution required because of my special getXY function at the end of the Timeline? I've made a simplified version of the code here. I wanted to keep it robust enough to show the potential problems with complexity. I hope I didn't make it too long. var distanceX; var distanceY; var mousetween = new TimelineMax(); function initAnimation() { //set some other variables loadWalls(); } function loadWalls() { var mazetween = new TimelineMax({onComplete:loadMouse}); //this is simplified: mazetween.to("#wall1", .2, {opacity:1}); mazetween.to("#wall2", .3, {opacity:1}); mazetween.to("#wall3", .4, {opacity:1}); } function loadMouse() { //fade in mouse and set as button TweenMax.set($("#mouse"), {opacity:0, left:80, top:100, display:"block"}); TweenMax.to($("#mouse"), 2, {opacity:1}); $("#mouse").css('cursor', 'pointer'); //the callback startMouse begins the animation that causes trouble on replay $("#mouse").on('click', startMouse); } //this is a set of tweens, with the last tween being updated dynamically function startMouse() { var mouse = $("#mouse"); mousetween.to(mouse, 1, {left:410}); mousetween.to(mouse, .25, {rotation:90}); mousetween.to(mouse, .5, {top:320}); mousetween.to(mouse, .25, {rotation:0}); mousetween.to(mouse, .5, {left:480}); mousetween.to(mouse, .25, {rotation:90}); mousetween.to(mouse, .5, {top:376}); mousetween.to(mouse, .25, {rotation:180}); //... omitted more movements through the maze to simplify ... //I call getMouseHole because the x/y of the mousehole is dynamic mousetween.call(getMouseHole); mousetween.to(mouse, 1, {top: distanceY}, "label1"); mousetween.to(mouse, .25, {rotation:0}, "label2"); mousetween.to(mouse, .5, {left:distanceX}, "label3"); mousetween.to(mouse, 2, {alpha:0}, "label4"); } function getMouseHole() { //get Y value of mousehole //there are calculations here, based on windowSize and scalePercent of graphics distanceY=400; distanceX=600; //this creates new tweens with updated x/y and inserts them into the pre-existing Timeline sequence var mouse = $("#mouse"); mousetween.to(mouse, 1, {top: distanceY}, "label1"); mousetween.to(mouse, .25, {rotation:0}, "label2"); mousetween.to(mouse, .5, {left:distanceX}, "label3"); mousetween.to(mouse, 2, {alpha:0}, "label4"); } function resetAnimation() { //reset various properties: $("#wall1, #wall2, #wall3").css("opacity", 0); $("#mouse").css("opacity", 0); //Here I'm finishing the Timeline before trying to run it again: mousetween.totalProgress(1); TweenMax.set($("#mouse"), {rotation:0}); //this waits a moment, then calls init again to start over setTimeout(initAnimation, 1000); }

Thanks, this is all great! I'm glad you have such a responsive community here. I'm newly ported over from Flash design/development to HTML5, so I expect I'll have more questions to come.

Thanks, it worked perfectly! It is only the last two tweens that were an issue, so transferring them to the second function is no big deal. So, to understand -- even though the Timeline object executes the tweens in sequence, it has already loaded them all at once when first called? So that's why no value can be added or changed once the Timeline object begins to execute? I was thinking that it stepped through the lines of code and executed them as it came to them. That explains why it didn't work. The only thing I don't understand about your code is why the old tweens need to be deleted in the second function.