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