Skip to content

Getting Started : Using AMD

janpaepke edited this page Nov 13, 2014 · 4 revisions

Setting up the Config

When using ScrollMagic make sure the paths to the source files of all dependencies are known. Usually you may have to define them u sing the requirejs config.

require.config({
    baseUrl: 'js',
    paths: {
        TweenMax: 'lib/greensock/TweenMax',
        TimelineMax: 'lib/greensock/TimelineMax',
        jquery: 'lib/jquery.min',
        ScrollMagic: 'jquery.scrollmagic',
        "ScrollMagic.debug": 'jquery.scrollmagic.debug'
    }
});

Using ScrollMagic with AMD

For AMD only one object is exported containing references to the ScrollMagic controller and the ScrollScene Constructors. Compared to the browser globals the object looks like this:

{
    Controller: ScrollMagic,
    Scene: ScrollScene
}

To use ScrollMagic in your setup you need to use these references as constructors. Example:

require('ScrollMagic', 'ScrollMagic.debug'], function(ScrollMagic) {
    var controller = new ScrollMagic.Controller({
            globalSceneOptions: {triggerHook: "onCenter"}
        });
    var scene = new ScrollMagic.Scene({
            duration: 300,
            offset: 100
        })
        .addTo(controller)
        .addIndicators();
});

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