It's all CSS animations!

I am very curious to how exactly they made these animations! Surely they didn't hand type all of the transforms.

I see a lot more of similar animations appearing on the internet.

Are there tools that people use to help with the animations?

Most tools put out a lot of unnecessary code and often rely on JavaScript, so my guess would be that this is handwritten. The animation consists of three phases for each element, which they reordered using pixel value transforms. The background containers are fixed in place and the opacity is changed depending on stage 1/2/3. To ensure them not having to adjust any values for smaller devices, they scaled the parent element to fit the browser size. Time consuming, but the best way to get the performance you need.

I’ve used BounceJS in the past: http://bouncejs.com

It can be done using Adobe After Effects and the Bodymovin plugin.

..except you will end up with a 300kb js file and a massive Json file. Whilst this plugin generates magic your speed suffers with it.

http://animista.net/ is quite handy for quickly putting something together.