Skip to content
janpaepke edited this page Oct 24, 2014 · 34 revisions

Learning ScrollMagic


A work in progress. If you're willing to contribute, please feel free to do so!


Getting Started:

  • First Steps
  • How to use ScrollMagic

Understanding:

  • Debugguging
  • Scene trigger position
  • Pins
  • Tweens (and their projected duration)

Tutorials:

  • basic pin w/multiple scenes
  • basic tween w/multiple scenes
  • anchor navigation
  • swipe or wipe
  • parallax effects
  • using ScrollMagic with OnePageScroll
  • using ScrollMagic with Tween.js

Home

Troubleshooting Guide

Getting Started

First Steps
How to use ScrollMagic
Using AMD (i.e. requirejs)

Basics:

What are Tweens (and their projected duration)
What are Pins
Scene trigger position
Debugging

Tutorials:

basic pin w/multiple scenes
basic tween w/multiple scenes
anchor navigation
using ScrollMagic with OnePageScroll
using ScrollMagic with Tween.js

Getting Started (v2)

  1. Setup
  2. First Tween
  3. First Pin
Clone this wiki locally