InfamousRocket

First off, the demo is really mesmerizing! Codus to whoever built it ❤️ 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 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!

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

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