Jump to content
GreenSock

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!

Gabriel

Members
  • Content Count

    54
  • Joined

  • Last visited

  • Days Won

    1

Gabriel last won the day on July 14 2013

Gabriel had the most liked content!

Community Reputation

4 Newbie

About Gabriel

  • Rank
    Advanced Member
  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
×