haxen2000

It's actually happening in Chrome for me. It's weird that it will animate to 0 but not from 0. However, that trick worked (at least for Chrome). Thanks a bunch!

Might be doing something wrong here, but I'm curious if anyone else has had this issue. I am trying to animate the border of an input area from 0 to a width back to 0. Going from a width to 0 works fine, but going from 0 to the width immediately jumps to the width while everything else animates. I've made an exaggerated example here: http://jsfiddle.net/Haxen2000/Df8xj/ The original margin is what the border width should be; just made it larger so the issue is more visible. Thanks!

Thanks @jonathan. That is what I ended up doing (my 'isBrowserIE8' function is similar to your check): if (isBrowserIE8()) { tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-17px', 'backgroundPositionY':'-4px' } }, .1); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-27px', 'backgroundPositionY':'-4px' } }, .2); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-40px', 'backgroundPositionY':'-5px' } }, .3); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-54px', 'backgroundPositionY':'-5px' } }, .4); } else { tl.to(flame, 0, { css:{ 'backgroundPosition':'-5px -7px' } }, 0); tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); tl.to(flame, 0, { css:{ 'backgroundPosition':'-27px -4px' } }, .2); tl.to(flame, 0, { css:{ 'backgroundPosition':'-40px -5px' } }, .3); tl.to(flame, 0, { css:{ 'backgroundPosition':'-54px -5px' } }, .4); } I figured it was IE and not GS but wanted to double check!

Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code: var flame = document.createElement('div'); . . . flame.style.overflow = 'hidden'; flame.style.backgroundImage = 'url("my_files/images/flame.png")'; var tl = new TimelineMax( { repeat:-1 } ); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8 tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8 The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference TweenMax.min.js, line 15 character 22204 Please let me know if I'm coding this wrong. Thanks!

Thanks for the suggestion! This helped out a lot and helped minimize my code. I'm using the tweenTo function, but I'm having an issue. My circle is set up fairly simply (I attached a new image to show the times). When the animation gets to the end, I can't get it to restart, and I'm not sure how to determine how much further to go. So, for example, if the circle at .75 needs to rotate to .125 in a clockwise rotation, it will go to it's completion at 1 second, and then stop. I've tried resume, restart, and some combination of seek/play in its onComplete function, but it won't restart for the beginning at 0 seconds. I've also tried setting repeat to -1 in the initialization of the timeline. I noticed in the API it says: I'm wondering if that has anything to do with it, and if labels would be of more use than I realize. Either way, here's my updated code: window.onload = function() { timeline.pause(); for (var i = 1; i < 9; i++) { var cir = document.getElementById('circle' + i); cir.addEventListener('click', circleClick); circleArr.push(cir); var tempTimeline = new TimelineMax({ //repeat:-1, onComplete:resetTimeline, onCompleteParams:["{self}"] }); tempTimeline.to( circleArr[i-1], .5, { zIndex:0, bezier:{ curviness:2, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] }, ease:Linear.easeInOut } ) .to( circleArr[i-1], .5, { zIndex:8, bezier:{ curviness:2, values:[ {left:100, top:50}, {left:125, top:75}, {left:100, top:100} ] }, ease:Linear.easeInOut } ); timeline.add(tempTimeline, 0); } moveCircles(0); //timeline.play(); setTimeout( function() { moveCircles(-3); }, 1500); } function moveCircles(offset) { var tempArr = timeline.getChildren(); for (i = 0; i < 8; i++) tempArr[i*3].tweenTo(1.125 - .125 * (offset + i + 1)); } function resetTimeline(tl) { //tl.pause(0); tl.seek(0); //tl.play(.1); //tl.restart(); //tl.play(); //tl.resume(); }

Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip