Share Posted March 13, 2019 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: I want the background color changing gradually with the current time, so as example: from dark at night to bright at day. 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 More sharing options...
Share Posted March 14, 2019 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! 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 14, 2019 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 More sharing options...
Share Posted March 14, 2019 @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. 5 Link to comment Share on other sites More sharing options...
Share Posted March 14, 2019 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? 4 Link to comment Share on other sites More sharing options...
Share Posted March 14, 2019 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 2 Link to comment Share on other sites More sharing options...
Share Posted March 14, 2019 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? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now