Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Gabriel last won the day on July 14 2013

Gabriel had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Gabriel

  1. 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
  2. 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 o
  3. 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 h
  4. 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,
  5. 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 h
  6. 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
  7. 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. See
  8. 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 seco
  9. 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.
  10. 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 s
  11. 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?
  12. 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,
  13. Gabriel

    Timeline woes

    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 v
  14. 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
  15. 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
  16. 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?
  17. 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 th
  18. 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?
  19. 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
  20. 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 begi
  21. 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
  22. 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
  23. Ahhh, progress, that's clever, thanks
  24. 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...
  25. 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...