Clearing gsap timelines on window resize

[RealMakAttak]

Hello all,

 

Hope you can help,

 

I made a standard timeline to use with scrollmagic. I just want to kill it and use different values for y on window resize so I passed the timeline variable in to the resize function and tried to kill it but it says the timeline is undefined....why is this?

 

Thanks

 

 

 

  secondtl = new TimelineMax();

                 secondtl.from(".image-two", 2, {y:window.yTranslateFrom, ease:Power0.easeNone})

                         .to(".image-container-two", 2, {y:window.yTranslateToOne, ease:Power0.easeNone})

                         .to(".image-two", 2, {y:window.yTranslateToTwo, ease:Power0.easeNone}, "-=2")

                       

            var triggerElementOneOuterHeight = $("#explanation-box-one").outerHeight(true);

            

            

            var secondOne = new ScrollMagic.Scene({

 

                triggerElement: "#explanation-box-one",

                triggerHook: 1,

                offset: triggerElementOneOuterHeight,

                duration: "200%"

 

 

 

            })

         .setTween(secondtl)

         .addIndicators()

         .addTo(controller);

 

 

 

 

$( window ).resize( function(controller, secondtl){

    

    

       var x = secondtl.kill();

 

 

});

   

    

    

 

 

[Dipscom]

Hi RealMakAttak,

 

Any chance you could put together a reduced case scenario of your intention? It's just very hard to troubleshoot looking at a snippet of code.

 

Also, is there a reason why you are declaring x as a var inside your resize() function?

[RealMakAttak]

Hi RealMakAttak,

 

Any chance you could put together a reduced case scenario of your intention? It's just very hard to troubleshoot looking at a snippet of code.

 

Also, is there a reason why you are declaring x as a var inside your resize() function?

 

Hello Dipscom,

 

Thank for your reply, I'm not really sure if I could as it's quite complex thing, I know what you mean though. Its basically boils down to the fact that any time I try top access any object inside my windows resize function, it comes back as undefined...I'm not the best javascripter. have I got the scope right?

 

Regarding the declaration of x, not really, I tried it without it and it makes no difference.

 

Thanks, i'll see if I can get a codepen in the meantime

[Dipscom]

That's the crux of the question, really. 

 

From the snippet the scope should be there (although you are not declaring var before the timeline) but I can't say for sure.

 

The codePen doesn't need to be a fully fledged thing. The less code to show what you are trying to do, the better. That way we'll be able to spot whatever is wrong with the setup. And if there's no error in the Pen, then, you'll know it works and the bug is somewhere else in your code. 

[RealMakAttak]

That's the crux of the question, really. 

 

From the snippet the scope should be there (although you are not declaring var before the timeline) but I can't say for sure.

 

The codePen doesn't need to be a fully fledged thing. The less code to show what you are trying to do, the better. That way we'll be able to spot whatever is wrong with the setup. And if there's no error in the Pen, then, you'll know it works and the bug is somewhere else in your code. 

 

I read somewhere if you don't put the var it makes it global. I had it there before with the var and again no change, I really can't get my head around it! I'll work on that codepen

 

Thanks for your help

[Jonathan]

Hello RealMakAttak

 

This link should make clear about declaring var before your new variable

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

 

It is best practice to always declare your new variables with var or const. This way you show your intent and don't have to worry about cross browser JavaScript parsing issues.

 

[RealMakAttak]

Hello RealMakAttak

 

This link should make clear about declaring var before your new variable

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

 

It is best practice to always declare your new variables with var or const. This way you show your intent and don't have to worry about cross browser JavaScript parsing issues.

 

 

Thanks Jonathan,

 

Note taken. Any ideas on why I cannot seem to get the object defined inside the function?

[OSUblake]

Global or not, you won't be able to access it like that because you've introduced a new local variable called secondtl to your resize function, which is not the one you created earlier. Look at this simple example. X is undefined because I just created a new local variable called x inside that function. I'm not passing in a value for x, so there's nothing there. It's empty... undefined.

var x = 5;

function logX(x) {
  console.log(x) // => undefined
}

logX();

But this would work...

var x = 5;

function logX(x) {
  console.log(x) // => 5
}

logX(x);

You can name the parameters of a function whatever you want... isn't that right @Dipscom?

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/?p=55027

 

So what you're thinking should be the 'controller' is actually the event object being passed in from jQuery. There is no second parameter for a resize event, so secondtl will be undefined.

$( window ).resize( function(controller, secondtl) {
  console.log(controller); // => jQuery event object
});

Change the names of your parameters, and you should be good.

$( window ).resize( function(event) {
  secondtl.kill();
});

.

[Dipscom]

That is absolutely right OSUblake, with the added benefit that my head doesn't hurt when looking at it.

 

I did not, however, spot that he was creating a new variable in the resize.

[RealMakAttak]

@OSUBlake @Dipscom @Jonathan

 

Sorry I didn't reply sooner but have been away from my computer. Thank you so much for helping me with this, really appreciate it, I will try your suggestions and report back. Thanks again

[RealMakAttak]

Hello All,

 

Quick aside, how do a I tag people? I tried @username but doesn't seem to work...

 

Any way, OSUblake's answer was great and I have the scrollmagic controller and gsap timeline variables getting passed in to my onresize function perfectly now. I still cannot achieve my overall goal though and wondered if we might be able to figure this out.

 

I have a parallax site where some full page elements are being y translated by the entire height of the window (thus off the screen) using scrollmagic and gsap. What I would normally do is use y:"-100%" however, for reasons, this is not possible. What I to do instead is grab the height of the window and set the y value to this (achieving the same effect as y:"-100%") for example, "y:-windowHeight".

 

To make these animations responsive, I need to update these absolute tween values with the new windowHeight on resize. 

 

What I am trying to do is literally trying to destroy all aspects of scrollmagic and my gsap timelines and rebuild them onresize but it will not work, there seems to be remnants of previous tweens values...I have looked and tried everything to truly "erase" everything but to no avail.

 

Onresize I first destroy the entire scrollmagic controller and then seek(0) and then kill all of my timelines as below:

 

 

controlla.destroy(true);

   

    

w.seek(0);

x.seek(0);

y.seek(0);

z.seek(0);

  

   

w.kill();

x.kill();

y.kill();

z.kill();

 

 

Where am I going wrong? Is there a better way to achieve what I need than just "erasing" and rebuilding everything?

 

I'm anticipating problems already when resizing when already scrolled down the page as to where the new values will be preanimated...

[Dipscom]

To me, it sounds like all you need to do is rebuild the timeline on your window.resize.

 

It will overwrite all of the previously created timeline. You wouldn't have to call kill() or do anything fancy since you will be building a new timeline with the same arguments as before but different values.

 

As to a solution for when you already have scrolled down, you can record the progress, save it and jump back to that same point in time after rebuilding the timeline.

 

OSUblake has showed how to in another thread: check it out.

 

And if you find out how to tag people in the forums, let me know as I have no idea and would love to learn it.

[RealMakAttak]

To me, it sounds like all you need to do is rebuild the timeline on your window.resize.

 

It will overwrite all of the previously created timeline. You wouldn't have to call kill() or do anything fancy since you will be building a new timeline with the same arguments as before but different values.

 

As to a solution for when you already have scrolled down, you can record the progress, save it and jump back to that same point in time after rebuilding the timeline.

 

OSUblake has showed how to in another thread: check it out.

 

And if you find out how to tag people in the forums, let me know as I have no idea and would love to learn it.

 

Thanks Dipscom , I'll have a play around and report back with what I find. Appreciate the continued help.