Jump to content
Search Community

GSAP animation not completing on fast page scroll

Shehzad Asif test
Moderator Tag

Recommended Posts

Hi there

 

I have set up some animation based on scroll through "enter & leave" state. Everything works as expected except when I scroll the page fast like by pressing the home or end button then animation will not complete and elements will overlap over each other. I searched on the forum and found the partial solution by using "overwrite: true". It made the animation complete but I am using scaling of elements in it that does not go back to it's original scale 1. Attached is the codepen for better understanding.

 

Can someone pls explain what causing this behavior and how to prevent it so that when page is scrolled fast, the animation works all the way as supposed.

 

Regards,

Shehzad Asif

See the Pen abBbYwb?editors=1010 by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

Hey Shehzad. I recommend reading my article about animating efficiently. It should help you write more DRY (don't repeat yourself) code, especially in cases like this. I highly recommend using a loop to set up each of your sections. I also highly recommend reading the most common GSAP mistakes and most common ScrollTrigger mistakes as a couple of the things listed in them are very close if not what you're doing in your demo.

 

Additionally I highly recommend not using a new timeline each time. I would set it up to where each text has a timeline that has both the enter and reveal animations. Then you can use control methods in the ScrollTrigger callbacks to control the state of the timeline.

 

Here's how I would approach it:

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

 

I noticed that if you resize the browser then the positioning of your headings gets thrown off. That's completely unrelated to GSAP but I thought it was worth mentioning to you to make sure you notice :) 

  • Like 1
Link to comment
Share on other sites

Hi Zach

 

Today I understood the concept of the addlabel before that I was confused about that how it works and what is that was not fully clear. Thanks to you it is clear now to me.

 

I think my issue is not understood correctly. Your animation is quite different then mine.

 

My animation: 

1- Element entering whenever will enter from 100% down from its original position. No matter whether it is entering or entering back it will come from 100% down from original position and it will not scale up or down.

2- When leaving the element is going up 100% from original position and only when leaving it is scaling up. No matter whether it is leaving or leaving back it will go up 100% down from original position and scale up.

 

Your animation:

But in your demo you are playing or reversing the animations when leaving or entering not what I am doing. 

 

I tried to make it more clear what is the issue. If you see your demo with the below demo (removed "autowrite: true" from the first demo(forked) ) side by side, will get the point what I am talking about.

 

See the Pen qBqEdOK by ShehzadAsif (@ShehzadAsif) on CodePen

 

Regards,

Shehzad Asif

Link to comment
Share on other sites

Hi Zach

 

I was implementing the solution but got few other issues, kind of same as before (animation not completing & overlapping over each other).

 

1-  In my project both elements are coming from the same direction and vice versa. In that case enter and leave animation plays on the same time. So I put a delay so that coming element enters only after leaving element leaves. I tried different methods to delay to entering tween as mentioned in docs but nothing worked except what is in the below demo ( repeating it for every tween). Is there any better way to use delay for this kind of work.

 

2- If I scroll back before leave animation completes then animation is reversed instead of playing from start (like at box-1).

 

3- If you scroll fast where enter and leave animation are triggered at the same point (like at box-6), you will notice that most of the time animation will not be completed and both elements will remain in the viewport overlapping over each other.

 

4- And lastly if you press the home or end button then animation will not be completed as well like my first demo.

 

Why is it happening and how this can solved?. 

 

f

See the Pen zYovRNo?editors=0110 by ShehzadAsif (@ShehzadAsif) on CodePen

 

Regards,

Shehzad Asi

Link to comment
Share on other sites

41 minutes ago, Shehzad said:

If I scroll back before leave animation completes then animation is reversed instead of playing from start (like at box-1).

Nothing is reversing in your pen. I think you just have the sign wrong in your tween - I think it should be

.from(heading, {
  opacity: 0,
  yPercent: 100, // Positive 100, right?
  duration: 1
})

 

41 minutes ago, Shehzad said:

Is there any better way to use delay for this kind of work.

One way would be to add it to the relevant tween in your timeline.

 

41 minutes ago, Shehzad said:

If you scroll fast where enter and leave animation are triggered at the same point (like at box-6), you will notice that most of the time animation will not be completed and both elements will remain in the viewport overlapping over each other.

Applying the delay to the tween in the timeline fixes this issue.

 

See the Pen YzpyaeK?editors=1000 by GreenSock (@GreenSock) on CodePen

 

41 minutes ago, Shehzad said:

if you press the home or end button then animation will not be completed as well like my first demo.

I have no idea what "home" or "end" button you're talking about as there is nothing like that in your pen.

 

My guess is that they are buttons that move the scroll position of the page? If that's the case, they likely don't work due to your smooth scrolling. You'll need to change whatever method of scrolling that they use to use the smooth scrolling library's scrolling animation.

Link to comment
Share on other sites

Hi Zach

 

I attached videos for better understanding of the issue. I hope my issue is now more clear.

 

On 2/4/2021 at 2:48 AM, ZachSaucier said:

Nothing is reversing in your pen. I think you just have the sign wrong in your tween - I think it should be


.from(heading, {
  opacity: 0,
  yPercent: 100, // Positive 100, right?
  duration: 1
})

Pls check 1st video.

 

On 2/4/2021 at 2:48 AM, ZachSaucier said:
  On 2/4/2021 at 2:07 AM, Shehzad said:

If you scroll fast where enter and leave animation are triggered at the same point (like at box-6), you will notice that most of the time animation will not be completed and both elements will remain in the viewport overlapping over each other.

 Pls check 2nd video

 

On 2/4/2021 at 2:48 AM, ZachSaucier said:
On 2/4/2021 at 2:07 AM, Shehzad said:

if you press the home or end button then animation will not be completed as well like my first demo.

I have no idea what "home" or "end" button you're talking about as there is nothing like that in your pen.

By home and end button, I meat these button on keyboard. I apologize I did not mention it before. 

Pls check last video.

 

Lastly all videos are from my last demo and of bad quality just to keep the size below 500kb but serves the purpose and explain my issues in much better way.

 

Regards,

Shehzad Asif

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...