Jump to content
Search Community

I made a rocket & i don't have the fuel

InfamousRocket test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone,

 

I'll try my best to keep it as light and yet as detailed as possible, But i feel i need help after 7 months of trial to make a portfolio that describes the creative innovative well-performed master-crafted art of the builder itself! (That's a lot of adjectives i know, But it says it all)

Not gonna bore you to death with my motivations so let's get to the point...

 

This portfolio is a rocket, built to surf between the dimensions of this homemade space that i'm creating.

As it may already seem impossible to your negative mind, Well i did it! But it's not so smooth (duh).

You see there is a LOT of flying in this project and you guessed it, I use scales, rotations, x, y, opacity and such to deliver that flying effect to a few different elements (so far maximum of 26 different animations at once).

Considering what GSAP's examples shows 26 animations at once may not seem that much big of a deal, but we're not talking little green dots here, we're talking 2 giant planets with floating particles around it and another giant thing with different parts floating in your monitor, not to even mention, they're all detailed!!

These designs i'm talking about are SVGs & before you get the idea that they're not optimized i gotta say i learned my lesson, the designs weighed around 27 MBs before i optimized them all to roughly 3 MBs, so we're good on that part.

 

Now there maybe a lot of different scenarios i did wrong here, But i don't do maybes so i try to express the parts that i feel are the stick through the progress's wheel! I'm numbering them so it's easier for you to point them out for me:

1. SVGs are embedded to the CSS's background property, Optimized and compressed. The desired CSS properties are given to the element and finally the animation is done either to this element DIRECTLY or to the parent that may contain a few of elements like this one (so far maximum of 7)

2 . The HTML tags linked to these CSS ids are mostly divs.

3. I DID NOT use any images whatsoever. Even the blurred parts or shadows were done by SVG filters (if you didn't know SVG can't handle blurry like designs and so your designing app turns them into image and embeds them in your SVG!)

4. The lagging usually happens when objects are scaling bigger (another duh) OR when the browser is animating any elements that has SVG filters are included in it! However my greatest suspicion is scaling... It's also worth mentioning that when not scaling, everything, even the most detailed elements work smooth!

5. I DO NOT use canvas or flash for any of the purposes i expressed so far am only using JS, JQ, GSAP, CSS, HTML. My aim was to hit a project like this only with the knowledge of these programming languages and frameworks that i know i'm good at..

6. I'm aware of GPU accelerated animations so i didn't use anything other than transform and opacity on my main animations.

7. When flying, ALL other animations are stopped to help the performance of fly-related animations.

8. This project IS NOT 3D by nature, what i mean by that is i scale & position elements in a way that makes totally 2D divs look 3D (not sure if that made any sense)

 

That's all i could come up with.

I gotta say i'm grateful to GSAP's team and it's community cause you guys made something this powerful and now i'm using it to make something cool which i'm pretty sure can be a great example among other examples of how good GSAP really is...

I really LOVE to learn new things so don't hesitate to share your knowledge with me if you want to.

Have a great life & Good luck on your own projects ;)

  • Like 2
Link to comment
Share on other sites

Hi @InfamousRocket

 

Welcome to the forum. ?

 

It sounds like you're asking about how to improve the performance of your app. There's nothing wrong with that, but the best way to get help on this forum is to provide a simplified demo showing your issue(s). Without a demo, it's hard to provide much more than educated guesses.

 

Check out this thread if you need help creating a demo.

 

 

But I'll go ahead and take a crack at answering your question based on the information you provided.

 

The main issue I see is that you are using SVG graphics. SVG has a bunch of nice features, but performance isn't one of them. The easiest way to become the mayor of Slowville is to animate an SVG graphic with shadow/blur filters.

 

Shadow/blur filters are quite literally the slowest graphics operation you can do. Every time you scale an SVG graphic, the browser has to recreate all the pixels for the shadow/blur in addition to the pixels for the rescaled graphic. If possible, using a normal image (png, jpg, etc) would be much faster.

 

And yes, scale is technically a transform that can be GPU accelerated, but that will only happen if the graphic can be rasterized. Due to SVG's scalable nature, that's probably not possible, even when being used as a CSS background. 

 

On 8/2/2019 at 6:14 PM, InfamousRocket said:

I DO NOT use canvas or flash for any of the purposes i expressed so far am only using JS, JQ, GSAP, CSS, HTML. My aim was to hit a project like this only with the knowledge of these programming languages and frameworks that i know i'm good at..

 

Flash has been dead for many years, but canvas? Well, that's pure JavaScript. Canvas is not the easiest thing to pick up, but it can really improve performance. And 26 animations? Using canvas/WebGL, you can easily have thousands of animations running simultaneously.

 

Just a little demo using PixiJS and GSAP.

 

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

 

 

And if you're going for 3D, I would recommend checking out three.js. 

https://threejs.org/

 

 

And yes, three.js plays very nicely with GSAP. ?

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hey there blake,

 

Thank you both for the welcome & the respond ;)

 

I do realize how a demo can help and i'm sorry for not providing one. The thing is i find it really hard to extract any sequence from my website due them being in a series of chained loop reactions, which if i want to i can extract that eventually! However i can't shake off the thought that this problem of mine is performance-related! Simply put we gotta go for all of the website unless i can pinpoint a problem first. So far i wrote about 4000 lines of javascript (that's optimized object-oriented programming btw) which i know the best, so you get the point...

 

Ok based on what you suggested

SVG is not the best pick when scaling something

SVG filters are terrible when animated

Got it, i can definitely switch from SVG filters to PNG's but what can i use instead of the SVG itself? What is best & what to avoid when scaling?

 

I gotta say i never saw a website do this kind of scaling that i intend without the help of canvas, or something...

This is an example of a star:DevStar.svg

This is a space storm:RightWing.svg

Another space storm:Dlm_StarFlow.svg

Now when flying all of these may scale way more than the user's screen (they eventually get a 0 autoAlpha and reset scale), And to consider that most of these big elements have particles (all of them actually)

This is an example with really bad fps xD, the actual website doesn't work this bad tho! Jwust wanted to show what kind of scaling it is i'm talking about...

https://www.mediafire.com/file/0llb3u5r96zoi7u/ScaleSample.mp4/file

  • Like 1
Link to comment
Share on other sites

31 minutes ago, InfamousRocket said:

I do realize how a demo can help and i'm sorry for not providing one

 

You're good. I understand how creating a demo showing performance problems can be difficult. Your movie and SVGs do a good job of illustrating what you're doing.

 

 

34 minutes ago, InfamousRocket said:

SVG is not the best pick when scaling something

 

It really depends on the complexity of the graphic. Your graphics are very complicated, so that's most likely part of the problem. Your approach of using SVG as CSS backgrounds and only animating transforms and opacity is spot on. The problem comes with scaling an SVG image because it has to constantly be redrawn to be resolution independent. Scaling a png won't have that issue, but the downside is that it will become pixelated the more you scale it up.

 

 

36 minutes ago, InfamousRocket said:

SVG filters are terrible when animated

 

It really depends on the what the filter does. Filters that blurring/shadows can be really slow. Filters that do color related operations can be really fast. 

 

So after seeing your video, I'm thinking that scaling up pngs with an increasing level of detail might work. Check out the ExpoScaleEase docs.

https://greensock.com/docs/Easing/ExpoScaleEase

 

And this demo.

 

See the Pen NyXBbV by GreenSock (@GreenSock) on CodePen

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

First off, the demo is really mesmerizing! Codus to whoever built it ❤️

 

10 hours ago, OSUblake said:

but the downside is that it will become pixelated the more you scale it up.

 

I should design a very interesting loading screen, cause another downside is bidding farewell to that cute 3 MBs of design and probably pass 15 MBs!!

Not nagging over here, there's always a sacrifice anyways...

I was beginning to switch the idea from rocket to a wheel or something (desperate times i know) cause i have a form of fly which does nothing but rotating and that part is legit the smoothest piece of animation in the whole thing! It looks cool too, but not as much as the fly effects B)

 

When i think about PNG and SVG's differences in nature, i think it would work perfectly fine cause PNG just goes straight to cache so when scaling, browser have less graphical difficulties to deal with and doesn't need to redraw something at every pixel change, therefore we'll get better performance.

Besides i'm that person who gives up perfect graphics for better fps in a game, so i think i know what option i'm going with.

Though i wonder, can canvas (or any other tool for that matter) do the SVG scale without performance issues?

 

So far i got what i asked for, Mostly i needed confirmation that there isn't a magical tool out there doing what i'm doing 10x better! No point in reinventing the wheel, at least not without improving it!

I thank you dearly ❤️ and will post about my success so there's conclusion on this topic!

  • Like 3
Link to comment
Share on other sites

19 hours ago, InfamousRocket said:

Though i wonder, can canvas (or any other tool for that matter) do the SVG scale without performance issues?

 

That's why I was suggesting checking out three.js, which uses a 3D renderer (WebGL). Moving and scaling objects in 3D space is pretty fast. Just think of how smoothly 3D video games are. You can still make 2D looking objects in 3D. The only problem for what you're doing is that you would need to convert most of your graphics into geometric objects/models, which might take a little work. 

  • Like 3
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...