0

I got inspiration from this pen where there are animated footprints. My question is how could I combine it with a given trajectory so that the footprints will just follow the path? My path would be something like:

<svg id="svg" width="800" height="800">
    <path id="path" d="M130 20 L230 80 L200 100 L170 200"/>
    <image id="footprint" xlink:href="http://icons.veryicon.com/png/System/Icons8%20Metro%20Style/Tracks%20Footprints%20Left%20shoe.png" x="0" y="0" height="50px" width="50px"/>
</svg>

Thank you very much for your help!

saladham
  • 69
  • 1
  • 8
  • maybe this might help you. https://www.youtube.com/watch?v=Tae96ze3xwY since they animate text on a scroll on a path. – Nicholas Dec 20 '19 at 08:44
  • I would love to keep the footstep motion like that in the pen. I know I can use animateMotion to move the footprint around, but the motion shouldn't be continous – saladham Dec 20 '19 at 09:18

1 Answers1

1

For that purpose i suggest you to use GREENSOCK, light weight easy to use and full of animation what ever you need IN you scenario

May be this will help you 

<img src="https://res.cloudinary.com/dwr6mqx2g/image/upload/v1489592258/leftfoot_hjajqj.svg" id="leftfoot">
      <img src="https://res.cloudinary.com/dwr6mqx2g/image/upload/v1489592258/rightfoot_fthak3.svg" id="rightfoot">

Some JS

var $rightfoot = $("#rightfoot"),
    $leftfoot = $("#leftfoot");

var tl = new TimelineMax({repeat:-1})



  var ease = SteppedEase.config(5);

tl

  .to($rightfoot, 0.25, {autoAlpha:1,},1)
  .to($leftfoot, 0.25, {autoAlpha:1,},1)
  .to($leftfoot, 3, 

  {bezier:{ curviness: 1, values:[{x:0, y:0},{x:52, y:-25}, {x:97, y:-39}, {x:136, y:-54}, {x:172, y:-83}, {x:197, y:-117},{x:200, y:-163,}],
  autoRotate:90}, ease:ease},1)

  .to($rightfoot, 3, 
  {bezier:{ curviness: 1, values:[{x:0, y:0}, {x:44, y:-13}, {x:97, y:-28,}, {x:134, y:-49,}, {x:166, y:-83,}, {x:182, y:-126,}, {x:176, y:-163,}],
  autoRotate:100}, ease:ease},1.25)

Referene

Codepen

Credits Jenna

Awais
  • 4,752
  • 4
  • 17
  • 40
  • Thank you very much for these! Do you know how my path data can be combined in this scenario? The trajectory needs to follow where the path data is given in d. In your answer, it seems that this is arbitrarily given in bezier and .to – saladham Dec 21 '19 at 11:55
  • Not exactly @saladham. may be this could help https://stackoverflow.com/questions/25384052/convert-svg-path-d-attribute-to-a-array-of-points – Awais Dec 27 '19 at 09:35