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.
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.
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.
Oh I see, thanks. Is there any current documentation or example online? Any place I can look things up?
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.
Yes, there is. 🙂 http://wdch10.laphil.com/wdch10/index.html
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 inputhttp://cl.ly/image/2V2R1l3U2346Oh, 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?
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.
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?