Need help to animate a analog clock

[noineter 0 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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: 

 

See the Pen 7ccc4864b0336dea773ad407ec309a08?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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!

[noineter 0 Likes (Newbie)]

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

[elegantseagulls 209 Likes (Specialist)]

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

 

 

[PointC 8,599 Likes (Superhero)]

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?

 

[Carl 9,066 Likes (Superhero)]

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

 

[GreenSock 8,117 Likes (Superhero)]

I updated the codepen to have the clock slide in. It should be as simple as a single TweenMax.from() call. 

See the Pen 7ccc4864b0336dea773ad407ec309a08?editors=0010 by GreenSock (@GreenSock) on CodePen

Is that what you're looking for?