Jump to content


convert old gsap code into new one

Go to solution Solved by GreenSock,

Recommended Posts

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

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

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

I assume you meant to do a to()?


Here's a migration guide:


Link to comment
Share on other sites

@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 ?

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
  • Thanks 1
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.