Site animations

Cookiepus

Hello
Im trying to reverse-engineer this very cool site:
http://www.noooagency.com

Are the animations pure CSS?
would someting like this be possible using Adobe animate CC?
Many Thanks
Cookie

Graham

From the source:

/*!
* animsition v4.0.1
* A simple and easy jQuery plugin for CSS animated page transitions.
* http://blivesta.github.io/animsition
* License : MIT
* Author : blivesta (http://blivesta.com/)
*/

Cookiepus

Thanks Graham
But surley thesers more going on here than page transitions
what about the little rockets?
Cookie

Graham

Transitions refers to the items transitioning on the page, not between pages.

From the source:

[HTML]
<div id="shape-spaceship" data-1000="transform: translate3d(0%, 0%, 0) rotate(45deg) scale(.5);" data-2250="transform: translate3d(510%, -100%, 0) rotate(0deg) scale(1)" class="skrollable skrollable-between" style="transform: translate3d(324.36%, -63.6%, 0px) rotate(16.38deg) scale(0.8180000000000001);">

<div>

<object data="http://www.noooagency.com/wp-content/themes/noooagency/vectors/shape-spaceship.svg&quot; type="image/svg+xml" class="skrollable skrollable-after" style="z-index: 0; transform: translate(0%, -1.870155000000068%) translate3d(0px, 0px, 0px);">

<div id="fallback-svg-vector-spaceship" class="fallback-svg"></div>

</object>

</div>

</div>
[/HTML]

billyduk

The "spaceship" animation and hero animation are both SVG's that I presume run as the background for their respective wrappers. The other animated elements appear to be either SVG's triggered by a scroll event or css transitions triggered by a scroll event (both simple and easily recreated). Theres not much "reverse engineering" to be done with the background animations. Your options are:

A.) Export SVG elements from illustrator (or similar) and use a framework like SnapSVG JS to animate. This would require you learning SnapSVG.

B.) Create the desired animation from vector based objects in AE and then export using the BodyMovin AE plugin and associated JS plugin. This would require you learning After Effects.

I think you may be jumping the gun a little here. Learn the basics of SVG by looking at an SVG's source and tinkering. The source of an SVG is basically like XML. The properties (which is what gets animated) are represented here. Then move onto a framework like SnapSVG or Velocity JS to get to grips with animating SVG's.

The other alternative is to learn AE. Unless you are already familiar with AE then this route is useless as you would be learning how to use a complex(ish) application for a single purpose. You would have far better learning outcomes be choosing option A.

Cookiepus

Wow Billyduk
thats what i call an awnser!
I actually know AE quite well
its the code stuff id be a beginner at.
the BodyMovin AE plugin looks intersting
thanks for the tip
Cookie