Freebie: ScrollMagic Starter Templates

Today we’re giving away three ScrollMagic website templates for you to use and repurpose. Each of them are unique and built with Bootstrap 3 so you can quickly reuse them. At the very least, they demo how awesome and quick ScrollMagic can be at recreating highly complex interactive websites in record time. The following templates are available:

  • Movie: A from-scratch rebuild of the old Google Cardboard site with added mobile support
  • Zoomer: Zoom style website similar to the Apple 5k website effect
  • Cards: An easily customizable scrolling presentation template

The Movie Template

The movie template is based on the old Google Cardboard concept where you scroll through a slideshow of images. It turns you scrollbar into a playback scrubber for the movie. Unfortunately, the old Google Cardboard site isn’t up anymore, and, on top of that, for some reason it wasn’t captured by the Wayback machine. The old site did use ScrollMagic, but this template was written from the ground up using 100% of my own methods. It started as a project to see if I could do it better and get it working on mobile as a challenge to myself.

View the Movie Template Demo

The Zoomer Template

The zoomer template was inspired by Apple’s beautiful Mac 5k website zoom effect. This was recreated with ScrollMagic extremely quickly simply by eyeballing it. I believe they use HTML5 Canvas and some other custom stuff for their version of this effect.

View the Zoomer Template Demo

The Cards Template

The cards template is an idea I had for recreating powerpoint-like presentations easily on the web. It’s similar to FullPage.js except it doesn’t restrict the users scroll. It automatically adapts to the size of the cards, so they can be bigger or smaller than the viewport. It’s also ridiculously easy to customize the animations. To update the animation just change the fromTo snippet:


$('section').each(function() {
var cardTween = TweenMax.fromTo('#'+$(this).attr('id')+' .wrap', 1,
    {
        scale: 0,
        // z: 1,
        y: 500,
        x: 800,
        skewX: '200deg',
        transformPerspective: 200,
        rotation: '10deg'
    },
    {
        scale: 1,
        // z: 1,
        y: 0,
        x: 0,
        skewX: 0,
        rotation: 0
    }
);

This probably works best when the effect is subtle, but the demo uses a ton of animations for illustrative purposes.

View the Cards Template Demo