PointC

I didn't know that. That's quite handy. Several months ago (at Blake's recommendation) I installed Chrysto's GSAP sniffer. That's been a nice little extension too. For anyone not familiar with it - it's a Chrome extension that lights up green with the GS version number when you're on a site using GSAP. More often than not when I see something awesome, that little icon is glowing green so GS is being used quite a lot out there. If anyone wants to install the extension, here's the link: https://chrome.google.com/webstore/detail/gsap-sniffer/ohjmhldioopcachmenfnhlbgmkaohgbb

I thought it was a little strange that the minute hand never moved in your original pen, but now I see you're trying to match what's happening in that video. In that case, we can take the repeat off the timeline and add it to the first tween so that does a complete loop 3 times. Then we add a tween to the timeline that moves the hour hand 90 degrees into the 3 o'clock position like this: var tl = new TimelineMax(); tl.to(".hour", 1.04, {rotation: 360, ease:SteppedEase.config(12),repeat:2}) .to(".hour", 0.32, {rotation: "+=90", ease:SteppedEase.config(3)}); Here's a revised pen: http://codepen.io/PointC/pen/vGQKwd/ Happy tweening.

You didn't think of it because it's Saturday and you should be out having fun instead of working.

Hey jimeast Just open the file and there will be comments at the top with the version and date. Happy tweening.

Hi Arun I think you may be working too hard on this animation. You're showing and hiding the same SVG 12 times to get an animated clock hand. We can make your whole animation a lot easier by animating the hour and minute hands of the clock. If you want it to jump to each position on the clock, steppedEase is perfect for that kind of thing. Your code would then look like this: tl.to(".minute1", 3, {rotation: 360, ease:SteppedEase.config(12)}) //we then update the hour hand rotation on each repeat of the timeline More reading about steppedEase: http://greensock.com/docs/#/HTML5/GSAP/Easing/SteppedEase/ If you don't want the jump animation of the hour and minute hands, you can get a super smooth clock using a Linear ease. I've made a CodePen for you with both types of clocks. http://codepen.io/PointC/pen/grQOdK/ I think doing it this way will save you a lot of code and make changes much easier. Hopefully that helps a bit. Happy tweening.

ah... o.k. - you could set up a variable to get the window height and divide by 2 like: var h = window.innerHeight/2 and then animate the y position to that value. Here's a simple CodePen with that possibility: http://codepen.io/PointC/pen/yOQLMr/ Depending on what you're doing, you may have to update that variable on a window resize event. Does that help? Happy tweening.

Hi venn In your example, each element's animation will take 1 second. So with an offset of .25, the total duration will be 1.5 seconds. Here's a really simple CodePen to illustrate it: http://codepen.io/PointC/pen/XdyWNr/ Hopefully that helps a bit. Happy tweening.

Hi BradLee Setting an element's position with left and top is perfectly fine. It's just not recommended to animate with them. So you center it like this: TweenMax.set(yourElement, {xPercent:-50, yPercent:-50, left:"50%", top:"50%"}) When you read about animating with x and y instead of left and top, that's referring to sub-pixel rendering. Left and top use whole numbers so the animation can seem a lot less smooth using those properties. x and y will be much smoother since they animate at a sub-pixel level. For more info about xPercent and yPercent, please check out this post: http://greensock.com/gsap-1-13-1 and the corresponding CodePen: http://codepen.io/GreenSock/pen/rAetx Happy tweening.

Thanks for the sample image - that helps me see how you want this to animate. In that case, you can use Carl's scale example and turn it into a timeline like this: var tl = new TimelineMax({ repeat:-1, repeatDelay:0.3}); tl.from("#rectangle-one, #rectangle-two", 0.6, {scaleY:0}) .to("#rectangle-one, #rectangle-two", 0.6, {scaleY:0, transformOrigin:"50% 100%"}); http://codepen.io/PointC/pen/PNxoYK Is that the way you wanted it? Happy tweening.

Hi Lagden Have you tried that with 1.18.4 yet? That may fix your issue. If not, I know Jack has been working like crazy on the next release (1.18.5) so he'll probably jump in here too. Happy tweening.

Ha! Now why didn't I see the obvious solution of using scale? Much simpler. I'm always looking for any excuse to use a cool plugin.

Hi farhoudz I think I understand your question and desired behavior. In this case, my advice would be to use the drawSVG plugin instead of the morphSVG plugin. You can then use lines instead of rectangles and control their behavior a little more easily. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/mPzajY/ If I misunderstood your desired outcome, please let us know. Just for future reference, you can use the Club Plugins on CodePen. There are special versions that are CodePen safe. They can be a bit tough to find sometimes though so here's a GreenSock pen which has all the links you need: http://codepen.io/GreenSock/pen/OPqpRJ/ Hopefully that helps a bit. Happy tweening.

Hi sareer Welcome to the forums. Carl is absolutely right about SVG being the best choice for this type of animation. It looks great at all resolutions and scales beautifully. In addition to the examples he posted, here is one I used for an answer to another forum question. http://codepen.io/PointC/pen/XdVWoJ/ Since the path is visible, you can see exactly what's happening. Try sizing the screen and you'll see that everything works well at any screen size. That demo does use the morphSVG plugin to create the motion path and that is a Club plugin. You can experiment with it on CodePen, but to use it in the wild, you would need a Club Membership. You can also learn more about that plugin and how the MorphSVGPlugin.pathDataToBezier() method works by reading this blog post: http://greensock.com/morphsvg-update Hopefully that sets you on the right path. (pun intended) Happy tweening and welcome aboard.

Hi alextodea I'd tend to agree with Dipscom about the need for extra obstacles for the user. As designers and developers, we can get so caught up in the 'cool' factor, we sometimes lose sight of what we're trying to accomplish. Today's users have the attention span of a hummingbird revved up on an overdose of caffeine so we need to show them something pretty quickly. Never underestimate the short attention span of the user. That being said, if you want to make something like the website you linked to, the easiest way would be to keep adding to the timeline I made for you in your other question as Gardi has shown. Your other option would be to create a separate content timeline in a function and call that when the button slide animation has finished. Happy tweening.

Hi philgwill Welcome to the forums. What have you tried so far? We provide our best help when we can see some live code. If you could make a CodePen, that would get you the best answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ For now, this post may help you http://greensock.com/forums/topic/11997-animate-dot-particles-on-bezier-path/?p=49182 Happy tweening.

Hi dghez I'm not quite sure of your desired behavior here, but wouldn't your spinning animation disappear once the content has loaded? If you're creating a loader animation, this post should help: http://greensock.com/forums/topic/13216-images-preload/?p=54633 Jonathan has a nice simulated loader animation here: http://codepen.io/jonathan/pen/jbdgPg Hopefully that helps a bit. Happy tweening.

Hi hareeshch, I'm not an Angular user myself, but you may find a few people willing to answer Angular questions around here. This is a GreenSock forum though, so we focus most of our attention on GSAP related questions and problems. That being said, you can find several posts about Angular. Just use the search feature on the upper right section of the page. Here are a few that may help: http://greensock.com/forums/topic/9443-gsap-angular-js/ http://greensock.com/forums/topic/13594-greensock-tweens-in-angular-2/ http://greensock.com/forums/topic/10822-easier-animations-in-angular-13/ http://greensock.com/forums/topic/14090-gsap-with-angular-directives/ Happy tweening.

Hi caemostajo Since you're planning on changing the animation over to GSAP anyway, I'd ask that you please do that first so we can better assist you with GreenSock related problems. There are probably some around here that would troubleshoot a CSS animation, but I'm not one of them - that syntax gives me a headache. As far as 3D cubes go, we had a pretty good discussion that might help you over here: http://greensock.com/forums/topic/13399-rotationx-doesnt-fit-like-rotationy-rotationz-in-my-3d-cube-test/ Jonathan may chime in here too. He's the resident 3D cube expert. Happy tweening.

I love that little trick Carl. Hopefully it will be even easier with SVG 2 when we have multiple strokes.

Hi hellol11 Almost the exact same question was just asked and this was Jack's response: http://greensock.com/forums/topic/14238-feature-request-per-property-control/?p=60410 Happy tweening.

I thought that's probably what you were trying to do, but thought I'd throw my little 'cheat' out there anyway. Good luck with your project.

Hi tony-mm Welcome. We need to keep the focus of the forum on GSAP related problems and questions. A quick Google search will show you loads of articles about responsive design and how to size things for mobile. That being said, we do try to help as much as we can with non-GSAP related issues which is why Carl mentioned the fact that you'll benefit from taking a look at xPercent and yPercent. http://greensock.com/gsap-1-13-1 Here is the CodePen that goes along with that blog post: http://codepen.io/GreenSock/pen/axzmb If you follow that example and read that info, you should be able to make your animation work well from 4K monitors down to phones. Happy tweening.

Hi valiz22 Welcome to the forums. I'm not sure what part you need help with. It looks like you're pretty close. The site you linked to just moves -26px and then plays a secondary animation, moves -26px and then plays another one etc. It looks like your list is moving the full 260px in one tween. There are a few ways to go about this. You could set up a loop and move -26px on each iteration with a pause between or you could create the 26px movement in a function that gets called at the end of each secondary animation. I'd like to give you more specific answers, but I'm not sure what exactly isn't working. Do you have a particular GreenSock related question about something that isn't working correctly? Happy tweening.

Hi PINELABS IT Welcome to the forums. Yep - physics are really cool and a lot of fun. We had a similar question asked not too long ago and Blake provided several examples as well as some great book recommendations to enhance your learning in this area. Please take a look: http://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/ Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi Zannen Welcome to the forums. I took a look at your pen, but saw some errors so you may still be working on that? Anyway, Jonathan has posted some great information about animating a gradient here: http://greensock.com/forums/topic/13685-morphsvg-animating-gradient-assets/ You also asked about an easier way to do this. Depending on your needs, you may be able to fake the transition. You could do that by adding the desired ending gradient to your end path and the desired starting gradient to your start path. Make sure your end path(s) are above your start path(s) and hidden via the CSS. Then you simply morph your start path into the end path. When the morph ends, you tween the autoAlpha of the end path up to 1. Since the start path is now the same shape and position as the end, it looks like the gradient is actually shifting. It's a cheat, but it's simple and may work for you. Here's a simple CodePen with that possibility. http://codepen.io/PointC/pen/XdBvEB/ Hopefully that helps a bit. Happy tweening and welcome aboard.