scrollTrigger and motionPath issue

[Dastan]

Hi, Everyone!
i am new at GSAP!
i had two problems with my animation
 

1) the animation of car starts when it is visible, and i made onleave() in order to stop animation on leave, but when i scroll up to go back, it creates 'pin page space' (empty space above), how to solve this problem?
2) i have different colored boxes, and i want to make them appear when car reaches to its location, i've tried to use timelinemax with opacity, but i think its wrong 

please help!
Thanks!

See the Pen zYovXEg by kaiiejijia (@kaiiejijia) on CodePen

[akapowl]

 

Hey @Dastan

 

Your this.disable() throws an error. What you would want to do is probably pass self to that onComplete-callback and then use that for disabling the trigger.

 

This thread here discusses something very similar to what you want to achieve and in the answer of mine I linked to, I say some things about the problems/caveats that come with that.

 

 

 

 

 

Based on that here is an example using the onScrubComplete callback

 

See the Pen 000ae7fd0cb639525354387cf6e37a34 by akapowl (@akapowl) on CodePen

 

 

As for question 2)

 

I don't see your attempt in your pen, so I can not tell you much about that. One approach on how to to something like that is covered in this thread here by @mikel

 

 

 

A similar approach is used in this demo pen

 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

 

 

How about you give it a try, show it to us and we can see how we can help you from there, if you need further assistance?

 

Cheers,

Paul

 

 

[mikel]

Hey @Dastan

 

Welcome to the GreenSock Forum.

 

My interpretation:

• scrubbing (0.3) without pinning
• start: e.g. 200px below the top of viewPort
• end: e.g. 550px that corresponds to the distance from the first to the third box (if necessary, you can use a function to adapt this to different window heights)
• onUpdate: you can log the progress. Since the duration of the scrubbed animation is 1, you can position the corresponding 'fade in' animation (CSS: visibility: hidden) analogously to the appropriate progress.
• once: If this animation should only run once, use once: true

See the Pen PobPrpw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Dastan]

2 hours ago, akapowl said:

 

Hey @Dastan

 

Your this.disable() throws an error. What you would want to do is probably pass self to that onComplete-callback and then use that for disabling the trigger.

 

This thread here discusses something very similar to what you want to achieve and in the answer of mine I linked to, I say some things about the problems/caveats that come with that.

 

 

 

 

 

Based on that here is an example using the onScrubComplete callback

 

 

 

 

 

As for question 2)

 

I don't see your attempt in your pen, so I can not tell you much about that. One approach on how to to something like that is covered in this thread here by @mikel

 

 

 

A similar approach is used in this demo pen

 

 

 

 

 

How about you give it a try, show it to us and we can see how we can help you from there, if you need further assistance?

 

Cheers,

Paul

 

 

Thank You, Paul!

[Dastan]

1 hour ago, mikel said:

Hey @Dastan

 

Welcome to the GreenSock Forum.

 

My interpretation:

• scrubbing (0.3) without pinning
• start: e.g. 200px below the top of viewPort
• end: e.g. 550px that corresponds to the distance from the first to the third box (if necessary, you can use a function to adapt this to different window heights)
• onUpdate: you can log the progress. Since the duration of the scrubbed animation is 1, you can position the corresponding 'fade in' animation (CSS: visibility: hidden) analogously to the appropriate progress.
• once: If this animation should only run once, use once: true

 

 

 

Happy tweening ...

Mikel

 

oh great, thanks for helping, Mikel!