Simple 3D animation on Scroll

August, 2016

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 tridiv.com. 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 () {
  skrollr.init({
    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!

3d