Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fionchadd

Staggered moving along path / incremental end value for MotionPath

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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

 

  • Like 6
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×