Jump to content
GreenSock

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

Need help to animate a analog clock

Recommended Posts

Hello guys,

 

Greensock and his plugins is very new to me and I have trouble understanding it, I hope the answers on this post will help me out!

I need help to animate a analog clock, the animations have to be done with 'Greensock'. Basically, I already have the analog clock coded. This link leads to my repo on

github: https://github.com/noahkroez/Challenge-2.

I was searching on the internet 

I just need two animations added with the Greensock plug-in:

  1. I want the background color changing gradually with the current time, so as example: from dark at night to bright at day.

  2. I want the clock to slides in from the left when the page loads.

See the Pen gEodMQ by noahkroez (@noahkroez) on CodePen

Link to comment
Share on other sites

Hm, it looks like you must have partially copied-and-pasted chunks of code from elsewhere (not sure where); there are several references to "timeTween" but the actual declaration is totally missing, so it's undefined. Errors are being thrown in the JS, halting execution. It's hard for me to discern exactly what was intended there, but I took a shot at what I'm guessing you were looking for logic-wise: 

 

 

I feel a little weird giving you the solution, though, if this is an assignment for a class(?) so please make sure you really understand the code and let us know if you have any questions. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Thank you very much first of all! The code u added in JavaScript made me understand it better! This assignment is something I made up for my self :).

I am really interested in greenSock but there is just not enough information about it online in my honest opinion. Maybe I challenged my self a bit too much with this 'clock' thing. 

 

The next thing I want the clock to do is: Let the clock text slide in from the left, is this possible, if so, could you please explain it to me? 

If you make another codepen for me could you please add comments with a little bit explanation about the code, would me great for me to understand it!

 

Thank you in advance,

 

Noineter

Link to comment
Share on other sites

@noineter

 

Quote

I am really interested in greenSock but there is just not enough information about it online in my honest opinion.

 

If you're looking for resources on GSAP, there's a ton, and the docs are very detailed, too:

https://greensock.com/docs

 

https://greensock.com/learning

 

https://ihatetomatoes.net/get-greensock-101/

 

https://frontendmasters.com/courses/svg-animation/

 

Or just spend a few hours on this forum. There's a wealth of knowledge and passion for helping here that I've not seen for any other web development tool.

 

 

  • Like 5
Link to comment
Share on other sites

8 hours ago, noineter said:

The next thing I want the clock to do is: Let the clock text slide in from the left, is this possible, if so, could you please explain it to me? 

 

That's certainly possible. The best way to learn is by trying to create that animation on your own. @elegantseagulls has provided some great links to help you along the way. If you get stuck, we're happy to point you in the right direction.

 

We recently had another thread about an analog clock assignment. I wonder if perhaps you're in the same class?

 

  • Like 4
Link to comment
Share on other sites

I don't have anything with a clock, but the code below shows something animating from left to right.

Hopefully it will give you some ideas about how to move your clock.

 

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

 

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