Jump to content
Search Community

Staggered moving along path / incremental end value for MotionPath

fionchadd test
Moderator Tag

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

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.
×
×
  • Create New...