3rst Posted September 27, 2020 Share Posted September 27, 2020 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! See the Pen LYNaodX by silentcolours (@silentcolours) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted September 27, 2020 Share Posted September 27, 2020 Hey @3rst, Welcome to the GreenSock Forum. Does this example help you? See the Pen VwaRJYZ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
3rst Posted September 27, 2020 Author Share Posted September 27, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 Try setting invalidateOnRefresh: true on the tweens. Does that fix your issue? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now