convert old gsap code into new one

[sonia90]

Hi everyone

I try to convert an old gsap 1.18.4 code 

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

into a new one  but I can't make the foot move correspond. Does somebody knows why

 

See the Pen poKoZmP by soniapello (@soniapello) on CodePen

[GreenSock]

You've got a .fromTo() that's missing one of the vars objects. Sorta like: 

// BAD
tl.fromTo("#id", {...to...});

// GOOD
tl.fromTo("#id", {...from...}, {...to...});

I assume you meant to do a to()?

 

Here's a migration guide:

 

[sonia90]

@GreenSock My bad but I trink it's more about the coordinates because even with the modification the movement seems different.

Did Gsap 1 is similar to Gsap 2 ?

[GreenSock]

7 minutes ago, sonia90 said:

Did Gsap 1 is similar to Gsap 2 ?

Yep, almost identical. 

 

Fundamentally, even GSAP 3 is virtually identical to previous versions too - it just has an improved, simplified syntax. It wouldn't handle coordinates any differently. I'm not quite sure what you mean - could you provide a minimal demo with just one small piece that is acting differently from what you expected? Like a simple CodePen in v1, and the same in v3 but acting very differently? We'd be happy to take a look. 

 

From what I can tell, you're not defining any durations for anything. Perhaps that's where your confusion lies? 

[sonia90]

@GreenSock Thank you Jack I've delete all the code just keep the right and left leg code and add the correspondant duration but my result is quite different from the original one It's more a moonwalk that a run.

[GreenSock]

I noticed several problems: 

1. You still had the .fromTo() in there with a missing vars object.
2. The old version tucked things nicely into modularized functions that spit back individual timelines which you then placed into a master timeline whereas in this updated version you're cramming everything into one timeline and sequencing them. So previously you had the left and right legs going at the same time, you set up the new one to have one leg animate, then the other. 
3. You're using the old duration syntax. You should define a "duration" value in the vars.
4. You don't need to put quotes around the numbers, just so you know. 

See the Pen oNyNJXV by GreenSock (@GreenSock) on CodePen