Scrollmagic Cheat Sheet printable pdf download

ScrollMagic Cheat Sheet

DEMO:

GITHUB:

DOCUMENTATION:

The javascript library for magical scroll interactions.

CDN:

Controller

Scene

Multiple Scenes

// Create a controller - vertically scrolling window

// Create a scene and add it to controller

// Loop through ‘.project’ elements (jQuery loop)

var controller =

new

ScrollMagic.Controller();

var myScene =

new

ScrollMagic.Scene().addTo(controller);

$('.project').each(function(){

// Create a scene for each project

// Create a controller with a custom options

// Create a scene with custom options

var myScene =

new

ScrollMagic.Scene({

var controller =

new

ScrollMagic.Controller({

var myScene =

new

ScrollMagic.Scene({

triggerElement: this,

container: 'window',

// main container for scrolling

duration: 0,

// duration in px eg. 300, 0 = autoplay

triggerHook:

0.8

vertical: true/false,

// false = horizontal

duration: '100%',

// resposive duration in %

})

globalSceneOptions: {

// options for every scene

offset: 100,

// offset trigger position by 100px

.setClassToggle(this, 'fade-in')

triggerHook: 'onLeave'

triggerElement: '#main',

// what will trigger scene

.addTo(controller);

triggerHook: 0.5,

// 0=top, 0.5=middle, 1=bottom

});

refreshInterval: 100,

// set to 0 to disable

triggerHook: 'onEnter'

or 'onCenter'or

'onLeave',

loglevel:

reverse: true/false,

// plays scene on the way up?

With GSAP

});

loglevel:

// 3 = errors, warnings, debuginfo

});

// add a single tween directly

// Add previously defined scene or scenes

scene.setTween(TweenMax.to('#obj'), 1, {x: 100});

Toggle Class

controller.addScene(scene);

controller.addScene([scene,

scene2]);

// add a signle tween via variable

// add 'myclass' to 'my-elem' during a scene

var

tween

= TweenMax.to('#obj'), 1, {x: 100};

scene.setClassToggle('#my-elem',

'myClass');

// Add a newly created scene

scene.setTween(tween);

controller.addScene(new

ScrollMagic.Scene({

// add multiple classes to multiple elements

duration

// add a timeline to a scene

scene.setClassToggle('.classChange',

'class1

class2');

}));

var

timeline

= new TimelineMax();

timeline.to('#obj', 1, {x: 100})

// classes will remain on element outside of a scene

// Remove a scene

.to('#obj', 1, {y: 200});

scene.removeClassToggle(false);

controller.removeScene(scene);

// Destroy with scene reset

scene.addTween(timeline);

Pin Element

controller = controller.destroy(true);

// Enable or Disable controller

// pin element for the duration of a scene

Free Online Course

controller.enabled(true/false);

scene.setPin('#my-pin');

// Update a specific scene immediately

SCROLLMAGIC 101

// pin element but don’t push followers

controller.updateScene(scene, true);

scene.setPin('#my-pin', {pushfollowers:

false});

The Quickest Way To Get

Debugging with addIndicators Plugin

Events

Started With ScrollMagic

scene.addIndicators({

// fire a callback function at the respective event

name: 'triggerDown',

// custom name for your scene

scene.on("change update progress

indent: 520,

// indent from the browser edge

start end enter

leave", callback);

colorStart: 'yellow',

// custom color - colorEnd

// enter, start, progress - scrolling down

colorTrigger: 'yellow',

Click the link above and start now!

// progress, start, leave - scrolling up

})

Created with ♥ by Petr Tichy, happy scrolling!

https://

Scrollmagic Cheat Sheet

Related Articles

Related forms

Related Categories