Jump to content


  • Posts

  • Joined

  • Last visited

Heffalump's Achievements



  1. Sorry. I realize this more of a jquery issue, but it's something that has been a stumbling block for me multiple times now in implementing some of the animation snippets I've come across. Basically, I just need to figure out how to append to the correct item via jquery so that the animation fits where it is supposed to. In the codepen example, the dots from the explosion should be within flexContainerChild and thus be hidden as they exit. Ultimately, I want the size of the dots to be responsive which means I need to be able to define them in percentage terms based upon the parent container (flexContainerChild in this case). Each dot is in a div called container which is not originally in the html, but generated via js. Line 13 of the js in codepen says: document.body.appendChild(container); I'm assuming that's where the problem is, and that I need it to append to id "flexContainerChild" instead, but after a dozen or so failed attempts, I guess I'm either misunderstanding they syntax or have some other incorrect assumption. Thx again. Getting this one item straight should help me fix several other related issues in implementing the animations.
  2. Yes, basically. It isn't actually doing 1 (basis) to 0.8 (defined in looping to statement). It is instead using whatever value it happened to be on when the tweens crossed eachother on the timeline. I remember seeing something about this kind of interpretation when they overlap. Just can't rememberr what it's called. I'll dig into your altered pen to see what's different as soon as I wrap up what's in front of me.
  3. I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?
  4. Yeah, that's pretty much what I came up with too... selecting which direciton via css selectors. Just wanted to make sure there wasn't some simpler method already built in that didn't require multiple (staggered) stagger commands and adding css classes. New to GSAP and wanting to learn to use it as efficiently as possible.... especially since I've got a few much more complicated concepts in mind that I'll need to work my way up to. Will apply above as soon as I get a chance. Thx.
  5. I can imagine some complex ways to do this, but wondering if there is a simple programatic approach to switch direction on each iteration of stagger command so first spins clockwise, second counter, third clockwise, etc... to simulate gears spinning. .staggerTo(item, 3, {rotation: "360", repeat:-1, repeatDelay:15, ease:Sine.easeInOut}, 1.15) does everything I want except for the switching of direction each time. Is there a simple way to do this without nesting functions?
  6. That makes more sense. I think it was a video elsewhere that gave me those instructions. Thx
  7. I have a timeline item that I just can't quite get dialed in. What I want is for it to bounce to and back, then wait for the repeatDelay, then do it again and wait, etc infinitely .staggerTo(item, 0.5, {scale: "0.9", repeat:-1, yoyo:true, repeatDelay:3}, 0.25); Isn't quite doing it, because it goes to, then waits duration of delay, then comes back... instead of going to AND coming back, then waiting before repeating the cycle. I guess what I need is something like a staggerToFrom command, but I'm not finding it. I'm sure this could be done with some sort of custom nested function, but it seems straightforward enough that I'm guessing there's a simpler solution I've missed. thx
  8. OK, well if that's the best solution, then that's what I'll do, but out of sheer ignorance: If the js isn't executed until after the page loads, then is it really necessary to have the library and function in the head? I just followed directions to put them there. Could that part be handled better for page loads, etc? AMAZINGLY simple to use, btw. Never would have guessed that animation would have been the SIMPLEST part of creating my site. I'll dig in a bit to see what kind of speed hit I'm taking for using the full libraries, but it definitely is quite impressive for minimal programming effort.
  9. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?