Adding a method to destroy superscrollorama.

johnpolacek / superscrollorama

The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js

http://johnpolacek.github.com/superscrollorama/

2.39k stars 540 forks source link

Adding a method to destroy superscrollorama. #10

Closed hichtibidi closed 11 years ago

hichtibidi commented 12 years ago

Is it possible to add a method, like the scrollorama "destroy" one (https://github.com/johnpolacek/scrollorama/pull/16)

Thanks

Sertion commented 12 years ago

How should this manifest itself? What should actually happen when you "destroy" your Superscrollorama instance?

One (simple?) way of doing it could be to add a namespace to the scroll bind that keeps superscrollorama up to date and then let the moving items stay in place where they where when the instance got killed.

Another way is to restore all back to their "default css"-state. I don't know for sure how one would do that.

A third way is to complete all animations. To set the progress of all of them to 1.

A fourth way is the same as the above, but to set them all to progress 0.

All of them requires some rewriting of the pin function.

hichtibidi commented 12 years ago

I think the easier way is your first solution. In fact my main problem is when we resize the window. For exemple, I have the following line :

scrollorama.addTween(200, TweenMax.to($('#my_block'), 1, {css:{left:$(window).width()}, ease:Circ.easeIn}), 1000);

If the user resize the window, my "$(window).width()" is now wrong, so I would like to implement in the "onResize" handler something to destroy the superscrollorama and then recreate it with the new proper values.

The easier way should be to be able to "update" some scrollorama tweens, but I dont' think it's possible (maybe I'm wrong ?)

Sertion commented 12 years ago

I have been meaning to look into exposing the internal arrays of tweens for quite some time now, but work is keeping me busy.

The basics of my plan was to simply see what happens if you expose the internal animObjects and pinnedObjects arrays as part of the superscrollorama instance. The problem I expect is that of making sure the "updated" tweens, that may now replace their old counterparts, "understand" in what state they should be initiated as, but I might be over cautious.

Another solution might be to try to convince the greensock-guys to add the capability of using functions as css attribute definers. This might already work, but i can not find it documented.

Sertion commented 12 years ago

I did some digging and this can be done using existing features in Greensock TweenMax.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                height: 2500px;
                position: relative;
                margin: 0;
            }
            #mover {
                position: absolute;
                background: orange;
                padding: 5px;
                font-size: 10px;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="mover">I am<br/>Mover.</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="https://raw.github.com/johnpolacek/superscrollorama/master/js/greensock/TweenMax.min.js"></script>
        <script src="https://raw.github.com/johnpolacek/superscrollorama/master/js/jquery.superscrollorama.js"></script>
        <script>
            (function(){
                var sc = new $.superscrollorama();
                var tween = new TweenMax($('#mover'), 0.5, {
                    css: {
                        left: $(window).width() - 240,
                        top: 600
                    }
                });
                sc.addTween(0, tween, 400)

                $(window).on('resize', function(){
                    tween.updateTo({
                        css: {
                            left: Math.round($(window).width() - 240) * 1,
                            top: 600
                        }
                    })
                });
            }())
        </script>
    </body>
</html>

The issue of being able to destroy a superscrollorama instance is not yet discussed or completed, but the actual issue discussed in this thread should be resolved.

omikron commented 12 years ago

Hello, I am having trouble as well figuring out how I would handle screen resizes.

I have tried your code and it does not seem to work.

edit:

Got it kind of working by adding invalidating the tween first. I added tween.invalidate(); before the updateTo tween. This only works if you resize the window when the tween hasn't started yet, otherwise you get strange positioning.

Is there anyway to get this to work on a whole set of tweens in a timeline?

http://jsfiddle.net/RuVxr/7/

rposborne commented 11 years ago

I think this has more of a need in long running Sites, where the dom isn't being refreshed.

We are currently using turbolinks, and we have no clean way to shut down superscrollorama, and unbind the tracking events, when we switch out our dom body

janpaepke commented 11 years ago

A removeTween, removePin method will be added in future updates. Destroying the Superscrollorama instance itself should not be necessary.

janpaepke commented 11 years ago

I just added removeTween and removePin. See documentation for details. :)

Hope this helps.

regards, Jan

zachshallbetter commented 11 years ago

I actually have Superscrollorama firing twice when animating in and out of a page. It would be useful if we could delete the entire timeline with a "destroy" method.

k33n commented 11 years ago

This probably isn't the best way to go about it but it works.

superscrollorama.destroy = function () {
  $(window).off('scroll');
  delete superscrollorama;
};

zachshallbetter commented 11 years ago

@k33n I tried your method and was still seeing it fire. I was thinking wiping out the pinned and animated elements from the array would work, but still no dice.

superscrollorama.destroy = function () {
    animObjects = [];
    pinnedObjects = [];
};

k33n commented 11 years ago

This is what @rposborne did originally. In our case we needed to destroy when Turbolinks fetched new pages.

The change to superscrollorama:

 superscrollorama.destroy = function () {
      animObjects = []
      // Unbind the window scroll event
      $(window).off('scroll');
      delete superscrollorama;
    };

Then

$(document).on("page:fetch", function() {
    window.tweenController.destroy();
});