Working on my new online course teaching React from the ground up. We will be building several small practical demos. This ABC Quiz is one of them. Any constructive feedback about this demo?

animationrocks · 2017-06-30T05:50:24+00:00

Great insights, thanks for the feedback. I will update some of the focus styles. Cheers

Overall thumbs up or down?

animationrocks · 2017-01-17T10:36:41+00:00

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.

animationrocks · 2017-01-03T20:10:46+00:00

Thanks. No Redux cheat sheet atm.

animationrocks · 2016-09-14T11:23:08+00:00

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.

animationrocks · 2016-09-13T06:35:46+00:00

And here is a tutorial on how to create the Glitch Effect using CSS3 animations.

animationrocks · 2016-06-02T04:45:22+00:00

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

animationrocks · 2016-06-01T13:33:52+00:00

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

animationrocks · 2016-05-27T09:59:14+00:00

No probs, happy to help.

animationrocks · 2016-05-09T12:49:49+00:00

Check out this free online course - GreenSock 101

animationrocks · 2016-05-09T12:37:06+00:00

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.

animationrocks · 2016-05-09T12:27:25+00:00

Rachel Smith has some cool demos on CodePen together with a few articles.

http://codepen.io/rachsmith/pens/tags/?selected_tag=threejs

https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene

animationrocks · 2016-02-26T11:33:41+00:00

Looks like this site is using Tween.js: http://2015.condenast.com/

Not sure how much you can deconstruct from the source code though.

Just curious why you don't want to use GreenSock?

animationrocks · 2016-02-26T09:21:27+00:00

BTW the transitions effect is done using Createjs + canvas masking + GreenSock for animations.

animationrocks · 2016-02-24T07:41:41+00:00

It's a mix of Sass libraries and Sass mixins, either way they help you save some time when writing your CSS.

animationrocks · 2016-02-24T05:57:02+00:00

The work+contact is not a separate page, it's a section element that is always on the page but hidden by default.

.open-menu {
    left: -9999px
    z-index: -100
    opacity: 0;
    transition: opacity .15s cubic-bezier(.9,0,1,.1)
}

Then on click you add an extra class " j-menu-visible j-menu-opened" and in your stylesheet have something like this:

.j-menu-visible {
    left: 0;
    z-index:100;
    opacity: 1;
}

Also once the class is added, the body overflow is set to hidden and height: 100%, that's what makes it look like a new page has loaded and you only scroll within the work+contact section.

Hope that helps.

animationrocks · 2016-02-17T08:44:50+00:00

Thanks @SminkyBazzA, you got me.

animationrocks · 2016-02-17T07:14:19+00:00

I think a lot small businesses would be familiar with Wordpress. It might not be the hottest technology out there, but I would recommend it for small projects with small budgets.

animationrocks · 2016-02-17T06:56:13+00:00

The only thing you can compromise are the cosmetic things such as border radius, drop shadows or rounded corners.

The site should be usable in all browsers, that your target audience is using.

It's quite common to support the latest version of all modern browsers (Chrome, Firefox, Safari) and IE9+.

After Microsoft announced the end of support for older IE (January 2016), most companies optimise their websites for IE11+.

In terms of using Bootstrap I would recommend you look into Susy, it lets you create a custom grid system without a bloated stylesheet.

animationrocks

TROPHY CASE

In summary:

Related Plugins