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.
Image starts in the bottom right hand, showing half bowl cut off a the bottom.
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.
Stays at the top through the next pink section, before triggering again on the third green section and moving out of shot.
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!
