Jump to content
Search Community

Animation jumping all over the place!?

NubieHere test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

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.


  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...