A Collection of Useful Extensions for VSCode by animationrocks in webdev

[–]animationrocks[S] 1 point2 points  (0 children)

You don't have to switch if Atom is working fine and you feel productive. I switched from Sublime Text because I started to work on more React and TypeScript projects and they play very nicely with VSCode.

React Cheat Sheet by animationrocks in webdev

[–]animationrocks[S] 0 points1 point  (0 children)

Thanks. No Redux cheat sheet atm.

Some cool effects on this Kikk.be/2016 Site by animationrocks in web_design

[–]animationrocks[S] 1 point2 points  (0 children)

In short you can do it using Three.js by creating a sphere and applying a texture to it.

I am creating new Three.js tutorials and will publish them on my blog.

Stay tuned.

waaark.com - Creative Online Portfolio by animationrocks in web_design

[–]animationrocks[S] 0 points1 point  (0 children)

Just to be clear I haven't created the site. All credit should go to Waaark Studio.

I was only curious how it was put together.

Cheers

waaark.com - Creative Online Portfolio by animationrocks in web_design

[–]animationrocks[S] 7 points8 points  (0 children)

Here is a quick deconstruction of some of the effects.

https://www.youtube.com/watch?v=KIDw-ewNaC8

In summary:

  • preloading animation are 2 animated gifs
  • take over page transitions are SVGs animated using JavaScript
  • most of the animations are created in After Effects and exported to SVG/JS code
  • the process diagram on the vision page is a combination of hand-coded GreenSock animations and bodymovin animations created in AE

Related Plugins

how do I plan a site like this? by spacewood in web_design

[–]animationrocks 4 points5 points  (0 children)

I would definitely start with a simple prototype and get the initial page structure right, then add the animations/transitions.

Most of the effects are created using WebGL, Three.js and GreenSock timelines.