conofor

Delivery Card Animation

Source gif by Ramotion - https://dribbble.com/shots/2121350-Delivery-Card

Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it's not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don't forget to click request button inside card.

(Cool)story behind the demo:

when I saw this gif I just wanted to recreate flipping animation. I thought that it will be easy-peasy, because I worked with preserve-3d stuff in CSS before. But, when I started doing nested elements below 2nd level, everything turned to a crazy bugfest. Border-radius crazy bugs in various Chrome versions, z-index and translateZ(0) retarded things in FF and other absolutely random stuff. So when I finished flipping part, I thought that I should continue and do the rest. Oh boy... This decision gave another week of suffering and LOTS of shitty code. I will try to refactor

Coalesce 12 - Phosphorescence 6

GPGPU particles using texture caches for position and velocity.

For more of these experiments, please see: https://codepen.io/collection/XEEaEa/

A Pen by Liam Egan on CodePen.

License.

Art of Noise #14

Some Settings on Top of JS Code to play around with :)

A Pen by Tibix on CodePen.

License.

Clip Clop Clippity Clop [CSS Only]

CSS Only Animated horse of course.

Click / touch the horse to slow things down.

A lot of help from this video https://www.youtube.com/watch?v=oxjt_xyjkrU

	<div id="sequence" class="seq">
	<ul class="seq-canvas">
	<li class="step1 valign seq-in">
	<div class="vcenter">
	<img data-seq class="feature" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
	<h2 data-seq class="title">Bananas</h2>
	</div>
	</li>
	<li class="step2 valign">
	<div class="vcenter">

	<html>
	<head>
	<title>Canvas</title>
	<link href="style.css" type="text/css" rel="stylesheet">
	</head>
	<body>
	<canvas id="myCanvas" ></canvas>
	<script src="smoke.js" type="text/javascript"></script>
	<script>draw();</script>
	</body>

	<div id="paper-back">
	<nav>
	<div class="close"></div>
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#">Our Work</a>
	<a href="#">Contact</a>
	</nav>
	</div>
	<div id="paper-window">

	<h1>Happy 30th Birthday, GameBoy!!</h1>
	<p>⚡ Author:
	<a href="https://twitter.com/Manz">Manz</a> /
	<a href="https://github.com/ManzDev">ManzDev</a>
	</p>

	<div class="wrapper">
	<div class="power"></div>
	<div class="gameboy">
	<div class="top">


	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>

	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>

	<div id="Stats-output">
	</div>