How to ScrollMagic

ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.
Like Superscrollorama it relies on the Greensock Animation Platform (GSAP) to build animations, but was developed with specific regard to former shortcomings.

ScrollMagic Examples

See the Pen ScrollMagic Wiki Tutorial : Basic Pin by Dennis Gaebel (@grayghostvisuals) on CodePen.1395


See the Pen ScrollMagic Wiki Tutorial : Anchor Navigation by Dennis Gaebel (@grayghostvisuals) on CodePen.1395


See the Pen ScrollMagic Wiki Tutorial : Basic Tween by Dennis Gaebel (@grayghostvisuals) on CodePen.1395


GitHub Documentation

Since the summer of 2014, I’ve been helping Jan Paepke creator of ScrollMagic write tutorials and articles for the documentation available on GitHub. I’ve put together all my demos on CodePen under a collection titled “ScrollMagic Tutorials”. If at anytime you notice the documentation or code demos are out of sync and in need of updating please let Jan or I know and we’ll make sure that’s taken care of. You can also pitch in and reach out if you’d like to help as well!

Hopefully by making the docs extremely trusted and easy to understand the ScrollMagic project can alleviate the high learning curve some feel is a barrier from getting started. Feel free to leave questions here regarding help or requests you have that lie outside the project’s issue tracker. If you need to know where to start we’ve made sure to provide everyone with a great getting started guide.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.
  1. ❧ Skythe shouted:
    2015/03/16 • 6:14 pm

    a) Some (basic!) code examples in the wiki seem to be outdated. They dont work and even throw errors.

    b) Sorry to say, but I’m not even able to queue 2 basic list elements for a vertical slide effect following your examples and wiki. Something about the offset and duration logic seems to be off.

    1. Yes, the current examples and documentation are somewhat out of sync since Jan who is it’s creator released v2.0.0. Those demos will be updated in the coming future. It’s also good to note that GreenSock was removed and Velocity.js was put in it’s place.

      1. ❧ Skythe shouted:
        2015/03/17 • 9:25 am

        Oh I see, thanks. Is there any current documentation or example online? Any place I can look things up?

      2. Is there something in particular you’re trying to achieve? Feel free to leave me a short summary and I’ll try and help you get started.

  2. ❧ Skythe shouted:
    2015/03/17 • 2:15 pm
    1. Is there something in particular besides the URL? Obvious thing I can see is an error in the console about Uncaught SyntaxError: Unexpected end of input http://cl.ly/image/2V2R1l3U2346

  3. ❧ Skythe shouted:
    2015/03/18 • 11:47 am

    Oh, sorry. I’m trying to recreate a similar shutter effect with ScrollMagic. You do see the 5 fullscreen “stages” moving out the top of the screen while scrolling down, right?

    1. I took my paneling demo above and updated it to ScrollMagic 2.0.1. LMK if that example helps you get off to the right start.

  4. ❧ Martijn shouted:
    2015/05/03 • 8:30 pm

    Hi I would like to show a couple of buttons while the scroll is between #section-1 and #section-2 with ScrollMagic.
    But I can’t seem to find out how to go about this using the documentation. Could you point me in the right direction?

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/01/02