3 ms·
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 appe
by kumaraman 9y ago
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?
- indexerror 9y agoIt can be done using Adobe After Effects and the Bodymovin plugin.
- squiggy22 9y ago..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.
- Cenk 9y agoI’ve used BounceJS in the past: http://bouncejs.com http://bouncejs.com
- afloatboat 9y agoMost 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.
- corford 9y agohttp://animista.net/ http://animista.net/ is quite handy for quickly putting something together.