Question

I’m building a webpage where you can scroll-sideways or use buttons for “new pages” (note; when you use buttons, you slide through the previous pages with speed, it doesn’t load a new page).

When a designated page comes into view, it should trigger an animation I made with flash.
I converted it via swiffy, and it works. Triggering the animation works just fine but the problem is: when for example you press the button wich would lead you to the page AFTER the page with the animation, the “page” still triggers because its been in view one time.

Now I’m trying to use a timeOut to delay the animation so that when you scroll by it, it shouldn’t trigger except for when you linger on the page for more than X seconds.

Here’s my current script:

    var $AnimatieAan = false;
    var $Zichtbaar = false;
    $(window).scroll(function(){
        $e = $('#searchEngine');

        var visible = $(window).scrollLeft()+window.innerWidth>$e.offset().left&&$(window).scrollLeft()<$e.offset().left+$e.width();

            if(visible)
            {
                $Zichtbaar = true;
                var Timer = setTimeout(function()
                {
                    console.log('timerstart');

                    if($Zichtbaar)
                    {
                        //$Zichtbaar = true;
                        console.log($Zichtbaar)
                        $AnimatieAan = true;
                        $Zichtbaar = false;
                        if($AnimatieAan)
                        {
                            var stage = new swiffy.Stage(document.getElementById('searchEngine'), mexaleSearch);
                            stage.start();
                            console.log(visible);
                            $AnimatieAan = false;
                        }
                        else 
                        {
                            clearTimeout(Timer);

                            console.log('clearTimeout');
                            $Zichtbaar = false;
                            $AnimatieAan = false;
                            stage.stop();
                        }
                    }                       
                } , 2000 );
            }

Clarification on how the scrolling works, a working version is on http://www.mexale.com

Any help would be greatly appreciated!

Answer 1

There are a few problems here.

1. Because Timer is a local variable inside the scroll handler, you’ll get a fresh, totally unrelated variable every time a scroll event happens. That means that the value of Timer is not remembered from one event to the next. To fix this, make a single var Timer outside the scope of the scroll handler function.

2. The scroll handler doesn’t do anything if visible turns out to be false. When the user scrolls so that the animation isn’t visible, you want two things to happen: (a) the timeout should be cancelled; (b) the swiffy animation should be stopped. Instead, nothing happens, because the if (visible) block doesn’t have an else block.

3. At the point where the code says if($AnimatieAan), the variable $AnimatieAan is always true. (We just set it to true two lines before.) So the else block there can’t run; it’s impossible.

The code you have in that else block looks about right, but it is definitely attached to the wrong if.