
Tao Tajima – WebGL and GreenSock Animation - tambourine_man
http://taotajima.jp/
======
deathtrader666
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."

~~~
girvo
Yeah. I was a Flash programmer back in the mid 2000s, and GSAP is what let us
move away from Flash and onto JavaScript with a similar set of abstractions.
The best animation system I’ve used for the web; and amazingly performant.

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

~~~
prophesi
I'd have to disagree with all of those points. The background transitions
first, then the foreground content transitions afterwards; they're not all
moving at once. The foreground content then remains stable once the transition
finishes. Perhaps some opacity could be applied to the foreground content to
discourage users from trying to read while it transitions.

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.

~~~
uxcolumbo
Check again - for me some of the videos play at the same time while the page
is still transitioning... that's what I meant.

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.

~~~
prophesi
Yes, all of the videos should be auto-playing. I'm saying that the discomfort
would likely be alleviated if the text's opacity transitioned in. Then you
should be able to handle the awesome rippling effects.

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.

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

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

~~~
jordache
wow.. you're not browsing wikipedia pages. who cares about the browser
history?

~~~
TheCoreh
most people. having to press back several times to go back to the previous
site is a frustrating user experience. ideally this would use replaceState
instead of pushState

Which doesn't take away from how impressive and smooth the effect is, kudos to
the author

------
mikekchar
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?

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

~~~
tambourine_man
Flash has never been this smooth.

~~~
aikah
> Flash has never been this smooth.

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.

~~~
tambourine_man
Well, show me a link then. We can still run it (not for long).

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.

~~~
wormik
Sorry dude - you have no clue what was posible with stage3d, pixelbender etc.

Take a look here if u care: [https://thefwa.com/](https://thefwa.com/)

~~~
tambourine_man
I do care. Searched this site but found no Flash content.

I've been asking for a proof that Flash can be as smooth as native browser
technologies. So far, I've seen only words.

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

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

~~~
tambourine_man
>Flash performed better, usually looked more polished than this…

Memory is a curious thing. Please provide some link to support this opinion.
It is still possible to run it and prove it.

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

~~~
ricardobeat
Mobile here, first load about 5-7s on 4G. Not bad.

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

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

~~~
rchaud
True,but I work in a UX role and for a moderate-to-large website, "good UX"
means a basic responsive design with a logical information architecture and
navigation that optimizes conversion (e.g. product purchases). Good UX is
business-driven and businesses are often boring.

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.

~~~
kjullien
I somewhat agree and disagree with your view of UX, but that would mainly be a
personal thing.

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 :

Title

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

etc...

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.

------
ThomPete
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)

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

------
andy_ppp
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/](http://www.themustafacelik.com/)

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

~~~
mechazawa
Scrolljacking is a bad idea in general
[https://codepen.io/gunderson/pen/GJJPpV](https://codepen.io/gunderson/pen/GJJPpV)

------
mechazawa
I'm getting nauseous from this website.

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

~~~
iamaelephant
So just because you personally have trouble with something, no one should ever
use it?

~~~
chrismorgan
I will not be unique in this. Many people will be negatively affected by it,
some far, far worse than me. (For some history on far more subtle things than
this causing problems for some people, look into what happened in iOS 7 (I
think it was that version) in what led to the “prefers reduced motion”
setting.)

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

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

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

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

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

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

------
hawkilt
wow, looks really cool

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

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

