"GSAP is fairly standard on commercial sites. It’s the most mature and cross tested animation option, but it’s best features aren’t free. I’d argue there’s a good reason for that though, because the codebase is pretty impressive and can’t be cheap to maintain.
Most people say the biggest advantage of GSAP is the timeline. When paired with SVGs (and using GSAP’s morph plugin) there’s some pretty crazy and unexplored UI orientated options that become very possible. I rarely have a client with a budget to go there, but why use another tool that can’t do such amazing SVG manipulations in real time and synced to other movement on the screen?
I cannot overstate how powerful that is.
Also I’m not 100% sure... but I think I recall reading somewhere that a lot of the software solutions trying to make web animation “easy” for designers, use GSAP under the hood. So I look as GSAP a lot like D3. Since they’re advanced/enterprise solutions, and not easy to use (but not hard at all for proper programmers), there’s a lot of attempts to make it easier with libraries built on top of their bases through licensing."
Too much stuff is moving at once - you have the videos in the background and in the forground other stuff is moving too - I think that's what's causing the discomfort for me and having to work too hard to explore the content. Making it all a bit more subtle might have helped.
And 'polluting' the history with each slide state doesn't help either.
Animations like this need to be tested with users too.
And it makes sense to have the history change with each slide state. Describing it as a 'state' upholds that point. The back button even works with it, which is my main gripe when single-page apps don't 'pollute' the browser's history.
To me that component on the homepage is more like a 'carousel', so when I hit back I expected to be back on HN, but instead I stepped through each slide again with all the transitioning.
But it doesn't matter what my or your opinion is... we both have different expectations and all I'm saying is ideally this stuff should have been tested with more users.
And my guess is that your expectation for the back button to send you back to HN is because of how the majority of SPA's break the back button. It's a disheartening reality.
I understand the importance of testing with actual users, but it's honestly pretty amazing that these are the only broken expectations for a portfolio site like this.
Which doesn't take away from how
impressive and smooth the effect is, kudos to the author
Despite that - very cool website, can't complain about the overall experience.
Is there a market for these types of websites?
Maybe I should create some kind of "interactive web experience" and see if I can get some clients.
Yes it has. You could even create your own shaders/filters with a specialized language. Frankly it's great that things like that can be done with js/html but people did way more impressive things 15 years ago.
I'm really not impressed at all, personally.
I think things are more polished now, because of bandwidth we can afford large images, videos, etc but back in the day there was some truly impressive Flash stuff.
I’m talking about hardware acceleration, antialias, no dropped frame and in sync with the monitor’s refresh rate.
Even a simple CSS3 animation beats the shit out of Flash in this regard.
Take a look here if u care: https://thefwa.com/
I've been asking for a proof that Flash can be as smooth as native browser technologies. So far, I've seen only words.
All supported by flash, I just told you about the possibility of coding your own shaders with a C like language where do you think these shaders were computed?
> Well, show me a link then. We can still run it (not for long).
You know damn well that most flash content has been retired from the web.
My jaw dropped when I saw webkit translate(). Not everyone notices but it makes all the difference to some.
>You know damn well that most flash content has been retired from the web.
I’m sure most of the impressive demos can still be dug out.
I understand it was possible to compute on the GPU with AS3, but the end result, rendered inside the plugin box of a browser never felt this fluid.
But SVG is the only browser graphics tech with excellent tooling for illustrators (namely, Illustrator). So we've been forced to change both our art style, and our rendering stack, to deal with the death of Flash.
That's life in the tech industry, fine. But it's misguided to say that the browser is unequivocally better or worse performing than Flash. It really depends what you're making, and how you make it.
It's totally possible to make something on the web that looks and performs better than it would in Flash. But you have to put strict restrictions on what kind of art you use, and what technology you use to render that art, which puts restrictions on your production process, which sucks.
HTML5 can not even streaming vector animations.
Despite all of the improvements in browser support for JS/CSS driven animation since the glory days of Flash 10 years ago, the web seems more static and text/image heavy than ever.
Actually I don’t really wonder; Flash is well dead, but it’s interesting to ponder!
I work for a company that does both SVG+JS and Flash media, still. The web-tech media is smoother (because 60fps), but the Flash media has a much higher complexity ceiling — which is why we haven't 100% switched to the web yet (and because our clients still prefer and pay for the Flash stuff, sigh)
Memory is a curious thing. Please provide some link to support this opinion. It is still possible to run it and prove it.
Nevertheless, WebGL is still a bit underused and this is a nice showcase. I imagine that together with WASM it will enable a lot of slick experiences when people start doing the things that currently require native applications.
E.g. most games have very slick and responsive UIs. There's no good reason why the web has to be the stuttering laggy mess that that causes your fans to spin up as soon as you scroll.
I'm not a huge fan of this particular design but I do appreciate the effort they put into showcasing GSAP's capabilities. The web could use more interactivity and motion. The death of Flash and rise of mobile-first design seems to have led to websites where the only thing moving is the text/image content that's displaced once the ads on the page finish loading.
The way I see it for something to be have a nice user experience, it cannot be "boring" or all that bland as you put it, because if your target has lost interest after spending 10 seconds on your page because it feels like Wikipedia then I would call it bad UX honestly.
To illustrate if I had an article to present I could simply make a layout like so :
Article, bold words for emphasis
so literally an h1 and some paragraphs and for the sake of this example let's say that this pattern is indeed a good UX.
Now it works, our potential customer gets the content we want him to read, all good, but it is boring.
Now if you were to let's say do this kind of a layout :
Title with cover image background and a readable contrast
Paragraph 1 gets displayed centered vertically and horizontally with a lot of space between lines and a large font to make for an painless read, instead of using bold for emphasis maybe use bold and an accent color
Paragraph 2 has its first couple sentences barely noticeable at the bottom of your screen so that the user knows to scroll
Paragraph 3 comes in with a fade-in+transition from -10% left to 0% left
It might feel like we are entering more of a UI world but the way I see it if I can't easily understand something no matter how well it is presented then it's bad UX. I have dyslexia so I cannot read more than 2-3 paragraphs before losing track or interest, probably read 2 books in my life from cover to cover, so this has always made me think about content in a way that would make it accessible to any individual no matter their prior knowledge on the subject, their capacities or any other assumption you might not even realize you are making.
If a 5 year old can understand it in seconds then it has a good UX for me, think of Reddit's ELI5.
Again, this is only my view and I'm not saying there is a right and wrong way to do things, because there is none either way.
Don't forget that the number one driver of something being intuitive is the removal of abstraction between the user and the result of their interaction. This is why the touch screen was the real paradigmshift when it came to improved usability because it removed the layer of abstraction between the user and what they wanted to manipulate.
Animation fills in this role too in that it allows for transitions to happen that makes you understand what it want you to do simply by ex. keeping on element on the screen but animating everything else out or by changing shape from one state to another. The fact that you experience this transition is what's really powerful and will be part of whatever next generation of UI paradigms we will see (ex. turning data into interactive elements as an example)
Whereas, if a design lead came to you with a strong design/brand and video content, it's really nice to know that the tools exist to make such a thing possible.
You don't have to go crazy on the transitions and scroll jacking, either. Subtle use of these tools can produce humbling results.
Another similar example I liked: http://www.themustafacelik.com/
Using a site like this with a mousewheel is near impossible.
But this site is awful. I was feeling fine before, but within half a minute I was feeling mild pain in the back of my eyes and the beginnings of stomach churning. The animation was choppy and severely disorienting. Scrolling switching pages is not normal and is always, uniformly a bad idea. So after only half a minute I closed it. (That is, half a minute after the it finished loading—before that, there was a loading screen for perhaps fifteen or twenty seconds, which is never a good sign. In the normal way of things, I’d probably have closed it before it ever finished loading, but I had been expecting some sort of article on combining WebGL and GSAP, rather than a demonstration that would make me feel sick.)
My stomach is not feeling any better a few minutes later. I shall now go and have a drink and a walk around.
Just because you can do something, does not mean you should. As implemented, this is terrible.
Quite apart from the how it will made some people feel sick, there is simply too much that is different about the site, so that a great many people, when they encounter it, will get lost very quickly. It’s not as bad as mystery meat navigation, but its navigation scheme is very dubious, because it lacks the “tells” of normal web browsing.
It’s an interesting technical demonstration, but not a good website for normal people to use. For a film-maker it may or may not backfire, but I’ve seen a couple of sites of developers, designers and such agencies, that looked and behaved vaguely like this from a navigation perspective, and the main thing that I take out of such sites is that the the creator of the site didn’t care about accessibility. And I don’t mean making the site usable for disabled people, I mean making the site usable for anyone. I would never hire any such person or organisation for any web development work.
(I failed to notice this the first time, but this site is also enormous. I killed it off as it hit 75MB, and I think it was still loading more video. I will freely and precisely describe such a page size as absurd and insane. I would not have loaded the site even once had I realised what and how large it would be.)
Certainly some interesting UI / UX takeaways here.
This site has some features that are not supported by your current browser.
I recommend Using the latest version of Chrome.
... but it works with desktop Firefox...
Edit: in fact, it works in Firefox for Android if I enable desktop mode...