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