axolotl7

Wow... thank you! you're absolutely right. I'm glad I reached out... this has taught me something. Thanks again! that's an interesting bit of code with the onCompleteParams... I'll need to spend a bit of time with that. But much appreciated.

thank you, but what you report in your console is correct and expected. I have no master timeline and there's no reason or expectation for timelines to be in sync. When a timeline completes, it spawns a new one. The only layer killed (replaced) is the one that has just finished, triggering the onComplete new layer. I'll think about this some more, but I suspect the disappearing issue is something different. trust me to go straight to a hard problem on my 1st attempt.

ok, here's my codepen... hope somebody finds it useful. expand the window to give it room! https://codepen.io/axolotl7/pen/MWgRydJ

Thanks for the reply! I will post a codepen, it's clear it'll be necessary. but just to clear up a couple of things... sorry, it occurred to me that using the word "bug" was silly as it has other meanings... I'm only using the word "bug" in its design sense, i.e. the graphical non-text bit of the client logo. It's not shaped like a bug... it's a simple angular design, just polylines, in fact it's just horizontal, vertical, and 45 degree angle lines, which is why the abstract overlapping patterns work well. no gradients, clip paths, or filters other than opacity. Also, I'm confident my geometry math is correct... it's pretty simple... pick a semi-random duration time value, e.g. dur = random between 2 and 3 seconds, move for dur * 3, fade in from 0 to dur, fade back out from dur * 2 to dur * 3. No easing, just linear. By disappear I mean some of them vanish suddenly before fading out... some look perfect. geometrically they're on screen... they're moving slowly. It's quite dreamy. With just one layer, it works. Adding as few as three layers starts to produce the disappearing behavior. I'm on Mac... in Safari and Chrome, it uses like 30% CPU... in Firefox, just 15%. Works smoothly on mobile, iPad and iPhone... just this disappearing issue. seems to be little difference in CPU impact between 3 layers and 9. Yeah, I know it's hard to describe this, would be easier to show... I will put together a codepen.

I'm an experienced developer but new to GSAP, delighted to be here, looks amazing. Can I ask an SVG timing question before posting a codepen? I've read everything in the forum on SVG, in particular the Gotchas post, thanks for that, it was illuminating. I'm putting together my first GSAP SVG animation, ambient background thing based on a client logo, private project at the moment so I'd rather not do the codepen thing unless I have to... I'll adapt if there's no other way. Really simple design... bug from the logo, simple polyline shape, blown up to 1/3 to 2/3 screen size, low opacity, e.g. 0.1, slowly fades in from nothing, floats up the screen, fades back to nothing. many of these spawn, at different scales and speeds, each whole life takes 7 to 12 seconds, and the whole screen is full of ephemeral floaty transparent bugs, overlapping and creating cool effects. max 9 layers (I might increase that if I can solve this issue). basically working perfectly on 1st attempt, except for one issue... many if not most of the bugs disappear before their timeline is finished. still looks cool, but I'd like to isolate why this is happening. It behaves exactly the same in all browsers on all platforms I've tested (which is a credit to GSAP!). So the way I have it working is no master timeline... for each new layer a new TimelineLite, then motion and fadein-fadeout tweens added to that timeline. A function creates new layers, each on a new timeline, onComplete: new layer. (hope garbage collection clears out the dead ones, seems to be working.) I guess my question is... am I running into gotchas trying to animate 9 layers of full-screen scaled SVGs of varying opacities? It burns a bit of CPU on Safari and Chrome, but Firefox handles it easily full-screen. I'd love to get tips on how to get the TimelineLites to complete, i.e. fade to 0 before disappearing. All thoughts much appreciated.