Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About mrkos67

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