How can I make scrollTrigger stop reversing?

[vrielsdenies]

Hello,

 

I'm using scrollTrigger to let a little paper plane fly over the screen. It works nice, but when the plane reaches the right side of the page, it should fly out of sight and not come back until scrolling back. But know when you keep scrolling down, the plane already returns  You can see it happen when the screen size is not too high. Is there to make the plane just when it leaves the page on the right side? 

See 

 

Many thanks! 

See the Pen vYzwGBM by Vrielsdenies (@Vrielsdenies) on CodePen

[mvaneijgen]

Hi @vrielsdenies! Your path isn't a single line! 

 

It looks like that in your design program (Illustrator) you've converted your stroke to an outline. I've set the fill to none and the stroke to red to better illustrate the issue, as you can see now your first tween works, but as you can see it has two strokes instead of one.

 

See the Pen VwGOORZ?editors=1101 by mvaneijgen (@mvaneijgen) on CodePen

 

Here is an example with a single stroke. 

 

See the Pen oNPRRRK?editors=1101 by mvaneijgen (@mvaneijgen) on CodePen

 

Oh and I have disabled ScrollTrigger for now, because that makes it way easier to debug the animation, when you're happy just enable ScrollTrigger again. I have also wrapped your elements in an extra div called .trigger and used that as the trigger element and set pin to true, now when you scroll the trigger elements stays pinned for the whole ScrollTrigger duration. Hoop dat het helpt en veel geluk!

[vrielsdenies]

Hi @mvaneijgen thanks a lot for your help! Weird that the stroke was converted to 2 strokes 🤨 Good catch

Fijne dag