SVG timing issues

[axolotl7]

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.

 

[ZachSaucier]

Hello axolotl7 and welcome to the forums! Thanks for being a part of Club GreenSock!

 

5 hours ago, axolotl7 said:

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.

Depending on your SVG this could be very intensive. The more gradients, clip paths, filters, etc. that each layer has the more intensive that it will be. For simple SVG shapes with simple fills and such this shouldn't be much of an issue. 

 

5 hours ago, axolotl7 said:

I'd love to get tips on how to get the TimelineLites to complete, i.e. fade to 0 before disappearing.

What do you mean "before disappearing"? Do you mean before they are off screen? If so, you just have to make sure the math and timing is logically correct.

 

5 hours ago, axolotl7 said:

bug from the logo

5 hours ago, axolotl7 said:

many if not most of the bugs disappear before their timeline is finished.

What do you mean by this? You mean that the logos are bugs, correct? i.e. there isn't a bug in GSAP that's causing them to disappear?

 

Overall it would really help if you did provide a CodePen demo. You don't have to use the same SVG you're using for your client, you can replace it with something that's similar. 

[axolotl7]

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.

[axolotl7]

ok, here's my codepen... hope somebody finds it useful.  expand the window to give it room!

   

See the Pen MWgRydJ by axolotl7 (@axolotl7) on CodePen

 

[OSUblake]

Hi @axolotl7

 

Your logic is a little wrong because you're using random durations for each layer animation, so your bnum counter should naturally get out sync.

 

Check out the bnum values I'm logging out to the console. They way you had it, it would log out repeating values like 0,1,2,3,4,0,1,2,3,4,0,1,2,3,4, which would cause it to select a layer that might already be animating.

 

See the Pen 73ab3d63a7be840a9afe896e1a6905b0 by osublake (@osublake) on CodePen

 

 

 

 

[axolotl7]

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.

[OSUblake]

7 minutes ago, axolotl7 said:

I suspect the disappearing issue is something different.

 

The disappearing issue is just what I described. Your animations are being overwritten because you bnum logic is wrong. Check the console in your version, it will show you what is being overwritten.

 

See the Pen 0c9f3fc1efd28abfb6f18df0809dd5c5 by osublake (@osublake) on CodePen

 

 

I fixed that problem. You should see nothing being overwritten in this version.

 

See the Pen 73ab3d63a7be840a9afe896e1a6905b0 by osublake (@osublake) on CodePen

 

 

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