Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About Iamattamai

  • Rank
  1. Hey Jack. Thank you SO much for your help. Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes. Since I have to handle and modify the matrices between applications anyway it works well for my needs and there is no conversion delay. Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path. It was a brilliant piece of code. I didn't troubleshoot any further to root out my issue with it. And Saturday support is WAY unexpected - you guys rock.
  2. That's some amazing magic, but I can't tell if it will work. Its throwing an error at the vars[p] = t[p] line thusly: Uncaught TypeError: Cannot read property 'x' of undefined The element I substituted for both 'element' variables in your usage example is valid - same one I was using before with incorrect rotation. I'm studying what you did to troubleshoot with some difficulty, seems you are executing the matrix transform, grabbing the values, adding the rotation direction, killing the transform, and returning the values. I'm not understanding it well enough to pinpoint the problem though. The logic looks sound though, and I really appreciate your assistance. And yes, I do specialize in the unusual. I'm animating a 20-piece SVG figure using Inkscape to position all the body parts into various poses and then tweening between those. Inkscape SVG outputs matrices and the matrix tweening works fine until there is clockwise rotation defined between matrix pairs. GSAP evidently defaults to counter-clockwise. It looks like your fix would solve that if I can get past the error.
  3. I saw that documentation. I'm struggling with the syntax for matrices. I tried this: .to("#mything", gdur, {transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)_cw"},0) It didn't like that at all. When the documentation says "Included in TweenMax: Yes" does that mean it is included in the TweenMax code or it is included as a plugin with the purchase? Well no matter, I found the plugin and installed it - made no difference. It doesn't work as a suffix for a matrix it appears. also tried: .to("#mything", gdur, {directionalRotation:{transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)"+"_short"}},0) and... .to("#mything", gdur, {directionalRotation:{transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)_short"}},0) I'm hoping there is a way to do this... Thanks in advance.
  4. I see the documentation for rotation direction, but it doesn't seem to apply to matrix transforms or at least I can't find the syntax I should use. I'm using Inkscape to position some SVG elements and tweening the matrices it outputs. Seems GSAP wants to default to counter clockwise for any rotations which is sometimes the 'long way around' - I would like to either control direction or change to shortest distance globally.
  5. Here's what I've learned in the past hour as regards my own experience... I moved from stagger to straight JS as stated - flicker completely gone in Chrome and Edge on dev computer. Moved to less powerful, smaller RAM work computer, all good. Now I go do some miscellaneous work on work computer. Return to app and run it again and flicker - here's my guess: - I am loading a large cache of images into RAM - That is all fine and good while the app remains the active page - Start doing some other work and the OS takes cache back - perhaps pushes some of that to disk. - Return to app and some images need to reload causing momentary flicker in doing so I will try reloading just prior to triggering a replay and see if that fixes it.
  6. Yep. Odd it may seem, but I won't bore you with a long story. Flicker was occurring in IE, Edge, Chrome, and Safari - more pronounced as the files got bigger (more images). I am developing on an i10 with 64 gig RAM - less pronounced on it, more so on an iPhone for instance. In the end I just decided to go with setTimeouts and plain old JS - no more flicker. My own suspicion is that it had to do with the processor skipping a beat to tend to something else now and then - I can't prove it and there was no discernable pattern. Anyway, this works fine all things considered for this particular application. Thank you for all your help and follow-up.
  7. Thank you OSUBlake for your patience. You are helping me understand as well as make the fix. Also much appreciate the links. The 'design requirement' I mentioned is that the final solution be a single, self-contained, email-able file capable of offline function. I'm not aware of another way to do it without base64, but I'm all ears. I've tried the image loader link Zach suggested above and it verifies that the images are loaded but it doesn't fix the flicker. I will attempt to build and test the large spritesheet these images will make soon, not sure what kind of size limitations might arise. Worst case, the flicker isn't a show-stopper, just disappointing.
  8. I have an onload event set for the body - doesn't that guarantee that the images are loaded? Also, the blinks are happening in the middle of repeating sequences, not where there are transitions to new sequences. My own suspicion is that it is a processor issue, but just guessing. I was hoping there might be a way to 'overlap' the reveal/hide just very slightly to reduce any momentary delay as one suggestion. I just couldn't get anything like that to work. Also, there is a design requirement for a single file mandating base64. A spritesheet is just about loading mostly, right? Is there any reduced processing overhead?
  9. Okay, I tried to create a CodePen for this but it was too big and I didn't know how I could reduce the size and still replicate the problem. I am including an AWS link instead - hope that is allowed: https://s3.us-east-2.amazonaws.com/image-store-21/hackathon/A06-2.html Here is what I am doing: I am loading a sequence of png images in base64 and hiding visibility for all before executing the JS. I am using staggerto to flip each image in the sequence from hidden to visible then back. For the most part it all works... My problem is this: randomly during playback you will see a very momentary and annoying 'blink' during the staggerto repeating sequences where it seems the image momentarily fails to display on time. It is more pronounced with larger examples of this containing greater number of images and sequences - you may need to run it several times to see it. I have tried tweaking the timings without success. I have also tried toggling opacity and autoAlpha instead of visibility without any noticeable effect. Hoping someone can help me understand how to smooth it out. Thanks in advance.
  10. I meant to come back to thank you again Craig. Your comment regarding the ImmediateRender:false being unnecessary turned out to be the key. I removed it and all worked as it should. I had already researched the link you provided but there are several reasons a sprite sheet wouldn't work well for this project that I won't bore you with. Thank you again - you saved me hours of time.
  11. I've gone to that link "How to Create a CodePen Demo" and I can't see where it's telling me how to do anything but see how the utilities and plugins work. Is there supposed to be a template or instructions or am I starting from scratch? I am cycling through 20+ images so I need to put those on AWS I suppose? If it helps... What I'm doing is a sort of controllable animated GIF using pngs as frames - I'm staggering to show then hide frame by frame. First the character raises his arm, then moves lips in place repeated, then first sequence is reversed to lower arm. If there's a better way to do it, I'm open to suggestions. I had thought of a visibility=on stagger with an onComplete to then hide each frame but found someone else doing it this way which mostly works.
  12. If I can trouble you one more time and I think I'm on the home stretch... I have created 3 functions and a master timeline below. The second function in the attached code is nearly identical to the other two. I have added them into the master timeline but for some reason the second function wants to start running right away instead of in sequence after the first. The third acts properly as expected in sequence. I know I can add a delay, but that seems like a workaround to me and one more thing I need to update as values change. images = document.getElementsByClassName("gest06") stand01 = document.getElementsByClassName("gest06stand"); durtalk = .08 dur = .03 function armUp(){ var tl01 = new TimelineMax({}); tl01.staggerTo(images,0,{visibility:'visible'},dur) .staggerTo(images,0,{visibility:'hidden',immediateRender:false},dur,dur); return tl01; } function stand(){ var tl015 = new TimelineMax({repeat:20,yoyo:true}); tl015.staggerTo(stand01,0,{visibility:'visible'},durtalk) tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},durtalk,durtalk); return tl015; } function armDown(del){ var tl02 = new TimelineMax({}); tl02.staggerTo(images,0,{delay:del,visibility:'visible'},-dur) .staggerTo(images,0,{delay:del,visibility:'hidden',immediateRender:false},-dur,dur) return tl02; } master = new TimelineMax(); master .add(armUp()) .add(stand()) .add(armDown(),"-=.05")
  13. Thank you Craig! The GSAP Overview helped me understand that TimelineMax is included with TweenMax - apparently it won't alone? Anyway, I loaded in the TWEENMAX min and it worked great. Back to the salt mines.
  14. Okay, feeling a little silly about that, but still not in the clear. I loaded TimelineMax.min.js between two script tags in my header (where I had TimelineLite) and I'm getting: Uncaught ReferenceError: TimelineMax is not defined Perplexed, this should be simple. I tried the uncompressed as well, same thing. This is the line it doesn't like: master = new TimelineMax(); Laughing at myself at this point.
  15. Iamattamai

    Yoyo not working

    I'm somewhat new to GSAP but have been studying intensely - and don't come here without first researching, but... I can't seem to get yoyo/repeat to work on the below, seemingly simple function - it only plays through once forward. I didn't make a Codepen because I think it's either my poor understanding of the syntax or function. I'm simply trying to cycle a short array of .pngs in yoyo fashion multiple times. Only CSS is to make all image visibility = hidden initially. dur = .5; stand01 = document.getElementsByClassName("gest06stand"); function stand(){ var tl015 = new TimelineLite({repeat:25,yoyo:true}); tl015.staggerTo(stand01,0,{visibility:'visible'},dur) tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},dur,dur); return tl015; } master = new TimelineLite(); master .add(stand()) Thanks in advance for your help.