How to Do Wipe and Slide Effects as Seen in the Demo

[etangins]

In the demo http://janpaepke.github.io/ScrollMagic/ it shows a wipe effect and a slide effect. I don't see any examples with either of those effects. Can anyone provide me with some guidance on how to make one of them?

Is it just a tween that triggers the effect and then the wipe and slide itself is regular JQuery or is there something in the library for those effects as well?

[janpaepke]

Hi Etan,

Basically how ScrollMagic works in terms of Animation is this: You create a Tween or a Timeline of Tweens using GSAP (TweenMax). Then you attach it to a ScrollScene and ScrollMagic takes over control.

So the swipe an wipe effects are basically just tweens of DIVs that are controlled by ScrollMagic within a pinned container. Here's how you build the animations: Wipe (See Demo Sourcecode Line 261): The div is overflow:hidden and starts at a width of 0% and ends at a width of 100%. Swipe (See Demo Sourcecode Line 263): The div is positioned top: -100% and then animated to 0%.

hope this helps. regards, J

[etangins]

That makes sense except couldn't you just use scrollTop to test scroll position and then carry out the action without ScrollMagic? On Apr 28, 2014 3:04 AM, "Jan Paepke" notifications@github.com wrote:

Hi Etan,

Basically how ScrollMagic works in terms of Animation is this: You create a Tween or a Timeline of Tweens using GSAP (TweenMax). Then you attach it to a ScrollScene and ScrollMagic takes over control.

So the swipe an wipe effects are basically just tweens of DIVs that are controlled by ScrollMagic within a pinned container. Here's how you build the animations: Wipe (See Demo Sourcecode Line 261): The div is overflow:hidden and starts at a width of 0% and ends at a width of 100%. Swipe (See Demo Sourcecode Line 263): The div is positioned top: -100% and then animated to 0%.

hope this helps. regards, J

— Reply to this email directly or view it on GitHubhttps://github.com/janpaepke/ScrollMagic/issues/58#issuecomment-41528690 .

[janpaepke]

Well like with every plugin or framework: of course you could achieve the same without it. And you are right, what ScrollMagic essentially does is test for the scroll position and react to it. But at the same time it makes everything more comprehensible, readable, easier and stable across browsers.

You'll see the advantages when creating more complex animations and sometimes pinning them. Especially the latter is a huge hassle without ScrollMagic.

think about:

• having the trigger position not at the top of the page but at the center or the bottom (triggerHook)
• using html elements as triggers (triggerElement)
• mobile applications
• changing your scene parameters on the fly
• pinning elements inside containers (fixed elements are related to body, not their parent)
• debugging your page
• event management

and so on.

basically just go through all the examples and really think how complicated it would be without ScrollMagic and then bask in the joy that it can be done with 2-3 lines.

If you don't believe me just try to recreate the basic tweening example without ScrollMagic. :)

[etangins]

Right now I'm going through all the examples and comparing them to the documentation to try to familiarize myself, but it seems like there is a lot to learn and code to sort through and I'm not sure where to start.

The code mentions all sorts of controller and triggers and I'm still confused what they are and which to use. Is that the best way to learn ScrollMagic by comparing examples to documentation or is there a better way? Would it make more sense to just use the already made examples as templates rather than writing my own new code, or is there a far wider set of features that I can do by writing my own code.

I completed the JQuery course on codeacademy if that helps and I'm learning the Jump Start GSAP JS from greensock.com which I think is on the right track.

[janpaepke]

Extending an example can be a good starting point but if you really want to learn I strongly suggest to make your own example from scratch. Here's the basic principle of ScrollMagic:

• You create one controller per scroll container using new ScrollMagic(). This takes care of checking the scroll position etc..
• In most cases there will be only one controller, because usually the page is the only scroll container.
• Then you create scenes using new ScrollScene() and add them to the scroll container. The scenes offer various options and methods to make them behave the way you want them to.

Here's a small tutorial for you. I strongly urge you not to copy and paste this, but type it on your own. It's far better in terms of learning. Create a very basic html page, maybe just some divs so you have something to scroll. Now embed jQuery, TweenMax and ScrollMagic.

The most basic setup is this (nothing happens, but no errors in the console either):

$(document).ready(function($) {
    var controller = new ScrollMagic();
    var scene = new ScrollScene();
    scene.addTo(controller);
});

Note, that this

var scene = new ScrollScene();
scene.addTo(controller);

is the same thing as this:

var scene = new ScrollScene()
           .addTo(controller);

This is due to a programming style called "method chainging", which is also supported by jQuery.

Now let's add an animation, that changes our body's color.

$(document).ready(function($) {
    var controller = new ScrollMagic();
    var scene = new ScrollScene()
                .addTo(controller);
    TweenMax.to("body", 1, {backgroundColor: "blue"});
});

Now when you refresh you'll see that the color changes instantly, but we want it to change only if we start scrolling. So let's try this:

$(document).ready(function($) {
    var controller = new ScrollMagic();
    var scene = new ScrollScene()
                .addTo(controller)
                .setTween(TweenMax.to("body", 1, {backgroundColor: "blue"}));
});

Now once we start scrolling the animation fires.

Now take it from here!

• try to store the tween in a variable instead of directly adding it (more readable)
• give the scene a duration, so the animation doesn't just play, but is related to the scroll position.
• give the scene an offset so it doesn't start right at the beginning
• add the debugging extension so you have a better idea of what's happening when
• add an element to the dom that serves as a trigger for the scene
• change the color of that element, once it's reached

hope this helps.

regards, J

[etangins]

Thank you for all your help. It's definitely cleared things up. Would the Jump Start GSAP JS tutorial be useful. It seems to cover all the concepts in ScrollMagic. In fact, I was just curious was aspects ScrollMagic adds to the GSAP that I could use?

[janpaepke]

Hi! The GSAP Jump Start definitly makes sense to look through! Also this: http://www.greensock.com/get-started-js/ You have to regard GSAP and ScrollMagic as two different workers in a factory. Worker A creates and handles animations and worker B tells the other one when to go where. And lucky you: You are the boss of both.

regards, J

In case it's unclear: A is GSAP and B is ScrollMagic.

[MrNagoo]

I am using the section wipes on a website. However, any content that I add after the wipes, does not make the wipes go away. The last wipe just stays there, and even covers my footer. I have a duration too. any suggestion?