fionchadd Posted October 29, 2021 Share Posted October 29, 2021 Hi there, I'm trying to make a caterpillar which crawls along a leaf. I'm using MotionPath to move the caterpillar along the leaf, but what I would like to do is move it along the leaf in stages rather than all in one go. Is it possible to increment the start and end value for each repeat, in the way that I can for X values, for example? I tried this: .to(".body-outer", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 1], autoRotate: true, start: 0, end: 0.1, offsetX: "-=0", fromCurrent: true, relative: true, }, duration: 1, ease: "linear", stagger: 0.4, repeat: 10, },"<") and I've also tried this: .to(".body-outer", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 1], autoRotate: true, start: "+=0", end: "+=0.1", offsetX: "-=0", }, duration: 1, ease: "linear", stagger: 0.4, repeat: 10, },"<") but neither of them seem to work, the caterpillar is only travelling along 10% of the path at the moment, rather than travelling further along the path each time. Thanks! Hannah See the Pen OJjjpvp by fionchadd (@fionchadd) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 29, 2021 Solution Share Posted October 29, 2021 Hi Hannah, A really neat feature of GSAP is that you can animate an animation, like the progress of animation. Just a really basic example of animating the progress in 10% intervals. See the Pen jOLLxOB by GreenSock (@GreenSock) on CodePen 6 Link to comment Share on other sites More sharing options...
fionchadd Posted October 29, 2021 Author Share Posted October 29, 2021 Hi OSUBlake, Ah, thanks so much! This is really helpful and will definitely get me where I want to be. Thanks again! Hannah 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