Responsive Animation of Image Along Path - ScrollTrigger, MotionPath

[3rst]

Hi All,  I have been fiddling with this for 48hours now and am definitely making silly mistakes, which I haven't figured out yet - Despite watching all of the helpful videos and reading the documentation. So I thought I may be able to reach out for help. 

 

Disclaimer: I have a basic understanding of HTML and CSS - only now learning JS. 

 

I am trying to animate an image along a path, which scrubs as you scroll down, with two triggers. It also needs to be responsive, so the paths relative size adapts to the inner viewport. 

 

1. Image starts in the bottom right hand, showing half bowl cut off a the bottom. 
2. As you scroll down the blue section, the bowl moves along a curved path up through the centre of the screen before stopping at the top - showing only half again. 
3. Stays at the top through the next pink section, before triggering again on the third green section and moving out of shot. 
4. If you scroll back up, it reverse its movements returning to the original positions in sequence. 

 

The problems I am facing are:

Having the SVG path fill screen responsively and hidden from view.

Second Trigger causes a flicker and jump to the bottom of the page. 

 

Question: I attempted to use an array of XY co-ordinates to plot a path, but found it was not smooth. I also wondered how to use these co-ordinance in reference to the screen viewport. EG. x: =inner.Viewport/2 (Assuming this is move to the middle of the viewport?)

 

I hope if someone can help me with these basic setup, ill be able to apply its principles to other parts of the project. 

 

Thank you!

See the Pen LYNaodX by silentcolours (@silentcolours) on CodePen

[mikel]

Hey @3rst,

 

Welcome to the GreenSock Forum.

 

Does this example help you?

 

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

 

Happy tweening ...

Mikel

 

[3rst]

Thank you for your reply. 

 

While it wasn't what I was looking for - I was able to use it to help me get closer to my goal.

I also found some common mistakes I was making.

 

Here is the latest version:

 

See the Pen YzqMzjG by silentcolours (@silentcolours) on CodePen

 

Now the animation works (kinda) I am finding it breaks when i resize the window. I have to refresh the browser for it to reset. Any advice?

[ZachSaucier]

Try setting invalidateOnRefresh: true on the tweens. Does that fix your issue?