Jump to content


  • Posts

  • Joined

  • Last visited

mrkos67's Achievements


Newbie (1/14)



  1. In Flash/AS3, I remember being able to add a label at a specific time beyond the last animation, and it would extend the overall timeline's duration to that label. I thought this was working in JS, but after closer inspection, it wasn't. tl.set({},{},time) worked! For those wondering why this might be needed, here's my use case. I'm syncing up some animations to a video. The GSAP timeline needs to be as long as the video duration even though the animations might not last until then. When I seek/play/pause the video, the timeline is seeked/played/paused accordingly. I was running into issues when seeking to a part in the video that was beyond the timeline's duration (before this fix).
  2. HOLY **** I FOUND IT! It had to do with that group being hidden before the tween was called to animate it when navigating linearly through the demo (the PBP pump wasn't visible on the first screen of each section, but when navigating directly to that screen, I wasn't automatically hiding it). The transformOrigin was getting set to the SVG, not the group (since the group didn't have height/width). I changed my .hidden class to "opacity:0" instead of "display:none" and voila!
  3. that's the thing, though: i'm not doing anything different for each pump group. all the screens use the exact same SVG code for the different groups and sections within (minus a few groups for the differences between the different screens). I've added the same class to each of the groups in the SVG code so that I can call the TweenMax call, once, on that class (which targets all of them). there's no x/y on any of the groups in the code, so it's not like some are getting repositioned before the JS code is called on it. Even when I take the transformOrigin off the TweenMax code, the pump groups still behave inconsistently. If each pump group would act consistently on the same screen (PBP, Replacement, Effluent, etc), and each of the same pump groups between SVGs on the different screens (whether jumping directly, or progressing linearly through the demo) would be consistent, this wouldn't be such a head scratcher. As it stands now, though, it's inconsistent behavior in only one browser which makes me think it's a bug in the browser and not necessarily my code. Hmm.
  4. 1. I went super basic in Codepen to get something to show; I haven't really played with it much since I'm not sure how much budget I have with the client. 2. Nope, no "display:flex;" anywhere. I'll see what my client says about whether I have the time/budget to track this down. Just figured I'd post here and see if anybody has run into something like this before.
  5. Here's a weird one. http://dev.option5.net/CHRN/16/004/ Open this link in Firefox, and navigate linearly (clicking the arrows on the right) through this demo. the first screen after the intro is the "full flow" and the pumps spin as they should, specifically the PBP Pump (lower right). Click the right arrow a few times till you see the "Using PBP with SCUF" screen — the PBP pump doesn't spin around the set transformOrigin (it takes a bigger radius around which it's spinning). Now, refresh that link, and using the hamburger menu icon in the top right, jump directly to the "Using PBP with SCUF" screen. The PBP Pump *should* be spinning at the correct transformOrigin — at least it does for me when I've tested. This happens on several of the other screens as well — the PBP pump on most of the "PBP ..." screens and on one of the screens, another pump does it as well (with a bigger radius and a different origin). Again, when refreshing and jumping directly to each of these screens, they seem to spin correctly. The code for the pumps on each screen of my demo are all the exact same: some work in Firefox — the "Full Flow Path" seems to always show the spinning pumps, specifically the PBP pump, correctly whether navigating linearly or jumping to that screen from the menu. Not sure why this works, and others don't. I've attached a codepen of the basic SVG and JS code, but it seems to always work there. I'm clueless. Is this a bug in Firefox? (Chrome and Safari on Mac function perfectly)
  6. FYI, I've figured out how to do this SVG line animation. It doesn't require GSAP. but for anybody who wants to know, it's something like this: http://codepen.io/anon/pen/RGOLLV#anon-login
  7. I've been tasked with converting a Flash demo to HTML5. I've screen-capped the old animation here. In Flash, I can make a MovieClip follow a path, drawn using the IDE. Not quite as easy in HTML5. Would I use bezier paths for that? for each sprite on there? Is there a way to make a sprite follow an SVG path?
  8. Okay, I figured it out. My timeline didn't actually have a duration. I thought by setting a label at a specific time in the timeline, it would give that timeline a duration. So I had to put in an empty function to actually give it a duration. All is good. Thanks for your help!
  9. So I just found that after I posted, but it doesn't work as intended. I add an "onUpdate", but it only fires when the timeline's play function is called.
  10. I've created an instance of a TimelineMax, and now I want to add an onUpdate callback after it's been created. The only thing I can find to set up event callbacks show it is during the instantiation. Is there a way to do this?
  11. It actually does, if Page A's iframe has the appropriate sandbox values (http://www.w3schools.com/tags/att_iframe_sandbox.asp), or in my case, I've left off the sandbox attribute, allowing Page B to do anything it wants inside of Page A. I've figured out that if page B has included the GSAP libs, parent.TweenMax works on its own, cuz parent is equal to the current window. When Page A has Page B inclded in an iframe, Page B's calls to parent.TweenMax correctly calls Page A's instances of the GSAP libs, so object types are retained between the pages. The only problem is if Page A doesn't include the GSAP's libs, which I've got a check for that. It's not elegant, but it works. So all is good, at least as how I need things to be.
  12. I couldn't figure out how to do a codepen hosted iframe for a test case (i was getting security errors when doing page A on codepen loading page B from my server), but here are my test files that i was using: http://dev.option5.net/CNCT/CNCT15001/testing.html http://dev.option5.net/CNCT/CNCT15001/testiframe.html
  13. I figured out some more... (for reference, page A contains the iframe which loads in page B. ) It's an issue with page B loading up a new instance of the GS libraries, and those aren't the same as page A's GS libraries. When page B creates a timeline based on parent.TimelineMax (page A's), it works as it should. I'm assuming each import of the GS libraries are sandboxed in some way? Is there a way to reconcile multiple instances of GS library imports?