Jump to content
Search Community

Gettin' Hot in Here?

Creek test
Moderator Tag

Recommended Posts

Whatever I've done horribly wrong is causing Safari to scream that the page needs to be closed, and my MacBook is getting insanely hot.

 

This webpage is using significant energy. Closing it may improve the responsiveness of your Mac.

 

Also, the reason there's a master timeline and this movement is a function - this is just the bit to attempt to make the fish look like he's chilling in the water.

 

Just trying my best to isolate and present what I believe the problem to be? Once I add this bit in, the fans kick on high. I tried commenting out various lines - for instance, I thought possibly the morph was the culprit? But possibly it just doesn't care for how I set up the endless repeats? Or all of the randoms? I obviously have no idea?

 

Also, I'm still modifying the movement - hoping there's just one bit that's just not allowed or uses too much power? Possibly I could remove the power-hungry bit and substitute something else?

 

Oh, and this is the error that Firefox is complaining about repeatedly in the javascript console:

 

Expected ‘none’, URL, or filter function but found ‘Alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped. jquery-ui.css:51:9
Elements matching selector: .ui-helper-zfix
NodeList []

 

See the Pen PojvWxv by tibbeecode (@tibbeecode) on CodePen

Link to comment
Share on other sites

Opacity and transforms are GPU accelerated (more performant) in chromium browsers and firefox. Safari is the new internet explorer though so you won't get any of these benefits over there. 😬
 

Morphing is going to be relatively performance intensive - I tend to only morph small amounts and for short periods of time.

The more elements you animate the harder the browser has to work, infinite loops and anything involving filters/masks/morphing will be hard on your laptop fan!

(This isn't a GSAP limitation, it's a browser level constraint.)

  • Thanks 1
Link to comment
Share on other sites

Cool - so it's not really an issue then? I thought I'd tossed in some very bad mixture of tweens?

 

And I don't know where I'm including jquery?  Are the repeated Alpha - and sometimes small "a" alpha - complaints an actual issue? Firefox won't tell me which line - it just has about a dozen problems with various Alphas?

 

And the Safari complaint - It only really happens when I'm testing and I let it keep running. About two minutes in, Safari starts whining about it.

 

I am honestly just doing the best I can, guessing at what transforms to "get" the "movement" I'm hunting.

 

But is there any tool that will tell me - "Hey, cut it out - the following devices now can't handle your code." So I know I've thrown too much at it and need to cut back? The "performance" bit in Firefox doesn't really make any sense - it's just FPS? Fully loaded, it sometimes drops to 20 FPS, but mostly at 60? I'm certainly not seeing a framerate drop that "looks" glitchy? And that's not just this bit of the animation - that's with everything rolling together.

Link to comment
Share on other sites

@Creek are you saying that the demo you provided is giving all those problems in the various browsers? I'm not seeing any such errors anywhere and there are no filters anywhere, so I'm rather confused. 

 

Infinite repeats don't really matter performance-wise, just for the record. I mean it only matters in the sense that you're continuing to animate rather than being still which would be cheaper, but that's all. 

  • Thanks 1
Link to comment
Share on other sites

Safari delivers the message about shutting the window - but that's only if I just let it infinitely repeat. After a minute or so, Safari gets upset.

 

Firefox is throwing up the alpha errors? There's a total of 7 of them I think? The only reason I mentioned it is because I thought maybe Illustrator tossed in alpha things that upset Firefox when I exported to SVG? I have no clue what an alpha is? I thought perhaps the mystery alphas might be what was upsetting Safari?

 

But it'd be cool if there were a tool that would tell me I went too far with too many tweens at the same time - that it won't work on such and such devices? As usual, I have no clue as to whether such a thing exists?

 

Here's a copy and paste of what Firefox is complaining about?

 

Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:51:9
Expected none’, URL, or filter function but found alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:519:10
Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:957:9
Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:964:9
Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:968:9
Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:1216:10
Expected none’, URL, or filter function but found Alpha(’.  Error in parsing value for filter’.  Declaration dropped. jquery-ui.css:1223:10

 

Link to comment
Share on other sites

I don't think you understood my question (or I didn't understand your response). The CodePen you provided above - are you saying THAT specific demo produces those errors/warnings in Firefox and crashes Safari after a while? I'm not seeing any errors and there are no filters in the demo, so the error makes no sense. If you want our help troubleshooting a GSAP-specific issue, we need to be able to reproduce the problem, so it'd require a minimal demo

  • Thanks 1
Link to comment
Share on other sites

My apologies again. The stupid errors were from a previous export from CodePen, linking to jquery for a stylesheet:

 

<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

 

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

Believe it or not, drop those bad boys into an export of the above CodePen, and all hell breaks loose ;) Whatever it is does not play well with others.

 

Minus that idiocy, no more errors and no more Safari errors and no more fans. I'd just thought Illustrator possibly pumped out weird SVGs with alphas. Terribly sorry for bothering everyone with my idiocy. I'm obviously new to all of this, my brain is apparently wiped with all of the coding. No clue how I didn't spot the useless stylesheet. Very horribly sorry. Instead of reading this idiocy, I hope you're getting some sleep.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...