Jenna

Hi everyone! Thanks for all the replys and help! Current progress http://codepen.io/Spira/pen/qrpjZv. 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!

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!

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!

Hi Dipscom, Have just done this on codepen http://codepen.io/Spira/pen/YZrGGa 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. Jenna

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! Jenna

Hi Dipscom, thank you I think this is exactly what I need! Will I still be able to add this into my animation at anypoint in the timeline? I saw a few examples of nested timelines or is that complicating things? Sorry for all the questions as I'm just starting out and new to coding! *edit Also would I be able to move between states on the sprite sheet like start at 1 go to 2 and have it repeat 2 and 3 and then at a point go back to one or 4? Jenna

Hi all, Im trying to do something very similar to this but what I think is much more simple(not for me as I am just starting out with greensock). I have three images that I am trying to transition to but with no flicker or fade currently my code looks like this tl .from($one, 0.1, {autoAlpha:0,}) .to($one, 0.1, {autoAlpha:1,}) .to($one, 0.1, {autoAlpha:0,}) .from($two, 0.1, {autoAlpha:0,}) .to($two, 0.1, {autoAlpha:1,}) .to($two, 0.1, {autoAlpha:0,}) .from($three, 0.1, {autoAlpha:0,}) .to($three, 0.1, {autoAlpha:1,}) .to($three, 0.1, {autoAlpha:0,}) .from($four, 0.1, {autoAlpha:0,}) .to($four, 0.1, {autoAlpha:1,}) .to($four, 0.1, {autoAlpha:0,}) .from($five, 0.1, {autoAlpha:0,}) .to($five, 0.1, {autoAlpha:1,}) .to($five, 0.1, {autoAlpha:0,}) as you can probably see I want the animation to be quite fast but with no fade/flicker which is what I seem to be getting. Im basically using those five images as a walk cycle for a letter image that needs to look like its walking on the spot. Thanks in advance for any help. Jenna