Jump to content
Search Community

Overlapping parts of animation, footsteps

Jenna test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Everyone!


I am very new to greensock but love it already! I am currently doing an animation that has footprints walking and I am trying to overlap it so that I see at least two footprints at once and the first fading out as the third comes in. Where I am so far:

.from($rightfoot,  0.5, {top:241,autoAlpha:0,})
  .to($rightfoot, 0.5, {top:241,autoAlpha:1,})
  .to($rightfoot, 0.5, {top:241,autoAlpha:0,})
  .from($leftfoot, 0.5, {top:216,autoAlpha:0,}, "-=1")
  .to($leftfoot, 0.5, {top:216,autoAlpha:1,})
  .to($leftfoot, 0.5, {top:216,autoAlpha:0,})

  .to($rightfoot, 0.5, {top:227,left:123,rotation:62,autoAlpha:0,}, "-=0.65") //2
  .to($rightfoot, 0.5, {top:227,left:123,autoAlpha:1,})
  .to($rightfoot, 0.5, {top:227,left:123,autoAlpha:0,})

  .to($leftfoot, 0.5, {top:200,left:127,rotation:62,autoAlpha:0,}, "-=0.65")
  .to($leftfoot, 0.5, {top:200,left:127,autoAlpha:1,})
  .to($leftfoot, 0.5, {top:200,left:127,autoAlpha:0,})

  .to($rightfoot, 0.5, {top:207,left:159,rotation:47,autoAlpha:0,}, "-=0.65") //3
  .to($rightfoot, 0.5, {top:207,left:159,autoAlpha:1,})
  .to($rightfoot, 0.5, {top:207,left:159,autoAlpha:0,})

  .to($leftfoot, 0.5, {top:172,left:162,rotation:40.5,autoAlpha:0,}, "-=0.65")
  .to($leftfoot, 0.5, {top:172,left:162,autoAlpha:1,})
  .to($leftfoot, 0.5, {top:172,left:162,autoAlpha:0,})

  .to($rightfoot, 0.5, {top:171,left:192,rotation:31.5,autoAlpha:0,}, "-=0.65") //4
  .to($rightfoot, 0.5, {top:171,left:192,autoAlpha:1,})
  .to($rightfoot, 0.5, {top:171,left:192,autoAlpha:0,})

  .to($leftfoot, 0.5, {top:137,left:186,rotation:14.5,autoAlpha:0,}, "-=0.65")
  .to($leftfoot, 0.5, {top:137,left:186,autoAlpha:1,})
  .to($leftfoot, 0.5, {top:137,left:186,autoAlpha:0,})

  .to($rightfoot, 0.5, {top:127,left:209,rotation:9.5,autoAlpha:0,}, "-=0.65") //5
  .to($rightfoot, 0.5, {top:127,left:209,autoAlpha:1,})
  .to($rightfoot, 0.5, {top:127,left:209,autoAlpha:0,})

  .to($leftfoot, 0.5, {top:96.2,left:194,rotation:0,autoAlpha:0,}, "-=0.65")
  .to($leftfoot, 0.5, {top:96.2,left:194,autoAlpha:1,})

  .to($rightfoot, 0.5, {top:96,left:205,rotation:0,autoAlpha:0,}, "-=0.65") //end
  .to($rightfoot, 0.5, {top:96,left:205,autoAlpha:1,})

Thanks for any help in advance!









Link to comment
Share on other sites

Hi again Jenna,


We're always happy to lend a hand. We only ask people to provide a reduced-case demo to help with the troubleshooting.


There are lots of variables that need to be accounted for when trying to help. As an example: how many feet have you got in your code? If you only have two ($leftfoot, $rightfoot) then, there's no way you can have an overlap with a third foot, right?


Also, there are other things we can point out to improve your code, if we are able to see what you are doing in a live, editable environment. Again, an example: you should animate x/y position rather than left/top - That will be a lot more performant if you do.



If you could setup a little demo of what you are trying to achieve, it would go a long way in helping us helping you.


Here's a post on how to set up a demo: https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


And here's a video: 


Happy tweening!

  • Like 5
Link to comment
Share on other sites

Hi Dipscom,


Have just done this on codepen

See the Pen YZrGGa by Spira (@Spira) on CodePen


I am using the same images for all the footsteps, leftfoot and rightfoot, do I need to copy them and assign them different id's would that be correct?


I actually think now that having just both footsteps at the same time would work, but as I try to overlap the animation I see them moving and rotating to their new posistions everytime I try this and it just looks like they are sliding.



Link to comment
Share on other sites

Hi ,


That helps a lot. Thank you.


There are several ways you could go about it. It really boils down to what effect you have in mind. Let's go with a super simple effect that is just two feet, ok?


Here's a quick & dirty taster of things to come.


See the Pen qrPRrO by dipscom (@dipscom) on CodePen


I'm about to leave the office right now but I will come back with a better version of that later on. Just bear with me.


Hopefully Evil Blake will not sweep down and steal my thunder while I eat/sleep/etc, you know those things that normal people do.

  • Like 4
Link to comment
Share on other sites

Hi guys!


These both look like really good examples, I'll work on trying to get these to work with my values. The idea was the footsteps to walk up and have some text come down to meet it inline so it gives the illusion of the screen scrolling kind of.


Evil Blake? I thought you were all Superheroes! Supervillian double identity/evil twin? just kidding dont want to make any enemies!


Thanks again!

  • Like 2
Link to comment
Share on other sites

Still working on this just a few problems with trying to set a bezier path like in Dipscom's example, I have the image of what I'm trying to do http://res.cloudinary.com/dwr6mqx2g/image/upload/v1489664306/footsteps_fwbcrt.png . Is there somewhere I can read more about bezier paths, I've tried editing the earlier pen and adding it to my code from before but it goes a bit crazy.


Ty in advance for any help!

Link to comment
Share on other sites

Hey ,


How is the progress going? Have you got your head around the bezier bit? Once you do, do check out the steppedEase docs as well.


It will probably be easier to position your feet in a container that you can position it anywhere and have the feet move along the bezier. That way if you need to move them a bit, you don't need to edit all the bezier points. Also, if you need to change the bezier, it shouldn't mess with the positioning.


I've updated the demo I made with this idea:


See the Pen qrPRrO by dipscom (@dipscom) on CodePen


I also noticed that we can't have the same number of steps for both feet. It's not natural... If you're walking somewhere you don't take five steps with the right leg then five steps with the left one, do you? :)

  • Like 2
Link to comment
Share on other sites

Hi everyone!


Thanks for all the replys and help!


Current progress

See the Pen qrpjZv by Spira (@Spira) on CodePen

. Now starting to get the hang of bezier curves and I think I found a good way for me to set the points using illustrator.


I used the image linked before of all the foot positions and added two extra feet off screen to fade in/rotate, then I set the origin in illustrator to those feet and checked x and y co-ordinates using rulers and guides, it does not always match up 100% for some reason to the screen Im guessing because of the curve? But it still lets you find all the points in an easy way.


Will try the container idea too!


Thanks again!

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...