Is it possible to add a method, like the scrollorama "destroy" one (<a class="issue-li

This probably isn't the best way to go about it but it works. <pre class="notransl

Adding a method to destroy superscrollorama. about superscrollorama HOT 12 CLOSED

johnpolacek commented on September 24, 2024

Adding a method to destroy superscrollorama.

from superscrollorama.

Comments (12)

Sertion commented on September 24, 2024

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.

from superscrollorama.

hichtibidi commented on September 24, 2024

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 ?)

from superscrollorama.

Sertion commented on September 24, 2024

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.

from superscrollorama.

Sertion commented on September 24, 2024

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.

from superscrollorama.

omikron commented on September 24, 2024

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/

from superscrollorama.

rposborne commented on September 24, 2024

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

from superscrollorama.

janpaepke commented on September 24, 2024

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

from superscrollorama.

janpaepke commented on September 24, 2024

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

Hope this helps.

regards,
Jan

from superscrollorama.

zachshallbetter commented on September 24, 2024

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.

from superscrollorama.

k33n commented on September 24, 2024

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

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

from superscrollorama.

zachshallbetter commented on September 24, 2024

@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 = [];
};

from superscrollorama.

k33n commented on September 24, 2024

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();
});

from superscrollorama.

Adding a method to destroy superscrollorama. about superscrollorama HOT 12 CLOSED

Comments (12)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent