Tween between two classes, but in an if statement not with a trigger

[theirf]

I think this script is exactly what I'm looking for and am so thankful for it.

I want to tween from one class to another class as scrolling happens if a condition is true instead of when a trigger element hits a position.

Simplified, the condition is when scrolling up. So I want to do when scrolling up, tween from class A to class B and then else tween from B to A as scrolling is happening.

Is this possible?

I would greatly appreciate any and all help!

[janpaepke]

Hi irf,

there are three ways one could approach it. One would be using the feature that is one of my todos: having different tweens when scrolling up than when scrolling down. But I haven't implemented it yet so that's out. :) But in this case it's not even necessary.

Second: Write a custom callback and attach it to the progress event. Within the callback you could react to the scroll direction.

But there's actually a much easier way: Instead of replacing classes, TweenMax can also add them. And when reversing the tween the added class will be removed again. So here's an example of tweening color using classes. Set up the CSS like this:

#mydiv.A {
    background-color: red;
}
#mydiv.A.B {
    background-color: blue;
}

And then make a tween like this:

TweenMax("#mydiv", 1, {className: "+=B"});

If you attach this tween to a scroll scene this will have this result: When scrolling down it will be tweened from red to blue and when scrolling back up it will be tweened from blue to red. So this is what you are asking for - down: A to B, up B to A.

Bare in mind, that from my experience tweening classes does not work on child elements. So if you have elements inside the div, that have something like this:

#mydiv.A #childdiv {
    width: 100px;
}
#mydiv.B #childdiv {
    width: 200px;
}

The child div will probably not be tweened but jump to the new width, once the class tween of the parent is complete.

Also make sure to check out the advanced tweening example. There's one example where I use this exact technique.

Hope this helps.

regards, Jan

[theirf]

Thank you for the help!

I'm getting the same error multiple times, that TweenMax is not defined.

Here is my code:

controller = new ScrollMagic();

var tween = TweenMax('#searchInput', 1, {className: 'stickySearch'}); var scene = new ScrollScene.setTween(tween).addTo(controller);

What am I doing that is wrong?

Regards, Irfan Mir.

[janpaepke]

Hiho,

well it seems pretty obvious, no? You probably don't have the GSAP loaded... Make sure you included it in your header.

Oh and you are also missing two Brackets. The scene init should be like this:

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

regards, J

[theirf]

GSAP?

I have the script in the body. Does it need to be in the head? On Mar 9, 2014 1:02 PM, "Jan Paepke" notifications@github.com wrote:

Hiho,

well it seems pretty obvious, no? You probably don't have the GSAP loaded... Make sure you included it in your header.

regards, J

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

[janpaepke]

Hi,

as stated on multiple occasions ScrollMagic is dependent on the Greensock Animation Platform (GSAP). It doesn't really matter where you include it, but it needs to be loaded for ScrollMagic to work. Get it here: http://www.greensock.com/gsap-js/

regards, J

[theirf]

I've included jquery.gsap.min.js and tweenmax.min.js, but not I'm getting an error cannot set property 'vars' of undefined.

My implementation is the same as above. Am I missing something?

Thank you for the help!

Regards, Irfan Mir.

[janpaepke]

You don't really need the gsap jquery plugin. That's only when you want to use jquery's animate function and have it enhanced with GSAP.

Please copy all your javascript code and also tell me which file & line throws the error.

Alternatively provide a demo of your page, so I can have a look.

J

[theirf]

Okay.

Here is the link to the script:

Then in that file is tweenMax and scrollMagic, here: http://pastebin.com/y7NrBjvu

Then here is my implementation:

controller = new ScrollMagic();

if(scrollUp){ var tween = TweenMax('#searchInput', 1, {className: 'stickySearch'}); var scene = new ScrollScene.setTween(tween).addTo(controller); } else{ var tween = TweenMax('#searchInput', 1, {className: 'slideBack'}); var scene = new ScrollScene.setTween(tween).addTo(controller); }

And I'm getting this error on scroll up:

1. Uncaught TypeError: Cannot set property 'vars' of undefined in jquery.scrollmagic.min.js:4

Regards, Irfan Mir.

[janpaepke]

Dude.

I'm not even sure where to start.

First of all and most importantly it's against the license agreement to remove the copyright and license notices. This goes for both ScrollMagic and GSAP. You get to use this great Open Source Software for free. Please respect the licenses. Why would you even copy them in one file?

Secondly why do you do a differentiation between scrolling up or down? I told you earlier, that this is really not necessary for what you are trying to achieve.

Third: I asked you for your complete javascript. Obviously there's something more, because somewhere I'm guessing you set "scrollUp".

Forth (and this is more of a style note): You shouldn't define the same variable multiple times. Either do a var tween, scene; before the brackets or use different variable names. But as I said in no 2. That's not even needed...

Fifth: You shouldn't use the minified versions for development. Because if you have an error (like in your case) there's no way of properly debugging it.

Sixth: You still have an error in the way you initialize the scene. Please read this reply again and correct your code. On that note always make sure to read the issues on github page, instead of your notification email, because when someone edits the post (like in this case) you will miss it.

And as per your error I suspect (and because of your setup its only a wild guess) that TweenMax can't find the element you are trying to tween. Make sure #searchInput is available when the script is executed. You do that by either putting the script tag below the element or wrapping your scripts in $(document).ready(function () { /* do stuff */ });

Lastly: Please don't take this personally but this is not a beginner level plug in. It might be advisable to get a firm grasp of javascript and jQuery before you attempt to build something with ScrollMagic.

I hope this helps, regards, J

[theirf]

I'm sorry, I think there is some confusion.

In the paste-bin, I didn't include the copyright and license information. In the actual file, I have it.

I need the differentiation between scrolling up and scrolling down because I tween between different classes.

There are 1,000+ lines of js in this site. I didn't include it all because I wanted to not overwhelm you and have you just help me with the scrollMagic.

Okay, thank you for the style note.

True, okay, I'll switch to development versions.

Everything is in a document.ready, I've been developing with jQuery for quite some time. I know to wrap everything in a doc ready. That is a day zero lesson.

Thank you, but I'm not a beginner. I'm sorry if it seemed that way. I won't take it personally.

Thank you for the help.

Regards, Irfan Mir.

[theirf]

Thank you for the help, I got it working.

[janpaepke]

Hi @theirf,

1. good to hear. :)
2. you won't need that even if you tween between different classes. Just read my above post.
3. I see, sounds reasonable.

Glad you got it working.

regards, Jan

[janpaepke]

Also please share what was the mistake, so others might benefit from it.

[theirf]

It was a stupid mistake, as pointed out earlier, I was missing parentheses.

On 9 March 2014 15:40, Jan Paepke notifications@github.com wrote:

Also please share what was the mistake, so others might benefit from it.

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

Regards, Irfan Mir.