Animation is not pinned when I scroll back up fast

[mot]

Hi guys,

I'm new here and have a little problem with an animation, maybe someone has an idea or can help me, I'm not sure if I did it right.

 

I got a box that should appear with the appreance of the parent section, this works.

After that, I pin the box and let it pinned in the background, til a certain point (bottom of the parent section, I get the coordinates with getBoundingClientRect() from a spacer element), and then I want the box unpin / fade out to bottom into the next section, this also works.

 

When you scroll smoothly up and down, everything works as expected, but when you scroll back up fast, it can happen that the box is not visible and not pinned. I have no idea how I fix this.

 

Thank you

See the Pen QWGXNvw by ciruz (@ciruz) on CodePen

[ZachSaucier]

Hey mot and welcome to the GreenSock forums.

 

You're making one of the most common ScrollTrigger mistakes: including ScrollTriggers on tweens within a timeline. Doing so doesn't make much sense. Try making it without a timeline and let us know if you get stuck again