Jump to content


JQuery clock to GSAP

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

So for a school product I really want to recreate something like this, but the example here is using jQuery. 


One of the conditions of the challenge was to use the GSAP libraries, so jQuery is not allowed. 


Is there an easy way to make this kind of clock using GSAP?

Is there fast way to replace jQuery with GSAP withing my js files?


I'm a beginner so all the tips are welcome!

See the Pen hrFwJ by kjwon15 (@kjwon15) on CodePen

Link to comment
Share on other sites

I don't see much of any animation happening except the words fading in and out. GSAP can certainly handle that for you. I think you're mostly looking for a way to not use jQuery, right? Here's a website that can help.




Have fun and good luck with your project.

Link to comment
Share on other sites

Indeed, it looks like your challenge only involves small amounts of GSAP functionality - the rest is just refactoring the non-animated jQuery logic. 


This is all totally doable with GSAP (for animation) and vanilla JavaScript (for the rest). 


We'd be happy to answer any GSAP-related questions here. Just let us know if you have any of those and we'll jump in. 

Link to comment
Share on other sites

Alrighty, Thanks for the replies guys! ?

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.