mrkos67

got a very basic version of a cross-fading, panning, scaling slideshow working! here's the pen: https://codepen.io/mrkos67/pen/NWbRPWq

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.

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?

targets, ideally.

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?

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).

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!

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.

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.

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)

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

I don't have the FLA.

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?

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!

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.