Where can I begin to learn this quality of animations?

JavaScript
1

This is a beautiful site and I want to get into the animations of the buttons, the transitions, and overall functionality of this website. How can I get better and what can I look into? Is it just css stuff or is there much more going on here?

2

taotajima.jp/works/waxing-moon/

1 Like
3

This is from memory, I’m on mobile at the minute and can’t double check this, but afaik it’s WebGL, via ThreeJS. It possibly also uses some custom shaders (resource: Book of Shaders, resource: Shader School), It was last year I was looking at how this was done and I can’t quite remember. I think it uses TweenMax for the transitions.

3 Likes
4

How hard would it be to learn/implement?

5

Exactly as it is there? Hard. But you can get a cut-down version of this via just CSS/JS animations/transitions.

Things to learn:

  1. This is motion design. That’s animation, so animation. The 12 Rules of Animation is quite important here. This a massive subject you could spend your life learning, but only a tiny subset applies to UI.
  2. CSS animation is great for simple things, and not difficult to understand how to apply. Basic transitions are dead simple, then keyframed animations are only a little step up.
  3. When you need multiple things happening sequentially it’s not so good: this is where JS animations come in, and GreenSock is probably the best animation library: very easy to use, very good API, elvery good community, and main product is free. There are other libraries (like AnimeJS), as well as the Web Animations API (native in supported browsers, but experimental & not full support yet).
  4. Moving anything in the DOM is slow as hell. CSS transforms move things to another layer and allow the GPU to do the work, which is better. But still, moving lots of things around is slow and janky. You need to use a dedicated graphics API: canvas can provide this.
  5. WebGL is a browser JS API for 2D and 3D graphics. It works with <canvas>. It’s pretty low-level, and unless you’re happy working that low-level, it’s common to use a wrapper library. ThreeJS is the de facto standard library for using it to build 3D graphics (and PixiJS is commonly used for 2D). Here are some demos/tutorials that do very similar things to the site —https://tympanus.net/codrops/tag/webgl/
  6. WebGL relies on shaders, programming the GPU graphics pipeline directly. They generally come in pairs, a vertex shader for drawing shapes on the screen + a fragment shader for colouring the pixels in the screen. They run on the GPU, are incredibly fast, and very low level; the language is very similar to C, and very constrained. Each one is like a function that runs in parallel for every pixel on the screen. Maths helps lot here, shaders are going to be black magic if you aren’t any good at maths. Regl is a very good standalone WebGL library that depends heavily on writing shaders (Three and Pixi and most other libraries allow you to easily use them as well).

These are basically in increasing level of difficulty/complexity (obviously animation as a whole is more difficult than specific tools, but it’s a bit different). You don’t need to know shaders. You don’t need to know WebGL. Basic animation principles + CSS + JS will get you pretty far. But when you need performance, or you want 3D, etc, then you’re getting into graphics programming, and you will need maths and it will be hard, but you can do amazing stuff.

Bear in mind that this is effectively a tech demo; you can’t easily make sites exactly like this with current authoring technology, although…sites like this used to be common. But they used Flash, not what is now standard web tech. It was much easier to make sites like this ~10 years ago than it is now (though Flash does has pretty awful downsides, it dying is still a good thing).
.
Edit: WebGL/ThreeJS is very fun to play around with, and there is some amazing stuff out there, like this guy:

https://twitter.com/thespite

8 Likes
6

Thanks for the honest reply. I think I’m going to start on GreenSock and see where that takes me.

1 Like
7

It’s a good choice I think — it’s fantastically usable, performance is great, and I’ve never hear anything but praise for it.

8

Having a graphic designer background it’s not very cool when I can’t do as cool stuff with coding and I enjoy that part. Hopefully this bridges that gap!

9

Also, any idea how to start an animation with greenback when the user scrolls down a page and it starts when they begin to view that page?