Tao Tajima – WebGL and GreenSock Animation

Extracting one part of a conversation I had on Reddit with someone who's worked with GreenSock --

"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.

But the bottom line is that not enough “ux” folk are good enough with JavaScript to really be creative with GSAP. So it’s mostly front Enders that use it or propose it in meetings.

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."

Eventhough the transition effect is interesting on first sight, using it more than the initial few seconds made me feel uncomfortable. Can't really pin point it, but I think it's mainly to do with the title always shifting and me having to refocus and trying to read it.

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.

Edit: typos

This is breathtaking. This is the first good usage of scroll manipulation I've ever seen, and it has blown my socks off.

Really disorienting experience on an iPad. The pollution of my back button history was a surprise.

I posted the other day about my desire to see more programmers strive towards demo scene type work in their creative endeavours. Seeing this makes me think about my own completely inadequate portfolio. Writing blog posts, pointing to half finished proof of concept repositories, etc, seems great, but... What if I concentrated on writing things that normal people could see and be interested in without falling asleep?

I used to make these things with AS3 some 10 years ago...

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.

It is a totally new web experience and I think it's amazing (it is innovative for me). Probably it can be a little confusing on mobile devices but on desktop the effect is fantastic and really creative. You can work on it.. for the rest, compliments for the great good job.

This makes me miss Flash in a weird way. This is like what early Flash looked like. Flash performed better, usually looked more polished than this, and was WAY easier to author in than WebGL probably will ever be.

How long does this take for others to load? On my fairly high-spec computer it was nearly 30 seconds on the first load, with not much indication that something was loading besides the slim loading bar. Visually it looks pretty slick but I wonder if it's worth the tradeoff? Subsequent loads seem much faster, though.

Nice but a lot of form over function style design does not make the web a better place necessarily.

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 get the type of customers that need this sort of site, it's artsy, unique and all, but to be honest this could be the poster child for "UX don'ts"

The point about animation tools like these is not that the specific effects matter but rather that the ability to animate even very complex things will allow you to greatly increase the usability things that used to be more or less impossible to do because it would require too much of a user.

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)

I think that for me, one of the most interesting distinctions with such a visual, design-forward experience is the line between what's possible with WebGL animation and what's really just high-production quality video playing in the background. Where most of us developers get stuck approaching this is that we don't have the video assets and design language established, so we see it as just a bunch of tools that you could theoretically put together to do... something arbitrary, and in the future.

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.

I love GSAP but find the documentation and explanations for anything more than the basics very difficult.

Another similar example I liked: http://www.themustafacelik.com/

So many of these scroll animation fuckery sites are made so that they only work with a trackpad, and even then probably only a mac trackpad (where flicking etc. work well).

Using a site like this with a mousewheel is near impossible.

I'm getting nauseous from this website.

I am not aware of having any form of vestibular disorder, and it has generally taken fairly deliberate effort to cause any discomfort when looking at a screen—A Slower Speed of Light was able to make me feel mild discomfort after ten minutes, which I understand to be not uncommon, but it’s almost alone in that.

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.

Gave me seasickness. And I'm not even sick on boats.

In addition to the animation, I liked the "immersive" feel of the main pages. This effect seems to be created by allowing the navigation elements to "frame" the entire screen and then placing a single piece of content as the focal point in the center of the screen.

Certainly some interesting UI / UX takeaways here.

Shows great mastery of webgl animation and poor understanding of browser history (navigation history).

On Firefox for Android, I get

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...

Does this sample audio from _The Legend of Zelda: Breath of the Wild_?

wow, looks really cool

I'd love to see a case study of these effects, both the rolling video obscuration and the weird text entry and exit animations.

Surprised by the fluidity on mobile. Compare to magicleap.com, impressive on desktop but broken on (my android) phone.