Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Turning GSAP v2 JS into V3 JS

Recommended Posts

Hello Everyone,

as i am new to this Ultimate Gsap World, i am working on understanding the principle of Javascript at the same time with buliding a Gsap animation.

i attached an old version of Gsap-Javascript file that was used in 2017, and i should mention that i spent one whole week trying to apply every single detail that have been mentioned in the Learning page of Gsap.

Can you help me upgrade this attached JS file so it can work on the new V3 GSAP.

(i am not that good with functions and need more time so go easy on me) :D

with all Respect and appriciate to all your Comments.


See the Pen by maher-haddad (@maher-haddad) on CodePen

Share this post

Link to post
Share on other sites

Hey m.had123 and welcome to the GreenSock forums! 


We're happy to help with your conversion but the best thing we can offer is the GSAP 3 page and migration guide:

If you have specific questions please let us know and we're happy to help :) 

  • Like 1

Share this post

Link to post
Share on other sites

@ZachSaucier Big Thanks for your Reply, 

i did checked them before i write this post, but it didn't work, so i deleted all Functions and write it in the new GSAP form as 

i replaced "var tl4 = new TimelineMax();" with the new version style "var tl4 = gsap.timeline();" which made it work but only for one time.

then when i added "var tl4 = new TimelineMax('repeat:-1');" which should makes it infinite loop, all contents disappear.

I am really not sure where is my mistake, this is why i posted the whole file so someone could take my hand and tell me exactly where to start and what to change.

Thanks alot again 

Share this post

Link to post
Share on other sites

Hm, tl1 = new TimelineMax('repeat:-1') is invalid. I think you meant tl1 = new TimelineMax({repeat:-1})  It should be an object, not a string. 


Other than changing new TimelineMax({repeat: -1}) to gsap.timeline({repeat:-1}), there's not much else that you NEED to change, although you could definitely shorten some of your code with the newer syntax. It's not necessary, though, in terms of functionality.


If you still need some help, please provide a codepen or something that we can actually see in action to troubleshoot more effectively. 


Happy tweening!

  • Like 2

Share this post

Link to post
Share on other sites


i uploaded it as you told me and here is the Pen Link: 

See the Pen abvRRGW by maher-haddad (@maher-haddad) on CodePen

I did changed it as you told me but still not working

much big Thanks for your efforts

Share this post

Link to post
Share on other sites

cool animation!


i took a minute to make the changes you probably need. please see comments in code

See the Pen gOaBqjZ?editors=0010 by snorkltv (@snorkltv) on CodePen


If you need a crash course on upgrading to V3 and learning all the "new tricks" check out my courses in my sig below. I'm confident they will save you many hours of frustration and help you streamline your approach.


  • Like 3

Share this post

Link to post
Share on other sites


I could not be more Thankfull.

Big Thanks from deep Heart for your Help solving it.

I would like to take not only one course but more.

Thanks again Carl, it felt like i didn't lost 9 Days studying.

And Massive Thanks for all GSAP Admins and the people who took care.

Love you all

  • Like 1
  • Thanks 1

Share this post

Link to post
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.