Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by mrkos67

  1. got a very basic version of a cross-fading, panning, scaling slideshow working! here's the pen: https://codepen.io/mrkos67/pen/NWbRPWq
  2. roger that. I had ideas similar to your points #1 and #2 about self-managing the active tweens/objects, but didn't know if there was a built in utility function already (that wasn't too inefficient). Thanks for the help all, this'll get me started, and if i get something working, i'll post a quick pen.
  3. Here's my situation: I'm producing an animated slideshow of images crossfading with each other, drawing onto a canvas. Since animating on a canvas necessitates a timer function or using the tick function, how do I know which images need to be animated at any given timer tick?
  4. Say I have a couple of overlapping, yet offset, tweens within a timeline. As the timeline progresses, is there a way to get which objects are animating at any given time, like in the tick function?
  5. 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 in
  6. 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!
  7. 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
  8. 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.
  9. 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 P
  10. 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
  11. 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?
  12. 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!
  13. 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.
  14. 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?
  15. 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 inc
  16. 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
  17. 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?
  18. it is indeed related to using the timeline across the iframe. i created a quick sample where a simple timeline is created for each banner item on the same page, and it works. but the timelines created on the other pages getting loaded into the iframe don't work, throwing the error above. hmm. anybody know a way around this?
  19. the try/catch block was throwing an error on the line: _timeline.add( banner.timeline.play(), t ); the error is: "Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string." So it seems the return value of banner.timeline isn't coming back as a readable TimelineMax instance (which might be because of the iframe?). How do I make sure it's a valid timeline instance? Or is there a way to clone based on a timeline/object?
  20. I've created a modular media player, where add-ons and modules are created and instantiated at run-time. One of these modules is a BannerBar which creates and loads animated banners into their own separate iframes. Each banner has a public access to a timeline variable, which is paused by default. Everything is good here, banners get loaded, are displayed at the correct times (by controlling the display [block/none] of the iframe itself). Now, in the BannerBar file, I'm adding the timelines of each banner onto the BannerBar's timeline; however, the banners' timelines don't follow the playbac
  21. mrkos67

    drawSVG woes

    Thanks, Carl. I was dumbfounded by what svgomg actually did. I went through line by line with my code, copy and pasting over the svgomg code, and it seems the only difference was a double space between points. That was all it was — like I said, I knew it was going to be something stupid. too weird. But thanks for figuring that out! and like PointC, now I know about svgomg. That will be a very useful tool in the future.
  22. mrkos67

    drawSVG woes

    Brand new to this plugin (it looks fantastic!), but i'm having a problem. What's wrong here? I know it's going to be something stupid.