Animation jumping all over the place!?

[NubieHere]

I have a logo split into three parts. And wan't to make some parts  disappear (and reappear) based on scroll. But the animation is acting totally weird (not doing the thing I ask it to – yeah, I know it does. But the logic kind of always goes out the window with this).

 

(couldn't make codepen, jsfiddle or js bin work due to the scroll ... )

 

But this SHOULD be fairly simple. Make some part disappear, and have the container move up a bit after a delay, and the reverse ...

 

let duration = 1;

 

$window.scroll(function () {
    if ( $window.scrollTop() > 200 ) {
        TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } );
        TweenMax.to('.logo', duration, { top: '-50px', ease: Power0.easeNone, delay: duration } );
    } else {
        TweenMax.to('.logo', duration, { top: 0, ease: Power0.easeNone } );
        TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 1, ease: Power0.easeNone, delay: duration } );
    }
});

 

 

I simply don't get why the animation seem random; showing, hiding, moving up and down. Never ending in a state expected.

 

Anyone got any idea what I'm missing (again)?

[mikel]

Hi blaasvaer,

 

Please provide a very basic CodePen demo as explained here: http://greensock.com...a-codepen-demo/
 
It is difficult to guess from just looking at the code snippet you provided what the problem is. 

 

Kind regards

Mikel

[PointC]

Hi @blaasvaer

 

I don't know if you typed that code snippet or it's a copy and paste from your actual project, but there are typos in two tweens. You're missing a closing quote mark for the tween targets and a comma between the target and the duration.

//this
TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } );

 

// should be this
TweenMax.to('.logo span.one, .logo span.three', duration, { opacity: 0, ease: Power0.easeNone } );

 

The same typo is present on the span one and span three tween in the else statement. I'm not sure if that is the problem without seeing the actual working code though. As @mikel mentioned, a CodePen would be most helpful.

 

Happy tweening.

[NubieHere]

Thanks, but those are just typos. The code is running, but just acting weird. I actually think it may have to do with the animation being retriggered on every scroll event. Will try to check for isTweening() or the like ... but not until tomorrow ; )

[OSUblake]

Creating animations in a scroll event is generally a bad idea, and may result in unexpected behavior, which is probably what's going on with your animation.

 

Here's a better way to do that. I'm using requestAnimationFrame() to throttle the updates, which calls a function to change the reversed state of the animation. It could be optimized a little more. For example, there's no reason to change the state of the animation if the scroll position is at 5000px, and you only need to toggle it at 200px, but it should help you get started.

 

See the Pen e4b62be3425f379a6c580b80d43ee424 by osublake (@osublake) on CodePen

 

[NubieHere]

Thanks a lot. I'll give that a shot.