Simple 3D animation on Scroll

August, 2015

I figured out a simple workflow to create simple 3D shapes and animate them on scroll in the browser. CSS and JS only!

See a demo here.

Step 1: Prepare your 3D scene in It is an easy online 3D tool, that renders your scene as CSS shapes.

flat browser

Step 2: Grab the html and css code from the tridiv preview.

flat browser2

Step 3: Setup your html document and add jqueryskrollr.js and the generated markup and css code from tridiv.


Step4: Init skrollr.js

$(document).ready(function () {
    smoothScrolling: true

Step5:  Do the skrollr magic and add the following line to the tridiv .scene div:

 data-0="transform:rotateY(0deg);" data-720="transform:rotateY(-360deg); 

The scene will transform from 0degree to 360degree rotation while scrolling 720px.


Step6: Make everything  able to transform in preserve-3d:

.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;


Let’s Go!