Jump to content
Search Community

Animation on Scroll - Timeline is playing 2 times instead of 1

Sichtweise test
Moderator Tag

Recommended Posts

Hey guys,

 

i know you have a lot of trouble with the release of version 3 but maybe anyone have time and give me a hint.

 

I have builded a Timeline for Scrollanimation. The Animation should run on scroll 1time. After its finished it should wait for a new scroll-event  and play with new randoms. All is working fine but the Animation is playing 2 times and i did not understand why.

 

Thanks a lot!

See the Pen zYYMreQ by larskuenzel (@larskuenzel) on CodePen

Link to comment
Share on other sites

Hey Sichtweise and welcome to the GreenSock forums.

 

A few notes:

  • I recommend GSAP's delayedCall over a setTimeout for the increased reliability. 
  • I personally prefer using GSAP's .set() over jQuery's .css() (jQuery is not really necessary too helpful in most projects these days) but you can use whichever.
  • In GSAP 3 you should be using gsap.timeline instead of TimelineMax
  • The duration should go in the vars parameter in GSAP 3. 

Now to the core of your question: Why does it fire twice? 

You can figure it out yourself by console.logging the values of window.scrollY, scrollYOld, and complete inside of your function that checks whether or not to run your animation. You will notice that both times window.scrollY != scrollYOld. This is because in your logic you are updating scrollYOld as soon as you run the animation instead of after the last update to the scroll position. So if you update scrollYOld inside of your onComplete (like where you update complete) it will work as you want it to.

 

See the Pen gOOQmxr?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
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...