Gabriel

Yeah, it was fixed as soon as I took out the timing offsets. Added that when I was playing with the effect, but didn't realize it would mess things up after repeating. Thanks for the help

Thanks for the responses, I'll check this all out tomorrow. I had a thought of how the documentation could be improved BIG TIME. Diagrams! Simple line diagrams showing timeline interactions for various options. Everyone's brain is wired differently, mine is visually, so translating all this from words into mental pictures is challenging when we get into complex subjects. You guys wrote the engine, so you visualize it very easily and intuitively, but I'm trying to see what you see. I just thought that with all the time you guys spend in the forums, you might actually save yourselves a lot of time by improving the documentation in this way. Just a thought, don't worry about responding though, I'm just throwing it out there

This code works fine on the first loop, and not on the second: var tl = new TimelineMax({repeat:-1}) tl.fromTo(tx4,1,{skewX:-40, x:b.width},{skewX:0, x:0, ease:Linear.easeNone},'-=0.5') .to(tx4,0.5,{transformOrigin:'center bottom', skewX:70, scaleY:1.5, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:-45, scaleY:1.25, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:0, scaleY:1, ease:Back.easeOut},'-=0.1') How can I fix this? <rant> No matter how many times I run into this problem, it never seems to sink in. Looping timelines are so unintuitive in gsap that I could pull my hair out. It's soooo easy to do whatever you want with a timeline, but the moment you try to repeat it, it becomes soooo frustrating. It shouldn't even be called "repeat", because that would lead you to believe it's going to do the same thing it did the first loop. And I already know I'm going to get several responses explaining why this is so great and expected, smh</rant>

Newest version. I mean, I could package up my whole scripts, but who would want to go through 70k of uncommented code? Lol It's rather inexplicable to me, since I created the codepen identically. I'm not sure what I would add to reproduce the problem. The graphics? The rest of the tweens in the animation sequence? That would mean rewriting it with hard values, or adding all the overhead code to create the objects. If I get bored, i'll b back it all up and start stripping code out until I find what makes the problem go away, which might be the only way to find this one. Until then, I got everything working smooth, so I'm happy. Thanks guys

That's fair enough. I wanted to point it out because "logically" a shorthand property should overwrite previous conflicting properties by order, like jQuery does. I'm not a fan of bigger file sizes either, so if you think this would be a big hit to file size, then maybe it's better left alone. Although, in my mind, I do see this as a practical scenario for script authors. It's common practice for many scenarios to have a default configuration object, while allowing users to pass an object with overrides. Combining the objects can cause these conflicts, which an author may not catch until he starts getting bug reports. One could pass the default configuration to the dom first and then the user object, but that could cause flashing. So that leaves extra parsing to be done. This doesn't affect me, since I already have jQuery loaded, and can use that. For others, the CSSPlugin has much of jQuery's goodness baked in, and might experience this more often using it exclusively as a CSS setter (to benefit from vendor prefixing). So, that's my take. If file size will suffer, then I'd say leave it

Since I couldn't reproduce it, i'm just throwing it out there, hoping that someone with an understanding of the gsap code might find a bug and improve the product

Yeah, the overwrite seems to be causing the problem. You seem to have a good grasp on that, thanks for looking. The labels are necessary due to nested timelines and positioning, and adding that little bit extra delay solved my problem and my animation looks great. But I didn't really post this to find a solution for myself, as my patch works well enough. Using a label guarantees my tweens are starting from the same timeline insertion point. Look at my original code above, not the codepen, and you can easily see there's no overlap, but yet this code in my script is causing the overlap. Seeing the label creation shows you that there isn't another part of the code affecting the timing, so it shouldn't have that problem. I made this post because it suggests a bug in the gsap code, likely a rounding error since it's not always happening

This is a really odd error, so please read closely. First of all, here's the code in question: var tl = new TimelineMax({repeat:-1}), mAnim = TweenMax.to(moon,4,{paused:true, ease:Linear.easeNone, bezier:{values:[{left:moon.l(0), top:0}, {left:moon.l(-60.8), top:moon.t(-34)}, {left:moon.l(-100), top:moon.t(0)}]}}) tl.addLabel('sun','+=1') .add(TweenMax.to(mAnim,2.2,{time:2.2, ease:Linear.easeNone}),'sun+=2.2') .add(TweenMax.to(mAnim,7,{time:3, ease:Linear.easeNone}),'sun+=4.4') This runs perfectly OK the first time through. The second time through, the "moon" starts 2.2 seconds into the animation and stays there until "sun+=4.4" kicks in, then animates. What I'm saying is that on the second timeline loop, the first ".add" is not animated, but the second one is. OK, so I've duplicated this with the following codepen. I can't duplicate the original, because that would be a **** load of code from two scripts to allow for that. All that code works flawless, and relies on screen size to calculate the 'top' and 'left' properties. So the coordinate value code is really all that's absent from this codepen. http://codepen.io/anon/pen/LubFt The odd thing about this codepen, even though it uses the same time values as the original, it works perfectly. Although if you swap the commented ".add" function with the preceding one, then this codepen replicates the problem I'm having. Since the same time values work for one and not for the other, and that the problem seems to be from overlapping animations added to the timeline, I can only assume that there's some kind of rounding error that's occurring with my longer bezier curve in my script. UPDATE: I updated the codepen with the same coordinate values logged from my script, but nothing has changed. I really don't get it. Value for value, the codepen is identical to my outputted code, I've triple checked, but it doesn't have the problem unless you swap the commented line in. Mine is animating a PNG instead of the DIV, both rendered at the same size, but I don't see why that would change anything. For now I'm changing the 4.4 delay to 4.401 in my script, which fixes the problem. Must be a rounding error....

Thought I'd add that if you're adding dots to a circle or arc, you could use the same transformOrigin on all the dots, and then place them using rotation. You can apply inverse rotation on any dot contents, like text, to keep it level. Very simple, but often we over complicate things that may appear more complex at first glance.

rhernando, You didn't understand the problem I'm pointing out This would be expected behavior, because the "background" shorthand property sets ALL of the explicit background properties at once (background-image, background-color, etc.). So if the browser had set any of those computed styles on a previous call, they would get overwritten by the shorthand property, while removing any undefined styles. Pretty much just like you pointed out already. Thus: TweenMax.set(element, {backgroundImage:'url("imgUrl.com")', background:'#000'}); This should remove the backgroundImage property since it wasn't defined in the successive shorthand declaration. Instead, it's combining both styles into one, which shouldn't happen. I'm telling you, it's not behaving as it should. jQuery does this correctly, GSAP does not.

On a side note: New versions of jQuery set any needed vendor prefixes for the CSS properties you set. Greensock asserts that GSAP does this exceedingly well. So I was wondering if there are any benefits to using GSAP for this over jQuery, assuming both are already present, and we're only concerned with making simple CSS changes? Or do both do this pretty equally well?

TweenMax.set(obj,{backgroundImage:'url(path/to/img)', background:'black'}) This should result in the background being black with no image set. You're setting the background shorthand property second, which should overwrite any other background properties. jQuery does this correctly according to order. GSAP is merging them, setting a background image with a background color. Yes, this should be considered a common use case. Taking one object with script defaults and merging them with another object containing user settings can result in this type of scenario. I haven't done any testing, so I'm not sure what other CSS properties this behavior may be affecting.

Just when I think I got the timeline figured out, I run into more strange stuff. I'll try to keep this simple: tl.set(o,{visibility:'hidden'},0) .set(o,{visibility:'visible', immediateRender:false},offset) .from(o,time,fx,offset) This animates two objects from a function, with "fx" being an object with the properties to tween. tl.play(0) No problem here. Makes the objects visible at the proper time, and moves object "A" into place by animating "x", and adjusts the opacity of object "B" from 0 to 1. tl.reverse(0) Again, no problem. Reverses the animation, with them ending by setting visibility to "hidden". tl.play(0) This time, object "A" remains hidden (visibility:hidden), but object "B" is visible and animates the opacity properly. Object "B" is acting normally, but object "A" has disappeared, what's going on?

Not really Jack. I didn't know "time" was a tweenable property that tweens have. I don't see "duration" either. There's no indexed list that shows those properties, which just makes me wonder what else I might be missing. jamiejefferson Thanks for that Codepen, it worked like a charm. It actually took me awhile to realize the importance of creating it paused, and couldn't figure out why it wasn't working, but I figured it out and it makes sense now. Thanks

Combining them is technically faster, but you lose any possibility of the files being cached already. I recommend using the CDN, which may deliver them faster than your web host, which would make it your fastest option of all. Although, it's only like 30kb gzip'd, which is nothing. Even at 90kb, loads fast even on my phone. If your website is slow, then I don't think gsap is your biggest problem. But I always prefer CDN first, and serve local copies only if the CDN fails. jQuery is a perfect test case, because more often than not they already have it cached off a CDN, which is an instant 100k savings. The more websites that adopt this strategy, the more we all benefit

I'm a fan of indexes. I usually don't remember something until i've used it, so reading a long page that covers it all doesn't really do it for me. You'd be surprised the number of word searches i've run on your site, lol... By the way, any such plans to be able to halt a tween during a timeline without killing the tween (repeats each loop) like this post talks about?

No, I meant like "time" and "duration". Those are more GSAP specific, and I'm wondering if I'm missing anything else useful that pertains specifically to tweens and timelines. The first place I look for answers is the documentation, and there's no specific section with properties listed. I could have probably figured this problem out myself, but I wasn't looking in the right place to find it. A complete list, minus CSS properties, would be handy, as an index that links to the appropriate section or plugin. The CSS ones are pretty well documented and/or self evident I think. Not a big gripe though, I feel i've probably figured most of them out by now

Thanks. On phone now, will look later. You know, am I missing a tweenable properties reference somewhere? I don't see it in the tweenmax or timeline documentation, and thus far I've had to figure them out from example pages. Any complete list of non-CSS properties anywhere?

Thanks, I didn't know I could tween the time itself, that be what I need. I'll play with that when I get back to work

What I'm doing: I have a div with a scrolling background. Then, I have text scrolling to look like it's affixed to this textured background. Easy enough, just calculate the ratio of background width/time against text transition distance/time(X). But, after the background has scrolled a certain distance, I've applied a label. At this label, the background stops scrolling and the container starts scrolling at the same speed, to make it look as if the background has reached it's end and is continuing to scroll off screen. This is all well and good, but gets complicated here. As the container begins to scroll, some scrolling text is roughly half way through it's transition, which then jumps in speed as it's container moves, no longer appearing affixed to the background image. The text should stop scrolling at the label to fix this This isn't any more relevant to the problem than as I've already described it, and doesn't add anything to the discussion, but I know the developers love examples to visualize the need for an action, so there you have it. I can imagine how much more complicated this problem would become doing something similar with text following a bezier curve or something. The math would become mind numbing, compared to simply stopping the tween at a label on the timeline

Well that becomes complicated. Not using progress itself, thanks for that, but the implementation. Doing it that way requires you to know the time (which rules out labels), and computing a matching progress value. My initial tween duration is complicated enough, relying on a computed value, and now I have to match progress to a label to perfectly synch with other animations. So if there's a way to stop it at a label, that's the needed behavior I need for this particular instance. If not, then this seems like missing core functionality. I can think of many uses for this, and killing a tween outside a timeline is already easy and supported

Thanks, but I'm having a problem with it on a repeating timeline. This seems like odd behavior to me, but maybe it's normal. How would I fix it? http://codepen.io/seraphzz/pen/rsgnH

Ahhh, progress, that's clever, thanks

I figured out a way: var t = $('#target') var tl = new TimelineMax() tl.to(t,10,{left:1000, ease:Linear.easeNone}) tl.set(t,{left:'+=0'},'-=5') I'm assuming this would work on other animations, like a bezier curve or something (setting an empty bezier object)? Or maybe not. I don't know...

I don't have either browser. This is a problem that can affect any page with animations running, with those specific browsers? Depending on your type of website, it may take years to realize you suffer this problem if nobody bothers to tell you...