Maddy_007 Posted October 12, 2022 Share Posted October 12, 2022 Hello, I want to stop the motion path when the card reach to the bottom, I have also use the end property in the motion path object but it not works well. And also my card it not in the view while scrolling. It been two days I am working on it, can Any please help me out. See the Pen abGPaWj by maddy_001 (@maddy_001) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 12, 2022 Share Posted October 12, 2022 No need to post questions twice 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 12, 2022 Share Posted October 12, 2022 Hi, Indeed @mvaneijgen is right, if you add a new post to the ongoing thread, we will attend that one and will answer your questions there. SVG is not my strongest suit so I'm not completely sure that what I tried is the best possible approach. Basically I tinkered a bit with the general structure of the SVG path and it's location on the viewport. Also I made the viewport a bit bigger to give some space at the top and bottom of the SVG. See the Pen VwxqRJE by GreenSock (@GreenSock) on CodePen I think the best approach is to tinker with the viewport size, the position of the path in the viewport (give some space at the top and bottom, not make the path's height the viewport size) and play with the start and end positions. Finally in this cases, is super important to give the animation an ease: "none" in order to have the progress of the animation linear throughout it's entire duration. Hopefully this is enough to get you started. Happy Tweening! 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